What makes a website beautiful? – Key Features and Resources
A friend of mine recently asked me this question and as a web designer myself I started talking about trends, colours, fonts, usability etc. But after this conversation I started thinking deeply about the beauty of a website.
Actually, I am not sure that beautiful is the right term or the word itself should combine a lot of meanings in terms of website design.
In my opinion, websites are beautiful when they do the job they are created for – which means that they should be consistent, fast, sending a clear message, pleasant for the eye and providing excellent user experience.
Defining beauty is subjective and depends on personal views, upbringing, environment, and many other factors. I did a little digging about what makes a website beautiful and tried to organize my findings in a list of features. Have a look below and if you have something to add, feel free to leave a comment.
I also collected a list of useful books and resources that will help you in creating beautiful websites.
Key Features of a beautiful website
If you want to create a good website, you should carefully consider the overall look of your website. You might be tempted to put a lot of content on you pages but it will be a mistake. Consider what is the message you want to send. Putting a lot of different content can perplex users and make them feel overwhelmed with the information.
If you are creating a product website, stick to the key benefits of the product. If it is a service you offer, show users how this service will work for them. Provide only relevant and clear information. Also, do not put all the important information on one place. You should think how to tell a story to the visitor and guide them to discover more about you product, company or a service. Lead them gently.
Visuals, multimedia and text
I have seen a lot of websites that have a cluttered home page. Videos, text content, images, icons etc. are fighting with each other for your attention which in most cases results in closing the website.
I choose to show you Canary website as an example of a website that is clean, simple and conveys a clear message. Canary is a wireless security system that is provided by a single device and the whole idea about this device is that you help you track your home with your smartphone.
Have a look at Canary website – canary.is
As you can see the visual and text information is clearly structured, there aren’t any elements that competing with each other. Key messages are hierarchically positioned so they are telling the story of the product and how useful it is.
There is a one CTA colour that shows the users they can receive some more information. Font sizes are carefully considered and organized to inform. Have you noticed the “Buy Button”? It is visible all the time without seeking attention but still handy enough so users can click when they are convinced that they need the product.
Consistency (colors and fonts)
If your website needs to show a colourful experience than you need to put a lot of thought into how to organize and combine the colours. Users may not know a lot of colour combinations but they surely will be put off if they are not carefully considered. Same is true with the fonts. Combining different types of fonts is not an easy task. If you have a prevailing strong font, you should consider combining it with a subtle one.
Take Joyride Taco House website for example of combining different fonts and strong colours. They are using a combination of three font choices to present their information. Two types of strong fonts for the titles and a subtle one for the content info. Also, they are using 4-5 strong flat colours for the different sections of the website and also for auxiliary contents such as icons and animations.
Have a look at Joyride Taco House – joyridetacohouse.com
Personally, I feel that the two display fonts for the titles are too much but in the example of Joyride Taco House everything works well. I love the colour combinations, the flat colours chosen are working together with each other and the contrast is working as well. Videos are in harmony with the colours and add the excitement factor in design.
Use the trends (but not all of them)
Use the trends and you won’t be wrong. This statement was said to me by a colleague of mine. I disagree strongly. Trends are great, but not all of them will work for you. Take parallax websites for example. When parallax became a huge trend everyone started using it, but there were some websites that used the effect to create highly cluttered pages. Although it is trendy, it does not mean it is useful and good.
The other example is when a designer/developer or a client chooses an infinite scroll and puts a footer. This is a textbook instance of things going wrong. How can you put a footer when you have an infinite scroll? Pay attention to the word “infinite” here.
All I am saying is that you should consider using the trends but also think if they will work for you. Create some mockups, do some research and then choose. Trends are not always the best thing.
Simple and useful navigation
One thing you cannot afford when doing a website is to neglect the navigation. Navigation is very important. Users should be able to get to the information they are curious about in no more than two or three clicks. Do not create a jungle of clicks or the users will feel overwhelmed and eventually close your website.
If you need to create a mega menu, make sure that the links are clearly labeled and put under the correct category. I know some designers and developers put submenu under submenu which I think is too much. There are better ways to organize content.
Readability, Functionality & Performance
Users are lazy nowadays, more than ever. In terms of perceiving online content, they are cruel. Users do not tolerate websites that are hardly to read – for instance, wrong color choices for important text or tight line height. Imagine a bright pink a text over a brown background – this is a retina attack. If you are having trouble with selecting colours, ask for help from your colleagues or friends. There are designers that are colour blind and have difficulties when they should choose a palette for a website. Just ask for help.
In terms of functionality, you might want to resist to the temptation of using too many widgets and jQuery gimmicks. Sometimes, it is great and useful to be creative in using them but there should be a limit.
Performance is very crucial. Users won’t forgive you if your website is not working properly and is slow. Optimize your website. Check for bugs. Test in all popular browsers and devices if you can afford it. There are some creative ways to check across various mobile devices. Have a look at the list of resources below.
Useful Web Design Resources
- Responsive Web design
- Implementing Responsive Design
- Responsive Web Design with Html5 and Css
- Mobile First
- Designing the Editorial Experience: A Primer for Print, Web, and Mobile
Web Design Inspiration & Trends:
Colours – Scheme Generators and Colour tools
Fonts & Web Font Combinators
Browser Compatibility and A/B testing
Website design is a difficult task and not everyone can do it right. Web designers are learning all the time, as trends, economy and technology affect and change the tendencies. But there are simple rules some of which are coming from the print design and applied to the web design that can help you create beautiful websites. Bear in mind the users. Users are the ones that define what is good and bad design. Even if you are a designer/developer, you are a user as well. Sometimes is good to be just a user and perceive things as such. It will help you immensely in your design job.
Featured image credit: Icon vector designed by Freepik