Monday, February 23, 2015

4 Tips on How to Build Simple & Stunning Websites

You might wonder if that’s really possible. A website that’s simple AND stunning at the same time?


The answer is yes, if you use the right tools and methods. After all, the minimalist trend in web design has been steadily rising over the last few years, culminating in flat design and Google’s Material Design. Creators have finally abandoned horror vacui and embraced whitespace, which resulted in clean, simple, uncluttered websites that rely on strong typography, alignment and contrast to achieve stunning visual effects. The results have been largely positive – readers love readable websites with intuitive navigation, and if your audience can easily find their way around your website, conversions are much more likely to happen.


Focusing on another sense of the word “simple”, we can think about the production process itself, and look for ways to make web design and development easier and more accessible to people who don’t necessarily have advanced coding skills or creative talents. Again, thanks to great tools that are now available, it’s possible to quickly build a website without prior HTML & CSS knowledge, and still have the final product look as good as – or maybe even better – than other websites built “from scratch”. Here are four tips on how to achieve that.


1. Find free, high-quality stock resources


1-stock

There is no shortage of free stock photo websites, repositories and collections you can turn to in your search for that perfect hero image. High-quality photography has become the standard even in the royalty-free category, and most websites tag or group their photos to make searching easier. A good, high-resolution photo can carry the entire website and leave an impression strong enough that you don’t need any other visuals, which means you can keep your website simple.


Other free design resources are also available – whether you need icons, fonts or icon fonts, you can find them all. If your color wheel knowledge is a bit rusty, there are also tools to help you combine colors and generate color schemes. This saves time and money because you don’t have to outsource creative work, and it simplifies the design workflow.


2. Optimize typography


2-optimize-type

Readability is an absolute must in responsive web design. The text on your website needs to scale properly across different devices. Fonts you use – and their sizes – should have meaningful roles and give context to your content. These fonts shouldn’t clash too much; it’s best if they complement each other. You need to pay attention to the vertical rhythm, line heights and CPL (characters per line) count.


Do all these commandments of typography give you a headache? If you had to go through your website code and manually adjust every little bit of CSS, they probably would. However, we’re keeping this simple, which means you can rely on free online tools to help you determine the “golden ratio” for your content, compare web-safe fonts and set up baseline grids.


Many “simple but stunning” websites rely solely on typography to dazzle the audience. Once you’ve set up the basics and ensured a balanced look, you can experiment with adding decorative fonts for titles to simulate the hand lettering effect.


3. Automate code with CSS frameworks & generators


3-automate

The next step in simplifying the development process is to avoid writing repetitive code and use grid tools and front-end frameworks instead. The output produced by those tools is performance-optimized and usually minified to work fast on mobile devices. While it does automate the coding aspect of your work, it doesn’t take away your control over the website. Depending on the framework you select, you can use only a few modules and leave out those that don’t support your idea of a simple website.


4. Use website building tools


4-use-website

In certain scenarios you might wish or need to quickly build a website without too much hassle, yet have it look beautiful and professional. It’s good to know that in those cases you can rely on website building tools where you can add elements by drag-and-drop and modify them through user-friendly dialogs. Tools like IM Creator let you embed different kinds of media via easily configurable widgets and publish the website for free with just a few clicks. This is as simple as it gets, since this kind of tool relies on the WYSIWYG principle. If you’re afraid that your custom design might not look attractive, there are free templates for every type of website.


Conclusion


The “less is more” philosophy doesn’t mean that a website has to be “boring” or sport a conventional layout. You can achieve elegant simplicity by carefully choosing elements for your website and deciding to assign prominence to those that produce the strongest visual impact. By using tools and applying tips that make the creation process simpler, you’ll have more time and energy for making these important web design decisions.



4 Tips on How to Build Simple & Stunning Websites

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.