Welcome to my humble abode. Here, I shall guide you to achieve your best in web design. To create a visually pleasing and accessible website, I will start by explaining some basics to start with and then branch out. I have put together some quick helpful tips and resources to help you in creating your best design. Without further ado, lets get started.
- Moodboard & Wireframes
Think of a Moodboard as a sketchbook, start adding your ideas, pictures, colors, fonts, whatever you want to set the mood your website gives and of course CONSISTENCY IS KEY! Doing this allows you to get a sense of what your goal is, what your colors will be, what fonts you want to use and so on. Move on to the wireframing process once this is complete.
Create a wireframe, setting up the skeleton of your website, decide where and how you want your headers, sections, and buttons to be while also thinking how your user will be directed. Spending some time thinking will save you valuable hours in your design process. A wireframe is a quick and effective way to detect issues early on in your design process, and remember its best to keep your layout simple.
- Your design
When you open Figma, inDesign, inVision, Xd, or whatever tool you'll use for designing, you want to start adding what you did in your wireframe. While slowly adding in your pictures, adding in your text and font styles you chose as well as applying the color scheme you chose, I am going to mention a few things to look out for during the process.
a. Set a color pallet, it helps keep you organized and not have shades lighter or darker. Check out this article for more information.
https://www.addthis.com/blog/2015/08/18/why-the-right-color-palette-matters-for-your-brand/#more-12006.
b. Pick 2-3 fonts, its best not to overload the page with different fonts because some catch the eye more than others and information gets lost. Here are two articles, 1 trending fonts:
https://www.addthis.com/blog/2015/02/23/top-trending-fonts-for-graphic-designers/#.X8AqxmhKgUG
and 2 why we keep the fonts number at a minimum:
https://uxplanet.org/10-tips-on-typography-in-web-design-13a378f4aa0d
c. Allow even spacing and don't be afraid of white space. Keeping hierarchy allows you to nicely section the website. Your navigation bar/menu must be simple and easy to navigate.
- Accessibility
Lastly, I wanted to set a separate section for this because you MUST remember to keep your design within accessibility guidelines. Font to small for elder folk to read, or certain colors like red that people with colorblindness cant see. Here is an article you can read more about regarding this topic:
https://www.w3.org/WAI/GL/WCAG20/
You should also put in the extra effort to make your site load quickly for those with slow internet connection to view it. And lastly, allowing your site to be viewable on mobile, tablets, and larger monitor screens.
Thanks! I hope this was quick and helpful for you all.
Top comments (2)
Thanks, it's really helpful
You're most welcome!