When I was in school studying Graphic Design I decided it was in my best interest to pursue Web Design too. Despite being quite different fields overall, I knew that when hiring a graphic designer many presume that the two fields go hand-in-hand and I wanted to stay ahead of the curve.
To be honest, I actually really fell in love with web design and briefly thought I would go that route instead... until I had to learn Javascript, and then I quickly said good-bye to any web design career. 👋
The biggest overlap I found in pursuing both Web and Graphic Design was the user experience component. When designing an effective website, creating a visually attractive website comes secondary to the function and efficacy of your website.
THE BEST WEBSITE DESIGN PUTS THE USER FIRST
What Purpose Does Your Website Serve?
The first principle of effective web design is designing with the user in mind. This means striving for a simple and intuitive design approach. Before you do anything, you need to establish your website’s purpose. This could be to:
• Sell your products
• Showcase your portfolio
• Promote your services
When a user visits your website, what are they there to do?
• Buy your products
• Hire or commission you
• Request a quote
Who Are You Designing Your Website For?
Understanding who your ideal customer is and how they'll use your website will help you to design a layout that serves them. Consider at least three different customer profiles that are likely to use your website. Be as specific as possible about them as individuals.
This means taking into consideration things like how they’ll use your website: are they on a desktop, a tablet, a phone? What about how tech savvy they are? Will you need to have clear points of navigation for those who are less frequent web-surfers (i.e. the senior discount crew).
These preliminary questions help you to design a roadmap for your users when designing a functional website layout.
WEBSITE DESIGN TIPS AND TRICKS
How you put the pieces together is important too. Here are some key principles of web design:
Put important content above the fold
This means, whatever you want your user to do they should be able to find it without even scrolling. This area should be home to your value proposition and a clear call-to-action. Your value proposition should be 2 to 3 sentences that convey both the emotional and functional benefits of your product or service and how it's different than the competition.
“Above the fold” refers to newspapers where the best headline was always on the top half of the front page. The same is true when designing your website. Keep the most important content above the fold or above the need to scroll. Very few users will even make their way to the content on the bottom third of a page.
Make your website easy to navigate
Whatever a user is on your website to do should be attainable within three clicks. This is the “three click rule”. Having a clear main navigation that is well thought out is key.
Put yourself in the shoes of your users — by being as specific about the different types of users your website will have, you're able to design a logical path or series of clicks to get from your home page to, say, where they can download a resource or find a specific product to purchase.
Keep the design simple
Simple websites are likely to have a higher conversion rate. The less you have to distract your user, the easier it is for them to find their way — hopefully to your shop, to that free downloadable content, or your contact page.
Give them enough information that they clearly know what it is you do and what action you want them to take. Don’t over-clutter with content that has no real function or value. Keep it simple!
Design for mobile users
More and more people are browsing online with their phone over their laptop. While you’re likely designing with a desktop-first approach, don’t underestimate how many users will encounter your website’s content on their phone first. Make sure your website is mobile friendly and responsive. You should be spending as much time perfecting your mobile layout as your desktop layout.
WHAT MAKES A GREAT WEBSITE LAYOUT
It’s easier than ever to find great website design inspiration or templates online. All you have to do is Google “Best Website Designs” and you can explore curated lists until the cows come home. (Do people still use that phrase?) Find a design that appeals to you but keep these facets in play:
Brand Consistency
When it comes to designing your website, ensure each page is cohesive from one to the next. For example, if your website has a horizontal navigation menu, have it on every single page. If a user ends up on a page that looks drastically different from the rest, they may get confused and think they were redirected.
The elements throughout your website should be consistent too. This means headers, buttons, pull quotes, whatever the case may be… they should all have the same design style on every page. This helps your website look cohesive but more importantly, it promotes good user experience.
Be Brand Forward
Having a brand identity or style guide will help ensure your fonts, website colours, and even types of imagery match your brand’s existing persona. This ensures consistency, not only throughout your website, but it will strengthen your brand across your social media accounts and any external marketing.
Typography
As a rule of thumb, the fonts you use online should be sans serif. When it comes to reading on screens, the eye prefers sans serif fonts. If you want to use a serif font, try to reserve it for your headers and subheads.
Visual Flow
Keep in mind how we read text: left to right. The “F Pattern” design takes into account the way you layout text and content on your website to follow the natural path in which we read. Prioritize important text on the top left of a web page as users will naturally start there when reading.
Designing an effective website takes a lot of deliberate care and consideration. Depending on the type of website you’re designing, you need to approach it in a way that is easy for your users to navigate and that can be used easily across all devices.
