Web Design Template

Explore

Web Design Checklist

Design

To create a website that’s visually appealing and functional, you’ll need to prioritize navigation and branding elements that contribute to a great user experience (UX) and user interface (UI).

Plan your site layout (and make it responsive)

Start with the big picture and get more granular as you go. Here’s how:

Your

web design software⁠

will likely provide you with access to website templates. Start by deciding whether you can customize a template or if you need to start from scratch. Browse the templates available to you to assess their quality and see how well they align with the vision for your site.

Decide which pages need to be included on your site with your team: this could include your homepage, your 'About Us' page, your product or service pages, and any checkout pages

Get ideas from

inspirational website designs⁠

and research common design patterns to decide what works well and what you want to emulate on your site

Sketch out roughly how you want each page to be organized, making sure elements like headers, navigation menus, call-out sections, buttons, forms, and footers are clear, easily navigable, and follow familiar design patterns

Pro tip: to create a responsive site that looks and works well on different devices, start planning your mobile interface at this stage. To optimize for mobile, you’ll need to modify elements like CTAs, images, and navigation menu placements so they’re easy for users to engage with on smaller screens.

Planning different interfaces early in the design process means more time to test them out with different users—and, ultimately, a successful website.

Use wireframes to test your layout

Once you have a sense of how your site should be laid out for users, put it to the test with wireframes.

Wireframes are two-dimensional illustrations or ‘website blueprints’. Use them to outline:

Web page structure and layout

Information architecture

Desired user flows

Don’t include branding elements or graphics at the wireframing stage. Instead, use wireframes to validate and test basic interfaces in the design process so you can identify usability problems early on—before you invest too much time and money into your website.

These popular tools can help you create and test wireframes:

⁠

Maze⁠

⁠

Figma⁠

⁠

InVision⁠

⁠

Proto⁠

⁠

Adobe XD⁠

⁠

Establish your branding

Your website is your company’s ‘home’ online—so it needs to reflect your

product vision⁠

. Use consistent branding so that when customers land on your homepage, they immediately understand your site’s feel and function.

Make these important site branding decisions early on so you can test them with users:

Logo: if you don’t already have a company logo, create one for your website. Hire a professional graphic designer or take a DIY approach with an online tool like

Canva⁠

Snappa⁠

Typography: select the fonts you want to use across your site, but keep things simple. Choose a maximum of three and stick with web-safe fonts like Arial, Verdana, and Tahoma. This way, your website will be

easily readable⁠

and you’ll avoid pesky display flaws and glitches.

Color palette: you’ve likely already decided on some brand colors when designing your logo. Use the principles of color theory and investigate your competitors’ branding to help decide which other colors to use on your site. Then, take note of their HEX codes, decide on your final palette, and use it consistently. Ideally, your website shouldn’t include more than three or four colors.

Design Checklist

Design Checklist

Name

Column 2

Notes

Check Responsiveness

Open

Validate HTML/ CSS

Open

Optimize Scripts

Open

Optimize Images

Open

Optimize CSS

Open

Upload Favicon

Open

Check Paragraph Styles

Open

There are no rows in this table

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.