Web Design

Web Design Basics For Non-Designers

gray Apple wireless keyboard beside black tablet computer and stylus pen

For those of you who aren’t designers, creating a website is an enormous undertaking, one that can often leave you feeling lost before you’ve even begun.

I know this because I’ve been where you are right now, so trust me, I get it.

You might be designing it yourself because you can’t afford a professional developer, or perhaps you just like a challenge.

Whatever your reason, if you don’t know where to start or which design elements you require for creating a modern website, chances are you’ll never finish!

It’s for this reason I’ve written this post; I want to help you navigate the course and get you to where you want to go.

You’ll find the tips needed for creating a modern and user-friendly website.

Begin by keeping it simple

Your primary focus throughout the design process is to reduce visual clutter.

It’s what designers call “White Space.” It’s a powerful tactic for creating a beautifully balanced website that flows and performs.

So, what is it?

It’s the intentional use of the negative space between your content, the bits you aren’t using, and it gives your site room to breathe when used correctly.

But it not only aesthetically pleasing; there are tangible qualities too:

White space creates tension around your content, a visual frame, so they resonate at a higher level of legibility and comprehension; this grabs the viewer’s attention and makes your intended message stand out and get noticed.

But that’s not all!

The design trends for 2020 are all about simplicity, so by using the white space, you’re not only creating a clean functioning website that connects with your audience but one that’s as up to date as a Space X rocket.

Start with a sketch

This tip is crucial for your website’s design as it provides you with a blueprint of your intended layout, one that you can then rely on when choosing your template.

You can use a whiteboard, a sketch pad, or a napkin; your goal is to get your creative juices flowing and put down on paper what’s already in your head, IE, your vision.

Start with what’s known as a “wireframe” it’s a layout of your site that highlights the elements you’ll use on each page.

Simplicity’s once again the key to your success:

  • Use squares for images
  • Circles for logos and icons
  • Lines for written text

A useful tool for discovering design options and taking your sketch to the next level is Adobe Illustrator. It’s a design app that enables you to capture your vision using typography, shapes, and colors.

Whether you keep it on the paper or move to the screen, your goal is to create a visual outline of your content, so you already know what you need before you begin.

Create a usable brand style guide

Big or small, your website’s size doesn’t matter; once you go online, you’re a brand, which means you can compete with your niches brand leaders.

But only if you follow some golden rules of brand design!

  • Personality – Your business has one, and for customers to connect with your brand, you have to show it. It’s the reason you started your business, the problem your product or service is trying to solve, your goal, your vision.
  • Voice – This is everything you use to promote your company online, images, video, content, and which platforms you do it on. It’s how the world will hear and see you.
  • Consistency – Most notably, everything you do has to be consistent with your personality and voice; this creates brand recognition, which you’ll need to succeed.

It’s now that you can start looking for color templates and fonts that suit your brand’s personality, and icons or logos that can adorn your website’s header. You can use a logo creator to help you find designs related to your niche and market places. Once you have your logo in place, you can expand your brand across all your marketing platforms.

High-quality images

2020 is the year of simplicity, but it’s also the year to use high-quality images to promote your content and products.

Images, infographics, icons, logos, and social media avatars are all ways of using simplicity to promote your website’s content with striking results.

A high-quality image shows that you’re a modern brand, and if you get them right, your audience will like and share them throughout social media, and that’s free advertising! What’s more, you don’t need a camera to create them; use an image provider like Unsplash. They offer both a free and professional version and the free ones more than adequate for getting your website started.

Say it with the right fonts

You can continue the simplicity theme by reducing the number of fonts you use, but whichever ones you choose, ensure they’re eligible at all scales.

And here’s why:

Your audience will be looking at your website on numerous sized screens, and if they can’t read your content, they won’t like or share it; even worse, they’ll bounce from your website.

There’s a vast range of fonts available and an equal number of guidelines for choosing them. But for now, just follow the following tips:

  • Use no more than two fonts per design.
  • And avoid display fonts to ensure legibility.

You can find the fonts you need for free on Google Fonts; these guidelines will help you:

  • Select fonts that suit your market.
  • To create visual interest, use contrasting fonts.
  • Serif works well for headings.
  • Helvetica for body text.

Convey your message with colors

Colors and the psychology that accompanies them require your attention, and I advise you read a post that’s dedicated solely to explaining them so you grasp a real understanding. However, let’s break it down to what you need for your website to function.

You can save yourself a lot of time using a shortcut when choosing colors, one being websites that provide pre-designed color palettes from one bass color.

All you do to start is find the color that suits your market place (look at your competitors), and the website provides you with a matching color palette.

You can continue reducing clutter by using no more than two colors and make your website pop by choosing contrasting ones. Remember, every color has a meaning, and for yours to work in every setting, you need to do your research.

Most of all, be mobile friendly

While simplicity is the first step for creating a site, adaptivity is possibly the most important one.

An adaptive website design (AWD) creates multiple versions of each page on your site to fit the user’s device, and today that means mobiles. If you don’t choose an adaptive website template, your pages won’t conform to the screen size, meaning content will be lost, or incorrectly displayed.

It’s crucially important that you use an (AWD) as 76% of smartphone owners use their device to research and purchase products, and that trend is only going to rise in the coming years.

The last word

Now you have a starting point and steps that all website designers take when creating a website.

Start by drawing up your wireframe, keep the elements to a minimum, and then choose a template that suits your design.

By keeping things simple, you’ll get to where you need to go.

Our Score

Leave a Comment