Design For Non-Designers

If you aren’t a designer, these tips might help you build a more satisfying web presence. This isn’t meant to trivialize the designer profession, rather to give a helpful perspective and self-critique to who is not trained as a designer. But don’t think every website builder is a trained graphic designer, quite the opposite! Another thing to consider is a designer might know everything about the latest trends in graphic design, but you’re the world’s leading expert about the topic your website will revolve around.

Follow an intent

The best way to create a fulfilling website is to think about what your intent is, and set up your project as a consequence. Sitely elements have many properties, each with defaults, their purpose is to get you running quickly, sometimes working as placeholders, but your goal should be to pick fonts, colors, images, shadows, border thickness or rounding based on your intent, not on the defaults. Have a plan and follow it.

Reduce clutter

Limiting clutter makes your content appear more professional. Clutter comes in many forms.

Limit your font selection to a couple families and a color selection to a couple base colors. You can still have other fonts and colors for select elements, but they should be used sparingly and tastefully, like a colored cushion on a neutral couch. Limiting the number of colors can feel constraining, but you can add variety by using different brightnesses of the base colors, which won’t add clutter.

Use gridlines and alignment guides to tidily align elements (except when you expressly choose not to!), and use spacing and distance between elements as a design feature that emphasizes content.

Making use of Sitely’s text styles, synchronized color wells and elements shown in multiple pages ensures the tidiness extends across the whole site.

Empathize with your visitors

What is your typical visitor looking for? What answers do they want? By carefully selecting what to say, and what not to say, you can better cater to your audience, and make the site more effective.

While it can be tempting to put all the material you have on the site, it’s also important to provide a well thought out, well organized and overall clear structure, this will be apparent in your site navigation and will make for a better experience.

Typically you will want to limit the amount of text that is required reading, rewrite your headlines until they’re clear and to the point, and avoid the use of stock photography intended as content (though it can work as a mood-setter).

Ensure crispness and readability

Always use images with sufficient resolution, even if your screen isn’t retina, your site visitors will likely have a high pixel density screen on their smartphone, and will otherwise see a low resolution image. Sitely’s resolution meter next to images helps with this.

On a related note, ensure the text color has enough contrast from the background. While there are official guidelines for accessibility that you might not be required to adhere to, you still want to ensure your site can be read.

Inspiration

We stand on the shoulders of giants, it is natural and healthy to be inspired by something you have seen on the web, to imitate the work of who you admire. However keep in mind that many of the websites you see around the web are severely constrained by the underlying tool or technology, you have much more freedom in Sitely so we’d like to encourage you to break conventions, avoid clichés and pour yourself in your design. It goes without saying that if you heavily base your design on a template you are only expressing half of yourself.

Dos and don’ts

• Don’t create “go to page top” element, people are familiar with scrolling, iOS even has a built-in shortcut for it (tap on clock at the top of the screen);
• don’t use Sitely’s multi-device feature by picking a device width based on your content, rather adapt your content to all the device layouts;
• don’t overly animate, users tend to ignore repeating animations; on the other hand animations can enhance revealing content (during initial page load or on scroll);
• don’t pre-cut images in image editors, Sitely always generates optimized images and having more available resolution gives you the flexibility to tweak a layout;
• use wireframe/placeholder mode to get a sense of the layout;
• use photography to enhance the content;
• don’t use generic imagery, pick the right metaphor or product photography.