You want to design a website and don't know where to start? No problem, with these 5 tips your website will become an eye-catcher and customer magnet!

First things first: your website is not about design, it's about content! The design helps the user to grasp, understand and react to the content of your website. Make it as easy as possible for them.

1. content first: Content must be ready first

The basic framework for your web design is the content. Create your texts according to the framework that results from your concept, your market analysis and the resulting information architecture.

Only when you have created all your content does it make sense to start with the actual design. Only then will you know which content elements you need on which page. Select content-relevant images and videos in advance and determine where "call-to-actions" (buttons with a call to action) will be placed.

Why you should first create the concept, then the content and finally the design

Those who create a website for the first time tend to look first and foremost for a suitable design. Don't make this mistake!

It is much easier - and more sensible - to create the design at the end. Then you already know which elements and functions you will need to best accommodate all your content on your website.

So be consistent.

  • Start with the concept.

    webdesign-tips_content-first_information-architecture-300x212

    The information architecture is the basis for all texts and defines the structure of your website.

  • You then carry out a market analysis including keyword research.
  • Based on the data obtained, you can now create the information architecture.
  • Write all the texts. For every single page that results from your information architecture.
  • Search out all other content elements such as images, videos and audio files.
  • Mark all the places in the text where buttons are to be placed.
  • Also mark text passages where you will place links within your website.

Then, finally, the right time has come. Now is the time to devote oneself to the visual appearance - i.e. the web design.

This is the only way you can harmonise content and design.

It is logical that, for example, a playful design with bright colours and a "squiggly font" is completely inappropriate for a funeral home. Likewise, a dark design with golden buttons and greyscale images is not suitable for the website of a children's playgroup.

But the perfect match of content and design goes much further:

For example, buttons have to be perfectly arranged. The question arises: when is an image better for conveying the message, when is a text or a video? How are the content types perfectly arranged in the web design so that the information is best understood?

You can only clarify questions like these and more if you follow the "content first" rule.

2. find your colour world

What do you need colours for?

Even before the first word is read, the chosen colour scheme conveys the first impression of your website. Again, it serves to reflect the content.

Perhaps there is already a colour in your company that dominates? Often this is the logo colour.

For a website, it is advantageous to define two to three main colours. In addition, there are one to three additional colours.

The main colours are bold and serve to highlight important content elements. Primarily these are:

  • Buttons
  • Menu items
  • Icons
  • Links in the text

The additional colours are rather muted colours which are used as background colours. They facilitate the visual separation of the individual content elements on your website.

Text colour

Additionally, use black and white for your texts. In general, the higher the contrast, the higher the readability. Alternatively, you can use a very light/very dark shade of grey. This makes the continuous text look a little "friendlier" to the eye and less harsh. Avoid using coloured body text. This confuses the reader and takes away from the actual important elements on your website.

Making the right colour choice

But how do you get your colours now? I could now go on and write about how colours work, which cultural backgrounds you should pay attention to on international websites and so on. But Andreas Hecht has already done that for me. In his blog post, published on 20 February 2015 on drweb.de, you will find the most important info on the topic of colour psychology and colour theory. With the tools presented for creating colour schemes and the numerous examples of colourful websites, choosing your website colours will certainly be easy for you.

Attention: Consider limitations due to colour blindness

