Getting started on a web design project can be intimidating. There are a lot of moving parts, and clients tend to expect high quality. Goal identification, scope definition, sitemap and wireframe creation, content creation, UI design, testing the site, these are all the elements that the web design process most commonly includes.<\/p>\n
In other words, there\u2019s a lot that could go wrong. And I\u2019m not saying this to scare you, but to let you know how important it is to come prepared, and to always have your game plan ready.<\/p>\n
\u201cDon\u2019t bring a knife to a design fight.\u201d<\/em><\/span><\/p>\n So today, we\u2019re looking into 10 web design tips that you need to keep in mind when designing a website for your client. This goes for all types of websites where a business is selling to a customer (B2C). Think\u00a0e-commerce\u00a0stores,\u00a0small business websites, product websites, and so on.<\/p>\n A web design project cannot be successful until you have defined what \u201csuccess\u201d actually means.<\/strong><\/p>\n Depending on how experienced your client is with the idea of owning a website, they may or may not be able to articulate what they truly need.<\/p>\n This can be catastrophic later down the road. There\u2019s nothing worse than a client realizing mid-project that,\u00a0\u201cthis is not what I wanted!\u201d<\/em><\/p>\n That\u2019s why it\u2019s incredibly important to set the expectations during your initial communication with the client. Here are 5 questions to ask:<\/p>\n Once you have the answers, prepare a document that will \u201csell\u201d the client on your proposed solution. Include that document with the contract. At this point, you\u2019ve limited the number of surprises that can pop up later on.<\/p>\n (My experience with this always plays to asking my client “what is your purpose and goal for having a website.” When asked, the client always takes a moment to define this….and it’s so important to get this sorted out right from the get-go.)<\/strong><\/em><\/p>\n This one is in direct correlation with the previous point. Quite simply,\u00a0a website without a clear, single goal has no chance of being successful<\/strong>.<\/p>\n The goal is something that you and your client should define together. The goal needs to be clearly defined, measurable and achievable. Here\u2019s an example of a good goal for a website:<\/p>\n Option: A good goal for a website should be these three things:<\/p>\n And most importantly, a website should have only. One. Main. Goal.<\/p>\n (Once my client defines the goal it’s much simpler to work from that perspective)<\/strong><\/em><\/p>\n Goals<\/em>\u00a0are what your client wants to achieve with the website.\u00a0Problem-solving<\/em>\u00a0is something that the website does for its audience.<\/p>\n \u201cLet the audience know what\u2019s in it for them.\u201d<\/em><\/span><\/p>\n <\/p>\n The main purpose of this e-commerce website is to deliver new blades and shaving accessories to people every month. The Dollar Shave Club\u2019s subscription-based service solves the problem of having to buy those items at multiple different locations. The website\u2019s message and goal (buy now) are clear. In order to convert visitors into customers, the designers created a user experience and navigation focused only on the things their audience wants to know when considering the subscription-based purchase.<\/p>\n (If you define your audience, it’s much easier to research that market for what they respond to.)<\/strong><\/em><\/p>\n No amount of beauty can replace good content presentation. Content is king. You should\u00a0always be thinking about content\u00a0because\u00a0content\u00a0drives engagement, and engagement\u00a0drives action.<\/p>\n As a web designer, the worst thing you can do is put beauty above function. Or, as\u00a0John Maeda\u00a0says it, \u201cspray-on design.\u201d<\/p>\n Always start with the content that your client wants to showcase on the website, and only then think how design can help make that content more visible and resonate with the audience better.<\/p>\n For example, if you\u2019re building an e-commerce store, you should think about how you can make the products\u00a0stand out<\/em>\u00a0rather than\u00a0blend in<\/em>\u00a0with the rest of the design. Here\u2019s an\u00a0example by Tessemae\u2019s:<\/p>\n Notice how the products are the most visible elements on the page. Not the header, or the menu, or anything else.<\/p>\n (Defining what the client wants the website to say to that market makes it much easier and faster to sort out how to deliver the message.)<\/strong><\/em><\/p>\n Standards are great. Learn to love them. Don\u2019t rebel.<\/p>\n There\u2019s one main reason why standards are great: people \u2013 your audience \u2013 have gotten used to them. Don\u2019t make your user learn a new design language to navigate the website. Make it easy for your users by implementing web standards that they\u2019ve already come to understand.<\/p>\n For example, every e-commerce store places the shopping cart module in the upper right corner. They don\u2019t do that because it\u2019s pretty. They do it because people expect to find the shopping cart there.<\/p>\n <\/p>\n Embrace other web standards, too. Such as:<\/p>\n (Web standards are so important to adhere to and I always tell my clients we must stay within them as over the years they have been designed through much trial and error.)<\/strong><\/em><\/p>\n If people can\u2019t navigate from point A to point B easily then the website won\u2019t be able to achieve its goal.<\/p>\n Therefore, your\u00a0navigation design\u00a0should require only the minimum amount of information needed to get the user from A to B quickly.<\/p>\n Start by laying out the most important steps along the user\u2019s journey through the website. Make sure that your navigation helps them with that journey instead of making things more difficult. Think how you can help the user do what they already want to do rather than forcing them to see things your way. Utilize\u00a0website navigation best practices\u00a0and know\u00a0basic patterns of mobile navigation\u00a0for an optimized user experience.<\/p>\n1. Set the Expectations Right<\/strong><\/h3>\n
\n
2. Define the Goal<\/strong><\/h3>\n
\n
3. Think Audience First, and Solve a Specific Problem<\/strong><\/h3>\n
![\"\"](\"https:\/\/shereshevsky.net\/wp-content\/uploads\/2020\/01\/dollar-shave-club.jpg\")
<\/a><\/p>\n4. Put Content First<\/strong><\/h3>\n
<\/a><\/p>\n5. Respect Web Standards<\/strong><\/h3>\n
\n
6. Make Navigation Simple<\/strong><\/h3>\n