Published on | Prototyping: From UX to Front End — Medium CanvasFlip

Tying Up Loose Ends Before You Go Live

Designing a website is a complicated process. There’s so much to it- content, branding, usability and user experience etc. A website design checklist can make your life a lot easier.

Designing a website is a creative process. Agreed. But is it just about creativity, colors and contours? No, it’s much more than that. A website is a business tool and is intended to realize desired business objectives. So, the website you design must appeal, engage and influence users to take an intended action.

So, website designing is as much a science as an art. And there are tried and trusted rules to guide website designing. So that your website comes up to the user’s expectations.

This checklist will help you tie up loose ends in your website and ensure that your website succeeds in realizing the desired business outcomes.

Start with the 5-second test

Clarity separates well designed websites from the poor ones. What your website is all about? A user should be able to know what your website is about in 5 seconds. So, pick someone from outside or your office who has not seen the new design, show it to him for 5 seconds and switch off the screen. Now ask him what he remembers from the design.

The idea is to find if your new design is able to convey its purpose to a user in 5 seconds. If not then time to revisit the design.

Logo

The identity of your business is expressed through its logo. A lot of businesses are known by its logo. But there’s another important role of logo in the website- link to homepage. Its standard now. Users are used to it. So make sure that your logo is of the right size and resolution so that customer can understand it in first glance. And is linked to the home page.

Search Bar

Source: Hongkiat

Whether you’re designing a corporate website or an ecommerce site, a search bar helps the user quickly find items of his needs. So does your website has a search bar? And if yes, is it quickly accessible? No, then position it in a place of maximum visibility.

Navigation

Source: onextrapixel.com

Users want free movements across the website. They don’t like to think or search for next thing to do. Is your website navigation ensuring free movement? Is the path to goal clear? Here’s what to look for-

Primary menu must give access to all important sections of the websites
Footer menu must give access to all the pages in the website
Every page must have breadcrumbs to mark a user’s navigation trail

And if your pages are long and involves a lot of scrolling then your header should be sticky.

Images

Source: VWO

Good visuals grab user’s attention and help you convey your message in less. Poor visuals put user’s off. Here’s what to look for-

Put relevant visuals that adds value
Use good quality, high resolution images
Optimize images to minimize loading time but make sure it doesn’t affect image quality

Typography

Not all texts are equal. Effective use of different fonts and sizes help us make it distinctive and communicate the message effectively. Here’s what to check-

Don’t use more than 2–3 fonts
Font size should be minimum 14
Use different color for links within text
Use upper case or title case for headings and subheadings

Call To Actions (CTAs)

Source: Crazy Egg

CTAs drive various goals. So, the CTA buttons must be distinct, appealing and encourage action. Here’s what to look for-

Use bold and contrast colors on CTA buttons
Use some microinteraction to convey response on customer’s action
Check the position of the buttons

Responsiveness

Source: WebDev-il — blogger

Your users will access your website from desktops, mobile and Tablets etc. Your design should be able to deliver similar experiences across all device. So here’s what to look for-

Test your design across all devices
Check for accidental clicks due to scrolling on mobile
Check for pop-ups on mobile

Consistency

Your website design should be consistent. The home page may look different but other pages must have consistency. Here’ what to check-

Logo, header and footer on each page
Search bar on each page
Consistency in typography
Consistency in page layout

User Experience

The whole should be greater than sum of its parts. While checking elements is necessary, it’s also essential to look at the overall experience. Here’s what to check for-

Is your website winning user’s trust
Are the colors used in sync with your business
Is your website giving a happy feeling

Checklist of website design review

Use the above checklist to review your website design. Claps for all the ‘Yes’. And export all the ‘Nos’, to your ‘To Do’ list.

Want more?

Here are some helpful resources to improve your website design and boost UX-

How to effectively leverage animations for better UX?

UX of microinteractions for user delight

Designing forms that boost UX and deliver more conversions

Personalization for better UX

Dark UI vs Light UI: How to make the right choice?

Not using Visual Inspector Yet?

Visual Inspector is popular design tool for websites reviews, fixing design bugs and collaborating issues with client or dev folks.

Grab free copy of Visual Inspector from official CanvasFlip website or from Chrome Webstore.

Siftery brings you lifetime subscription of Visual Inspector for just $49 — https://www.canvasflip.com/visual-inspector/siftery/

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

Checklist for your next website review was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Checklist for your next website review

Cool stuff, every week

More Articles