7 Design Tips For Building Better Websites From A Duda Designer

By Chen Ben Ami

image7Whether you’re building your first site or your 101st site, it never hurts to have a handy reminder of how to make it amazing. So here are 7 things to consider when you build your next website.

1. Know Your Main Purpose & Audience

Main purpose

Before you start, take a moment to think about the purpose of the site. This simple factor will help you make important decisions like what images you should use, which font sizes are best, what colors are most appropriate, and more.

Consider what your customer wants to achieve with the website. For example:

  • Is it a restaurant website that should make it easy to reserve a table?
  • Is it a medical website meant to encourage visitors to make appointments?
  • Is it a photographer’s website that aims to be a portfolio of great images?

blog_image_3
Know your audience

Once you’ve figured out the purpose of the website you’re building, it shouldn’t be too hard to determine its intended audience.

For example, if your website’s target audience is relatively old, you’ll want to use a large font size that is easy to read. If your target audience is young and hip (for example, surfers and skateboarders), you’ll want to use images of young people having fun. If you’re betting on an international audience (for example, if you have a B&B geared for overseas travelers), you’ll want to keep the text relatively short, so that there is enough room in the layout for translations that may be longer than the original text. You’ll also want to use Calls-to-Action (CTAs) that are unambiguous and easily translatable.

Calls-to-Action (CTAs)

Speaking of CTAs, make sure that these are easy to find and directly related to your website’s main purpose. For example, if you’re working on a restaurant website, make sure the Reserve a Table button is prominent, especially on the mobile version of the site. If your website is promoting a chain of ice cream parlors, the CTA may be broader (for example, Find the Parlor Nearest You). In this case, this message may be located on the Contact Us page.

Doodling often works for me

This isn’t a must-have, but I find that doodling often helps me get started with a website. I just get a paper and pencil and create a simple outline of what I want in the website. After I have a basic idea of what pages I want, and what kind of images I want on each page, it is easier to move to the next step – finding the right template.

2. Choose the Right Template

Now that you’ve done some critical thinking about the purpose of the website, you’re ready to choose the template. With so many styles and varieties, choosing a template can be more challenging than finding the right pair of running shoes!

Two different approaches come into play when choosing a template: by subject or by style.

By subject

If you go with this approach, you’ll choose a template according to your customer’s industry. So, if you’re building a website for an electrician, you might start with the Locksmith template. If you’re building a website for a driving instructor, you might start with the Academic Tutor template.

By style

You can also start with a template simply because you like the way it looks. If you like the structure or style, the navigation design or layout of the images, you can start with a template from an unrelated field and simply change the images so that it fits your customer’s business area.

3. Decide On a Color Pallete

When it comes to designing websites, you’ll want to choose colors that convey a certain message and work well together. Even if you’ve chosen color schemes for weddings, living rooms or your own closet, that doesn’t mean you know how to choose the best color palette for your websites.

The color palette you choose contributes to the readability, cohesiveness, and beauty of your websites. One good way of deciding what color palette to follow is by looking at other websites that you feel work well and paying special attention to their combination of colors.

Good site references are awwwards, land-book, Pinterest, dribbble and Behance. Another good resource is Stylify Me, a tool that detects the colors and fonts of websites. Just enter the URL of a site you like, and it will show you the site’s background colors, text colors, and fonts. To explore website color combinations, try Canva.

blog_image_4

4. Way of Building in Sections

Dark-light-dark-light

If you browse through Duda’s templates, you may notice that the colors in most of them alternate between light and dark. Every Duda website – and most new websites in general – are built in sections. If one section has a picture, the next section is usually white or uniform in color; if one section has a gray background, the next section usually has a white background. For example, see the Tour Guide or National Park templates. You’ll notice that in both of them, sections that are mostly light are followed by sections that are mostly dark.

Full light / full dark

Another method is to create sections that are predominantly dark (or predominantly light). This method may be more suitable for landing pages with a single flow or feeling.

5. Not All Fonts Are Created Equal

There are thousands of different fonts in use today, and though it may be fun to scroll through them, not all of them are suitable for websites. Some fonts are better for some purposes; other fonts are better for others. The trick is knowing what font you should use to achieve the right mood for your website.

Traditionally, fonts have been divided into two styles: serif and sans serif. A serif font is one in which the letters have a small line, known as a serif, attached to their ends. A sans serif font is one in which the characters do not have this small tail. (The word “sans,” by the way, comes from the French, and means ‘without’.)

blog_image_2
As for whether you should use serif or sans serif fonts in various places on your website – that’s really up to you. In the past, when things were primarily printed, sans serif fonts were used for titles, while serif fonts were used for texts. In today’s websites, anything goes. Just remember that your choice of fonts has an impact on how users perceive your site.

6. Choosing Images — Dos & Don’t’s

Choosing images for your website can be one of the most enjoyable (and frustrating!) parts of building a website. Sometimes, good images are plentiful; other times they are hard to come by. Sometimes, you’ll have a great image that’s of poor quality. Also, your clients may provide you with images that they think are great, but are under par when it comes to their website.

Here are some tips for how you should (and shouldn’t) choose and use website images:

blog_images_9

  • Do use positive images. If you are building a website for a cleaning company, use images of clean spaces.
  • Don’t use negative images. For that same cleaning website, don’t use images of dirty spaces. No one wants to see other people’s messes online.

blog_image_6

  • Don’t put text on people faces. Put it above, below, to the left or to the right of their faces.

    blog_image_5
  • Do use images of people that website visitors will be able to identify with. Think diversity. Think inclusiveness. Think that you want any website visitor that reaches your customer’s website to feel that the website is speaking to them.  
  • Do use smiling faces. It’s not required, but if a smile is appropriate, by all means, use it. Some people like to use images with faces looking directly at the camera. I’m not always in favor of this, but if it works for your website, go for it.

blog_image_7

  • Don’t use images that are too small. If you have an image that’s 500px, don’t use it on full bleed (1920px) because it will come out looking pixelated. If these are the only images your customer provided you with, don’t use them in high resolution, because they won’t look good. (If the reverse is true, by the way, you have nothing to worry about because Duda automatically makes big images smaller (it’s one of the steps we take to improve page speed).
  • Do use high-quality stock images and videos. A good stock image is better than a bad original image. 
  • Do use the image editor tools that are built into the Duda editor. For example, if your client gives you an image that is too dark, use the image editor to make it lighter. If you have an image that has too much background noise, crop it out. The Duda image editor has several functions. You can read more about them here.

7. Websites Are Not Static Objects…Remember to Keep Them Alive!

Website are not static objects. They need to grow and develop. They need to change as needs change, with new images, updated blogs, refreshed fonts and more. Updating your websites on a regular basis is good for SEO, good for your customers, and good for you.
There are lots of ways to update your websites. You can use Website Personalizations that show special messages on holidays and special events. You can integrate a blog and set a blog schedule so there is new, timely content on a regular basis. You can also add images that your customers provide of new products, positive reviews and company events. These are the little things that keep the websites you build fresh, relevant, and high-converting in the long run.

, , ,

About Chen Ben Ami

Chen is a UX/UI designer at Duda who has experience in many design areas. Chen has studied and worked in the field of industrial design, designing furniture, baby toys & even cars. You can still found products she has designed selling all over the world! Chen went from designing in 3D to 2D, and loves it! As a Gemini, Chen is interested in many fields, including sport and dancing.
Blog Comment Policy