The most common form of so-called colour blindness is red-green deficiency. While it affects not even one in a hundred women, 8-9 % of men are affected (to the article https://www.dasgehirn.info/wahrnehmen/sehen/ich-sehe-was-was-du-nicht-siehst).

You cannot, of course, take all forms of colour vision into account when choosing your website colours. However, you can make it easier for affected people to use your website by following a few simple rules.

Especially with diagrams and adjacent colour areas, make sure that they also have a light-dark contrast or pattern or are separated by a line.

Read more about this in the blog article "Web design: How your website is optimally adjusted for colour blindness".

webdesign-tips_ishara-colour-test

Ishihara colour charts are used to identify different forms of colour blindness. Screenshots: www.sehtestbilder.de, 29.8.2017

3. text formatting to match the web design

Readability first

Make sure it is easy to read. What good is the perfect text if no one can read it? Therefore, use fonts that are difficult to read (e.g. script fonts) only very sparingly. For continuous text, use easily readable (sans serif) fonts such as Open Sans.

More and more often, serif fonts are also used for bulk text, but this requires a high-resolution monitor on the visitor's part. So use serif fonts with caution. As a general rule, the smaller the text, the clearer and more straightforward the font must be.

It is also important to ensure that the font size is easy to read. Keep your target group in mind. If you want to appeal to senior citizens, you should choose a slightly larger body text as standard.

Where do I get fonts?

webdesign-tips_fonts_example2-236x300

Screenshot: fonts.google.com, 29.8.2017

It is tempting to use one of the many free fonts from the web on the website. Resist! The reason: you don't know exactly where a font comes from.

It is better to use Google Fonts. The advantage of Google Fonts: You may embed the fonts on your website and are guaranteed to have no licensing problems. They are also displayed error-free on every browser. And: the fonts are of high quality including ligatures (fused letters), umlauts and special characters.

We don't want to advertise Google here, but using Google Fonts makes a lot of things easier when designing your website. For example, font pairing.

A small detail with a big effect: the right combination of fonts

The selection of a font combination is called font pairing. Classically, it consists of a font used for headlines and a font for body text. The most important thing about font pairing: the fonts must harmonise. The easiest way to do this is with two fonts from the same family. However, different fonts can also be combined.

Google Fonts always suggests several possible combinations when selecting a font. Read more about font selection and font pairing in the article "7 methods to find suitable fonts and 21 classic Google Web Fonts combinations" by Martin Hahn.

4. the magic formula behind successful websites: The eye-catching call to action

How do you get the visitor to your website to do what you want? It's simple: tell him what you want him to do. I know that sounds hard. But this method has proven itself.

Include clearly visible buttons that say Buy Now, Make an Appointment or Send Inquiry.

The main thing is good visibility

Yes, subtle colours and a minimalist design are absolutely trendy. But: You want your product or service to be bought! So buttons are allowed to stand out, they have to "pop".

The more eye-catching, the better. And don't be too sparing with it either. Wherever something is to be bought, there must also be an eye-catching button. The rule of thumb is: 1x per standard computer screen. This way, the visitor has the opportunity to click directly on the button at any time while scrolling. Purely informative buttons - for example, links to another sub-page - are better designed discreetly.

The three CTA types

To make sure you pick up everyone, you should therefore take the following into account:

Buttons: As already described above, buttons with a clear call to action must stand out strongly in colour from the rest of the content. This is especially true for buttons that lead to your main goal (sale, contact request, etc.). You can link to purely informative sub-pages with more discreetly designed buttons.

Text links: Within your page, always link at least your main target (e.g. contact request) in the text as well. Use a colour for highlighting. If this is not conspicuous enough, underline the link additionally. Underlining has established itself worldwide as a link signal.

Linked images: Many people prefer to click on images rather than text. Especially images that belong to calls to action should therefore also be destination links.

5. user-friendliness: the reason why people will love your website

User-friendliness is the be-all and end-all of any website. The most beautiful website with the most successful texts is of no use to you if the visitor cannot find his way around. So all the effort was in vain.

Trust in the tried and tested

Over the years we have learned that the menu bar is centred at the top of the page. In it - usually on the left - is also the company logo. Don't try to be too creative in the placement of the navigation bar. Visitors will thank you if they can easily find their way around the website without having to search for long.

Text links are classically blue and underlined. If you change the colour, keep the underlining. This makes it easier for the visitor to recognise a link.

Responsive design: Fit for mobile phone, tablet and PC

More people now surf on mobile devices than on traditional computers. Accordingly, the design of your website must also function perfectly on iPad, iPhone and the like. Responsive web design is the magic word and describes precisely this adaptation of the website to different monitor widths.

More scrolling, less clicking

The trend towards "longer" websites is also due to the increased use of mobile devices. We are used to scrolling and swiping a lot on our smartphones. This is also where this development in web design comes from. We have learned to scroll for a long time and this is now also a habit on desktop devices. Use this knowledge to your advantage: pack related information on one page and do not force the user to click unnecessarily. Clicking has many disadvantages in terms of usability: Loading times increase because a new page has to be loaded each time. Navigation becomes more cumbersome, as the link to the previous page has to be found each time, etc.

Speed - he who brakes loses

There are countless effects in web design. But remember: every effect slows down your website! And in 2021, short loading times are more important than ever. Images on full screen width are nice to look at, but they have to be as small as possible. With the Photoshop plugin tiny-png, which can also be used via the website https://tinypng.com, you can compress images by up to 70%. The popular Parallax effect also eats up loading time. So use effects with caution and rather do without one or the other in favour of the loading time.

Manuel core web-vitals explain

Slider - loooong boring

Be honest: When was the last time you consciously clicked through a slider further than the third image? You don't remember? You see, neither do I. And neither does Google. For this reason, you should avoid sliders. Or at least don't insert more than three images.

Traceability

The use of fonts, font sizes, colours, icons, images etc. must be comprehensible to the visitor of your website. They are there to help him understand the content. Therefore: do not confuse the user with too many different font sizes, colours and other design elements. Less is often more!

Therefore: Choose a design, a style and stick to it!

King tip: Test, test, test!

Test! Ask people who give you honest feedback to take a look at your website in advance. But don't ask: What do you think of my website? Rather set them tasks (buy a product, request info material, etc.). Ask them to look around. Did they understand the message immediately? Does the design and overall effect convey a professional impression?

Don't be afraid of feedback! You can only benefit from it.

For more usability optimisation tips from Online Marketing Courses founder Manuel Diwosch, visit https://www.drweb.de/magazin/usability-tests-selber-durchfuhren/

Conclusion

You don't have to be a web designer to create a successful website. Take our 5 design tips to heart and your customers will love your site.

Did you like this article or was there something missing? Do you have any criticism, suggestions or wishes on online marketing topics? Then simply leave us a comment or send us an email to [email protected].

Written by Ines Kuscher

Photo: Mockup by ©Genetic96 - graphicriver.net

klickbeben editorial profile

The klickbeben editorial team consists of experts in the field of online marketing. Our goal: We want to give you insight as well as tips on topics such as email marketing, marketing theory, SEO, social media marketing, search engine advertising and much more. In addition, we would like to offer you small insights into our exciting everyday agency life and thus a glimpse behind the scenes.

online-marketing-manager-clickbeben

Want a "horny job?"

We have three of them! Click through and apply.

To the jobs

You have Successfully Subscribed!