small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

What Is the Open Web?

From Design System to ‘NFT Design System’: Creating TinyFaces

<p>Published on <a href="https://blog.prototypr.io/checklist-for-your-next-website-review-8aa8a3807a90?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> CanvasFlip </p>
<h4>Tying Up Loose Ends Before You Go Live</h4>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>This checklist will help you tie up loose ends in your website and ensure that your website succeeds in realizing the desired business outcomes.</p>
<h4><strong>Start with the 5-second test</strong></h4>
<p>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.</p>
<p>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.</p>
<h4><strong>Logo</strong></h4>
<p>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.</p>
<h4><strong>Search Bar</strong></h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/825/0*pNm6jyglGHmUmTBX."></p>
<p>Source: <a href="https://www.hongkiat.com/blog/design-faq-pages/">Hongkiat</a></p>
<p>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.</p>
<h4><strong>Navigation</strong></h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/0*nqfb1JtRgfSw4YHw."></p>
<p>Source: <a href="https://www.google.co.in/url?sa=i&amp;rct=j&amp;q=&amp;esrc=s&amp;source=images&amp;cd=&amp;cad=rja&amp;uact=8&amp;ved=0ahUKEwjuut_68tHYAhXGQY8KHR4fBYoQjB0IBg&amp;url=https%3A%2F%2Fonextrapixel.com%2Fairline-website-design-the-best-examples%2F&amp;psig=AOvVaw0cCF6R_86wQBZijbwjrEzG&amp;ust=1515828333023284">onextrapixel.com</a></p>
<p>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-</p>
<ul>
<li>Primary menu must give access to all important sections of the websites</li>
<li>Footer menu must give access to all the pages in the website</li>
<li>Every page must have breadcrumbs to mark a user’s navigation trail</li>
</ul>
<p>And if your pages are long and involves a lot of scrolling then your header should be sticky.</p>
<h4><strong>Images</strong></h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*wgeiFjGZq1lZIVqg."></p>
<p>Source: <a href="https://vwo.com/blog/design-principles-increase-conversions/">VWO</a></p>
<p>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-</p>
<ul>
<li>Put relevant visuals that adds value</li>
<li>Use good quality, high resolution images</li>
<li>Optimize images to minimize loading time but make sure it doesn’t affect image quality</li>
</ul>
<h4><strong>Typography</strong></h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/701/0*j9bjSYEgVX9Hm1yF."></p>
<p>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-</p>
<ul>
<li>Don’t use more than 2–3 fonts</li>
<li>Font size should be minimum 14</li>
<li>Use different color for links within text</li>
<li>Use upper case or title case for headings and subheadings</li>
</ul>
<h4><strong>Call To Actions (CTAs)</strong></h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/975/0*TErtY8g2wRdrcBgN."></p>
<p>Source: <a href="https://www.crazyegg.com/blog/blog-ctas/">Crazy Egg</a></p>
<p>CTAs drive various goals. So, the CTA buttons must be distinct, appealing and encourage action. Here’s what to look for-</p>
<ul>
<li>Use bold and contrast colors on CTA buttons</li>
<li>Use some microinteraction to convey response on customer’s action</li>
<li>Check the position of the buttons</li>
</ul>
<h4><strong>Responsiveness</strong></h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/450/0*NtRtz4mZ2K91OI9n."></p>
<p>Source: <a href="https://webdev-il.blogspot.com/2011/09/examples-of-responsive-web-design.html">WebDev-il — blogger</a></p>
<p>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-</p>
<ul>
<li>Test your design across all devices</li>
<li>Check for accidental clicks due to scrolling on mobile</li>
<li>Check for pop-ups on mobile</li>
</ul>
<p><strong>Consistency</strong></p>
<p>Your website design should be consistent. The home page may look different but other pages must have consistency. Here’ what to check-</p>
<ul>
<li>Logo, header and footer on each page</li>
<li>Search bar on each page</li>
<li>Consistency in typography</li>
<li>Consistency in page layout</li>
</ul>
<p><strong>User Experience</strong></p>
<p>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-</p>
<ul>
<li>Is your website winning user’s trust</li>
<li>Are the colors used in sync with your business</li>
<li>Is your website giving a happy feeling</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/497/1*nu_qDLH9ihL9f0DXyagYTg.png">Checklist of website design review</p>
<p>Use the above checklist to review your website design. Claps for all the ‘Yes’. And export all the ‘Nos’, to your ‘To Do’ list.</p>
<h4>Want more?</h4>
<p>Here are some helpful resources to improve your website design and boost UX-</p>
<p><a href="https://medium.com/@CanvasFlip/how-to-effectively-leverage-animations-for-better-ux-c3e64434593f?source=user_profile---------20----------------">How to effectively leverage animations for better UX?</a></p>
<p><a href="https://uxplanet.org/ux-of-microinteractions-for-user-delight-fac1baed527a?source=user_profile---------30----------------">UX of microinteractions for user delight</a></p>
<p><a href="https://medium.com/@CanvasFlip/designing-forms-that-boost-ux-and-deliver-more-conversions-e059f4d995a7?source=user_profile---------25----------------">Designing forms that boost UX and deliver more conversions</a></p>
<p><a href="https://medium.com/@CanvasFlip/personalization-for-better-ux-f8a9b8928ecc?source=user_profile---------23----------------">Personalization for better UX</a></p>
<p><a href="https://medium.com/@CanvasFlip/dark-ui-vs-light-ui-how-to-make-the-right-choice-5ddde9baabdb?source=user_profile---------21----------------">Dark UI vs Light UI: How to make the right choice?</a></p>
<h4>Not using Visual Inspector Yet?</h4>
<p>Visual Inspector is popular design tool for websites reviews, fixing design bugs and collaborating issues with client or dev folks.</p>
<p>Grab free copy of Visual Inspector from <a href="https://www.canvasflip.com/visual-inspector/">official CanvasFlip website</a> or from <a href="https://chrome.google.com/webstore/detail/visual-inspector-by-canva/efaejpgmekdkcngpbghnpcmbpbngoclc?hl=en">Chrome Webstore</a>.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/0*oQ4XkTxTrbzA-sTG."></p>
<p>Siftery brings you lifetime subscription of Visual Inspector for just $49 — <a href="https://www.canvasflip.com/visual-inspector/siftery/">https://www.canvasflip.com/visual-inspector/siftery/</a></p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=8aa8a3807a90" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/checklist-for-your-next-website-review-8aa8a3807a90">Checklist for your next website review</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Checklist for your next website review

Checklist for your next website review

Tying Up Loose Ends Before You Go Live

Top Stories