Is it just me, or does the concept of learning how to design a website sound scary?
Web design is such a huge concept that involves all kinds of things, from visuals, to specific elements, and much, much more. To a beginner, all of this can seem overwhelming.
Take a deep breath, I’m here to help.
I’m going to show you how to design a website that puts all of these confusing concepts like visuals, functionality, and layout into one easy to digest post that explains not only the “how’s”, but also the “why’s” behind web design.
- The Main Goal of Web Design: User Experience
- 5 Major Principles of Website Design
- How Your Web Design Affects Your Blog’s Success
- Finding the Perfect WordPress Theme
- A List of Resources and Helpful Blogs to Visit
The User Experience
Designing your website is about more than just an appealing layout and visual look. Ultimately, the goal of your web design to provide an unbeatable user experience.
Everything you do is for the people who visit the site. Each decision you make is with the user in mind. Knowing that, let’s take a look at an approach known as anticipatory design. This will help us set the tone for the rest of the article.
Aaron Shapiro from Huge provided a great definition for anticipatory design:
A method of simplifying processes by responding to needs one step ahead of the user’s decisions.
In other words, you should be a mind reader. Since most of us aren’t psychic, there have been plenty of design elements over the years that are used to do this. Any of these sound familiar?
Anticipatory Design Elements
- Pop-up Boxes
- In-app Notifications
- Geographic Location
This type of design is meant to eliminate the effort the user needs to produce to take action based on the information they’re given. If you tell them to do something, they should be able to do it as effortlessly as possible.
It’s about valuing your user’s time. This ties directly into the overall user experience. By anticipating their needs and fulfilling them quickly and efficiently, you’re giving them a positive experience.
Ask yourself four questions when you approach web design. These questions will help you understand how you can create that all-important experience:
- Can I make suggestions to users based on previous choices?
- How can I add value to their experience (recommendations, promotions, etc.)
- Can I cut down on the information they need to provide? (lowering the number of clicks before completion)
- How can I tweak my content to speak more directly to my audience?
Keep these things in mind when choosing the elements of your user experience.
User Experience is the end goal of web design.
5 Major Principles of Web Design
Web Design is best viewed from a distance. If you try to delve inside the details from the get-go, you’re going to give yourself a headache. Instead, put yourself in the user’s shoes and try to understand how the typical reader looks at and digests a webpage.
Consider these three characteristics of user behavior online:
- Users want High-Quality Content – What defines a high-quality piece? The major things people are looking for are a clean layout that isn’t overwhelmed with ads, a consistent and casual tone, and credibility. This means linking to your sources and backing up your data.
- Online Readers Scan Content – Since most online readers are using mobile devices, they don’t have time to read each and every word. Instead, they scan the content, looking for key points and items that stand out.
- Readers Have Expectations – When someone enters your site, they did so because they expect something. It could be information, it could be entertainment, or it could be a product or service. Your design should fulfill that expectation quickly, and smoothly. The less they have to do, the better.
Taking these items into account, let’s look at five principles of web design that will help you make informed decisions:
1. Don’t Make Me Think
Krug’s first law of Usability states that your webpage should be obvious and self-explanatory. When designing your website, remove anything that doesn’t make sense at first glance. No distractions, and no mysteries.
It should be easy to move from point A, to point B, and so on. Establish a clear-cut structure and design that includes visual items and links that are easily recognizable.
Here’s a great example of how to get all the information someone would need on one page. This is the Maryland Craft Beer Festival website:
Notice how each section of the site from top to bottom is filled with information that people will need. Ticket prices, the date, a free map download, and then links to the brewers below.
All of it is placed strategically with clear headers so as your eye wanders and scans, you find more and more value. I don’t have to think in this example, it’s all there and organized for me.
2. Use Design Elements to Focus Attention
Since we’ve established that our reader’s don’t read in a linear fashion (from top to bottom) then we need to figure out how to make them see what we want them to see on the page. The human eye is incredibly complex, but eye tracking studies have taught us that it’s drawn to edges, patterns, and motion.
That doesn’t mean throw an auto-play video into your page, that’s a mistake that many rookie bloggers will make. Something like that can be distracting to the reader.
Using design elements like color, bold, italics, and font sizes can help you guide the reader down the path you want them on, without making them question how the site works.
Let’s take a look at Fork’s website:
Notice how the text is front and center. It’s bold and it stands out which means it demands attention. Not only does the size and position help, but the strategic bold of “open source” and “rock your world” boils down the concept for people who want the facts immediately.
Beneath this main image, there are two clear buttons and some quick features on the bottom. This is a perfect example of a bold and simple design which conveys the information quickly and efficiently.
3. No Fancy Language
Don’t try to stand out too far out from the crowd with fancy wording or phrases to the point where your customer is just confused. If you want someone to sign up, then explicitly tell them to “sign up.”
Talk in a clear and concise business tone that provides answers immediately and clearly. Here are three characteristics of optimized writing:
- Get to the point quickly with short and concise phrasing
- Categorize, organize, and break up your content with bullet points, headers, and visual elements
- Use plain language and terms
4. Embrace the White Space
A term you’re going to hear as you grow in your web design knowledge is cognitive load. This is a fancy way of saying “how much the user has to think.” The other term you’ll hear is white space which is unused space on your site.
Unlike coloring in art class back in the day, you want white space in your web design. If you fill up every inch of the screen with design elements, you’re going to give your reader a headache. The white space you leave allows the design elements that are there room to breathe.
According to Simon’s law, hierarchical structure reduces complexity. This means that a structure with white space used as separators makes the content less complex, and easier to digest.
5. Utilize a Visible Language
Aaron Marcus mentions in his papers three principles that form a “visible language.” Knowing these three elements will help you better plan your web design:
- Organize – Show the user a clear and organized layout. Consistency, navigation, and design layout are all important aspects to consider. The rules and ideas you establish for one element should be applied to all of them.
- Economize – Try to convey your information in as little elements as possible. Boil it down and present it in the most simple fashion. Use only the elements needed to communicate, present them clearly, and emphasize the important elements.
- Communicate – The readability of the content should be kept in balance at all times. Don’t use more than a few fonts or sizes in any given page. Too many elements out of balance will skew the message or make it difficult to process.
How Your Web Design Affects Your Blog’s Success
The way we measure success is through metrics.
These are statistics that help blog and website owners understand how well their web design is working, or how well the site is working as a whole.
In our case, there are four metrics/categories that are affected by your design choices:
Web Design Affects These Four Things
- User Experience
- Mobile Responsiveness
Let’s take a look at these four items and how your design choices affect them.
- Engagement – This is how much and how often users interact with your site. There’s a metric called bounce rate that measure how many people visit your site and leave immediately. The lower this metric, the better. Great design will help keep it down.
- Conversions – This is a fancy way of saying “sales.” Each time someone makes a purchase on your site, it’s considered a conversion. If your design provides users with a strong and clear path from beginning to end with something called a Call-to-Action. This is the design element that requires your reader to perform an action (like a purchase for example).
- User Experience – We’ve discussed this in detail already, but the overall feel and satisfaction of your blogs design ties into the quality of the user’s experience. You want them to have a smooth trip from beginning to end with zero hitches or confusion. A simple and clean design will support a great user experience for example.
- Mobile Responsiveness – This is the way that your website appears on mobile phones. It’s incredibly important that the experience on computers carries over to mobile devices. Otherwise your website won’t be able to rank as well on Google, and you’ll lose interactions
In regards to mobile responsiveness, I’d like to stress the importance of this design element. Here’s an example of what a website should look like on both a computer, and a mobile phone.
As you can see, the design elements carry over to the mobile version to provide a similar user experience. If you’re unsure of your website’s ability to do this, Google has a handy tool that will check for you.
Finding the Perfect WordPress Theme
I’ve always been a big fan of WordPress. In my humble opinion, it is the greatest blogging platform ever. There are countless reasons why I believe this, but one of the top ones is how friendly it is to beginners and veteran bloggers alike.
WordPress requires absolutely zero design experience to create a beautiful and user-friendly website. How is such a thing possible, I hear you ask?
The answer, is themes.
WordPress supports custom made website designs and layouts, known as themes, which can be easily downloaded and installed on your blog or website. These will cover all of your bases, and in many cases offer customization options to help your website further stand out from the rest.
They come in two forms: free and paid. When you’re first starting out, a free theme can give you everything you need, so don’t feel obligated to skip over those options. There are thousands of options though, so we need a tried and true process to weed out the ones we don’t want and find the right theme for you.
How to Choose Your Theme
- Make a list of the features you want (large thumbnails, animated sliders, wide columns, etc)
- Consider your website’s purpose (food recipes, blogging advice, DIY projects, and so on)
- Imagine how many pages or categories you want and look for a theme with customization options in regards to navigation.
- Make sure your chosen theme is mobile responsive. This is a must-have feature going forward.
Free or Paid Themes?
At this point you’re probably asking yourself which route you should take between paid and free themes. While a free option is certainly possible when you first start blogging, free themes come with a few caveats:
- They tend to offer very basic features (though many are mobile responsive
- They have little to no support
While you won’t have to pay anything for it, free themes can become an issue down the road when you need more features, but don’t have access to them. Think of free themes as the building blocks, or the foundation fro your website.
Installing a WordPress Theme
There are two ways to install a WordPress theme:
- Installing one from the directory
- Uploading one you’ve downloaded
Let’s start with the first one. Start by heading over to your WordPress dashboard. From there, click on appearance -> Themes. You should be taken to a page that looks like this:
Click the add new button and use the feature filter to highlight the exact aspects of the theme you’re looking for, like so:
Once you’ve found the theme you’re looking for, click the install button, followed by the activate button on the next screen.
That’s it! You now have a WordPress theme on your blog. The process is very similar for the second method. When you get to the themes page, look for the upload theme button.
You can also preview the theme before you install it.
If you’d like to see this process in action, here’s a short gif image that will help you visualize everything:
Further Web Design Resources
Now that you’ve wrapped your head around the purpose and goals of web design, and you know how to install your own WordPress theme, it’s time to get out there and make some magic happen!
Before you go running off though, don’t forget to bookmark this page. Not only will you want to reference this information in the future, but I’m also going to provide you with a massive list of top web design blogs.
Approximately two thousand words ago, if I had asked you how to design a website, you probably would have stared at me like a deer in headlights. No longer is that the case! You have the knowledge and tools you need to create a website focused on the all-important user experience.
Are you a web designer yourself? What tips would you offer for new beginners? Share your thoughts in the comments below!