Beautiful Websites?

What factors determine the beauty of a website? How can we achieve an attractive, innovative, and functional site without going crazy with programming?

First of all, let’s study the competitors’ work to soak up ideas and good practices: We have gathered some of the best commercial websites in the world to show you how, in an environment oversaturated with information and competition, it is still possible to do things differently to surprise and captivate the user… Ready?

 

Marabelia | Creative Agency in Valencia: Marabelia. Web Design

We want you to see our own website because our creative agency is a leader in creative web design in the Valencian Community. Also, our web design rates are affordable for all budgets.

__

Chaptr | Creative Agency: https://chaptr.studio/

Black and white minimalism, with large blocks and asymmetry in an interactive and surprising proposal.

__

Basic Agency: https://basicagency.com/

In the same line as the previous proposal but betting on symmetry in the structure.

__

Pollen London: http://pollenlondon.com/

Video, movement, and asymmetry again.

__

Drop Tokyo: http://droptokyo.com/

Color block and interference on a no-scroll page based on images and multiple grids.

__

IFly50: https://www.ifly50.com/es_es/50

Impeccable double exposure. Visually striking.

__

Aquest: https://www.aquest.it/en

The large asymmetric image blocks in a grid work well and this is another great example. Pay attention to the team page: https://www.aquest.it/en/about

__

Size agency: http://www.size.agency/

Another example of minimalism and color block.

__

Octavo Design:https://www.8vodesigns.com/

A good image says more than a thousand words. Simple and effective.

__

Kasra design: https://www.kasradesign.com/

Retrofuturism is avant-garde. Here is an example of it.

__

Waaark: https://waaark.com/

If you add original interactivity to excellent infographics, this is the result.

__

Deux huit: https://deuxhuithuit.com/en/

Pastel backgrounds in transition, large blocks, and fantastic transitions.

__

Brian Hoff Design:http://brianhoffdesign.com/#/work

__

Born Group: https://www.borngroup.com/

We love this website. Conceptually very Marabelia.

__

Siyelo: http://www.siyelo.com/

Clear as water. All the info on the homepage.

__

Isadora Digital Agency: http://wakeup.isadoradigitalagency.com/

Speechless. An original and transgressive proposal. If after a couple of minutes you’re still trying to wake this website up, they have succeeded in capturing your interest.

__

Have a nice Day: http://www.haveanicedayonline.nl/

These web designers/programmers leave no one indifferent and are a guarantee of excellence for their clients.

__

Just Bespoke: http://www.just-bespoke.com/

Amazing parallax homepage with slider effect, full of details that make the difference: such as zig-zag block separators and the diamond as the iconic element par excellence of the website.

__

Root Studio: http://www.rootstudio.co.uk/

Because after seeing this very simple website, we’re left with a silly smile on our face… Don’t miss the illustrator figure; sometimes, the magic of a website lies in beautiful illustrations with a bit of programming.

__

 

Once we’ve seen these inspiring examples, let’s list some of the factors to consider when creating a web project and how they determine the final harmony of the site.

If after reading the article you have any contributions we might have missed, don’t hesitate to leave us your comment.

[ … ]

 

1. Raw Material

The textual and graphic (and/or audiovisual) material we have is the starting point of a web project. The higher the quality of the graphic and textual material provided by the client, the easier it is to structure and program a website with harmony and style.

Obviously, designing a website for a fashion photographer is not the same as for a tire seller. While the former will deliver us a large portfolio with high-quality graphic material from which we can choose, the latter will probably have only a couple of brochures from their suppliers. Therefore, the first task for the web designer is to analyze the raw material available and provide feedback to the client with the following questions:

– Do we have enough textual information to cover the basic areas of the website (Information for pages: Home – About Us – Products/Services – News – Contact)?

– Do we have enough graphic material to cover the basic areas of the website (Slider, homepage highlights, pages, blog)?

If the answer to both questions is yes, there will be no problem, and we can jump directly to point 2. But if the material provided by the client is scarce or of low quality, we must report this issue and propose one or more of the following solutions to the client:

a) Hire a professional photography or illustration service to provide quality raw material that represents their company and products.

b) Purchase stock photos and/or graphics from an image bank. Inform them of the cost of this service or, alternatively, tell them they can do this themselves.

c) Illustrate the website with free photos and vectors (Freepik, Pixabay…) (Only recommended for service-based companies that can be conceptualized, for example: consultancies, legal offices…) and inform the client about the additional cost for the image and/or vector search service.

d) Ask the client to make an extra effort to obtain more graphic and textual material from their suppliers to cover the poor areas of the website and offer them web writing and redesign services (if they provide a supplier’s dossier or a link to another website, we will have to extract the photos, catalog them, and structure all that information).

e) Request the client to do the photographing and/or writing themselves to cover the poor areas of the website.

Or, if the client is unwilling to make this extra effort or pay more, inform them that the final result of their website will not meet the web designer/developer’s expectations and that any future website improvements will be charged separately once the work is finished.

This is an important part that web designers often forget: educating the client not to become a toxic client: a client who overwhelms and changes their mind daily, an irrationally demanding client, or a “neglectful” client who does not provide material and keeps us tied up with a website for months.

Websites are not created by divine inspiration of the web designer/developer. Structured information is needed, good quality graphic material is needed, and the collaboration and involvement of the client are essential.

 

2. Structure and Content

“Less is more” is a motto that any self-respecting designer should adopt. Overloading the website with graphic and/or textual information and filling it with various elements and colors everywhere is not synonymous with a complete website… it’s rather synonymous with clutter and chaos.

When an internet user searches for “something,” they expect to find direct, clear, and concise information, which in web language means: logical structure, well-defined information and, generally, a harmonious and clear website (without loudness, coherent, no strange fonts, no information clumping…).

Therefore, review the website content and remove repetitive images and texts. Keep the essentials and emphasize the fundamental parts in H1 and H2 paragraphs. Remember that for perfect harmony, the graphic part compared to the textual should be about 50%-50%.

 

3. Innovation and Originality

Once the basic structure is planned, the best part comes: giving innovation and originality to our website.

Achieving the surprise effect in an environment with millions of competitors is not an easy task and will depend on the creativity, skill, and experience of the web developer.

Whether we build the web environment from scratch or use templates, we must adapt the website to the client, looking for a good combination of colors within the corporate palette and working ad hoc on the website’s CSS.

Remember that small style details make the difference and a good idea is better than a hundred mediocre ideas:

• Let’s create an attractive homepage with an innovative touch:

Depending on the raw material we start with, we can choose to decorate our website with a nice slider showing a selection of the best photos and slogans and give it transitions with different movements, or a simple effective parallax with an attractive and representative image, or a video on the homepage, or a featured gallery with a surprising mouse-over effect… Everything is valid, but let’s not mix everything!… Let’s try to define what can represent us best, what can be more harmonious, and integrate it without causing excessive loading time for our homepage.

• Let’s look for the most suitable typography, the most appropriate color combination (without overdoing it: better use two or three colors to define the website style, no more) and the most eye-catching effects for the mouse-over of our links and images (we must always indicate to the user where a link is… and what better than a mouse-over effect!)

• Graphic icons, embedded elements (videos, maps…), template shortcodes, and plugins.

If we know how to play well with these four elements, we can make really beautiful things without complicating our lives too much.

Study the template shortcodes well and if none perform the required function, try to find a plugin (free from the WordPress repository or paid like those on Codecanyon) that does the job. Although sometimes finding a good plugin can be a real headache, once found it will be our best ally. When you have it, put some effort into it and modify its CSS so it is coherent with the website.

Integrate graphic elements (icons, little drawings, charts, etc.) logically and harmoniously to provide intuitive information. They always look elegant and give a special touch to the website.

Play with titles (H1, H2, H3) and separators (lines, areas of different colors) coherently, without overdoing it, applying the same criteria on all pages.

Embed elements whenever necessary, as they don’t weigh much, are interactive, and are usually liked by users.

4. Research and Upgrading

The fact that you have made it this far is irrefutable proof of your research and upgrading ability. Just one piece of advice that we should always keep in mind: renewing yourself is the only way for constant learning. If you stop researching, you will stop innovating and won’t be able to do anything new. Every time you finish a web project, make sure you have innovated and learned during the process… Your next project will be better and so on…

That said, thanks for getting this far.

If you liked it, tell us, share, and take a look at our web design section!! 😉