4 Ways to Make Your Web Design Simple

What is simplicity? According to Merriam-Webster Dictionary, simplicity is the state of being simple, uncomplicated or uncompounded. A simple web design is uncomplicated. Minimalist design style is related to simple. It has only the necessary elements for functionality. A minimalist design can be simple, but a simple design is not minimalist.

4 Ways to make your web design simple
Image by Ambady Sasi from Pixabay

Is your website complicated or complex?

What makes it complex?

  • Too much content
  • Unnecessary design elements
  • It’s slow to load and hard to use

Why do you want your design to be simple?

A simple website is easy to navigate and use. It has the right number of design elements. A simple website loads faster and helps guide your customer to do what they want. It has content that is readable and scannable.

What can you do to make it simple?

Look at your content and ask is it necessary?
If not, remove it. If its, consider rewriting it. Use bullet points, shorter paragraphs and headings to break the text up. You don’t want to overwhelm people with a sea of text.

Review your site for extra design elements
Do you have colors, illustrations and photos that serve as decorations? If so, consider removing anything that is unnecessary.

Check for ease of use

  • Is your navigation bar complicated? Too many options can make it hard to use.
  • Do they need to go to multiple pages before getting all of the information that they need? Too many pages can make a simple design hard to use.
  • Are your forms easy to use? Complicated forms can make your visitors leave your website.

Look for items that slow your site down
Your photos, CSS, CMS and additional code can slow your website down. People won’t use your site if it is really slow. Use tools to compress and optimize your photos and CSS. Make sure your CMS is updated to the latest version. If you use any third party or custom code to extend your website, check if they are causing speed issues. See if you can get rid of the slow ones.

Simplicity is not a design style. Keeping your web design simple is hard. Websites change and evolve over time. You have to continually work to keep the design simple.

5 Strategies for Mobile First Design

Do you develop your website with a mobile responsive or mobile first design strategy? How do I know which one that I am using? Mobile responsive uses CSS to adjust the design to look good when viewed on different devices. Your design may have started out for desktop and updated to work on mobile. Mobile first focuses on designing for mobile users and their devices first. With the numbers of people who use the Internet through a smartphone or table, you want to make sure that your site is usable and fast for them.

Photo by Matthew Henry from Burst

What mobile strategies can you use?

1. Keep your content short
Use writing tools like Grammarly and Hemingway to help you write better and keep it short.

2. Keep your site simple
Review your website. Look at the number of pages and links in your navigation bar. You may have too many. Consider getting rid of old and unnecessary pages and links. Are your pages cluttered? Do they have too much information crammed onto them? Use white space to add breathing room between different pieces of information. Can you reduce the number of columns you use to two or one? On mobile, you want to limit the number of columns used. Two or less is recommended.

3. Use Mobile First Design practices
Use white space, vivid colors, bold shapes and strong typographic elements in your design. Do you need to use photos? You can use a mix of stock and real photos to create a unique brand. Remember to optimize the photos for the web. Photos with large file sizes can slow your site down.

4. Make your site fast
Your site needs to load fast. People will leave a website with performance issues. On mobile, it is even more important. What can you do to speed it up?

5. Test and get feedback
How do you test your website without access to different devices and users? You have to test as best you can.

  • Test your website with an online testing tool to see how it works on different devices.
  • Test on many real devices as possible.
  • Ask your co-workers or staff if they like how the website works.

Whether your visitors use a phone, tablet or desktop, you want to make the experience a good one. By designing for mobile first, you can make design decisions that help create a good user experience.

Making a Dark Mode For Your Website

Do you use dark themes or dark mode in your text editor? You can offer website visitors a choice of dark or light modes. Some people prefer using the dark mode because it is easier on their eyes.

Making a Dark Mode For Your Website
Image by PublicDomainPictures from Pixabay

What do you need to create a dark mode?

The only tools you need are HTML, CSS and JavaScript. You can use a button to allow your visitors to select between modes or use media queries that check their operating system for their preference.

Toggle example

Ananay Negoi uses CSS Variables and a button to toggle between light and dark mode. She demonstrates how to build the Dark-Light mode switch.

Level 5 Media Query

Level 5 Media Query checks your operating system for your preference for a light or dark mode. You can use this query to automatically set the mode for each visitor.

Designing for dark mode

When you create a dark mode for your website, it involves more than switching the colors to darker ones. You need to consider how color, fonts, images affect the readability and usability of your website. Your website reflects your brand. You want to think about how a dark mode can affect your brand. Andy Clarke walks you through the steps he took when he created a dark mode version of his website.

Dark Mode Resources

If you want to implement a dark mode design of your website, refer to these resources on how to do it.

Animation Principles for Enhancing UX

With new tools like CSS Animation, JavaScript Libraries and modern browsers, we can easily add animation to our websites. Animation helps you to provide context, give feedback, convey status and delight your users. You can affect color, location, scale, shape, focus and opacity of objects. By learning the principles of animation, you can create deliberate animation that improves the user experience.

Photo by Aline Ponce from Pixabay

12 Principles of Animation

Disney animators, Ollie Johnston and Frank Thomas, first introduced the 12 Principles of Animation in their book, The Illusion of Life: Disney Animation. They examine the process of animation from Disney’s leading animations and provide you with 12 basic animation principles.

What do the 12 principles provide?

  • Realism
  • Context
  • Causality
  • Focus
  • Delight

They also help to create hierarchy and relationships between objects. These principles help you to provide feedback to the user, indicate status and give instructions. One of the first uses of animation on computer screens was the flashing cursor. It tells you that you can start typing and that the computer is working and not frozen. This simple animation conveys information faster than words can.

How to Use Animation Responsibly

When you are deciding to add animation to your user interface, consider the following:

  • Does it add value?
  • Are your behaviors consistent?
  • Is the user interface still functional without it?
  • Is the animation optimized?
  • Do you need it?

Using Animation to Enhance User Experience

At WordCamp Atlanta 2019, Michelle Schulp gave a talk Squash and Stretch and Good UX- Using Animation To Enhance User Experience. She gave a quick overview of the 12 Principles of Animation. Michelle explains the uses of animation and how to use animation responsibly.

More resources on animation

Become a better designer with design challenges

Design is about solving problems not making it look pretty. You want your designs to work. They should be easy to understand and use. How do you get better at design? By doing. It can be hard to come up with ideas to design. You can practice with design challenges.

Become a better designer with design challenges
Photo by Sarah Pflug from Burst

Why do design challenges?

Challenges help you get better at solving problems. They help you to explore new ideas, understand how other designers approach problems and improve your UX skills. You may create a solution that you want to use as a case study in your portfolio.

Here are four different websites where you can find a challenge to tackle:

1. Can’t Unsee: UX Design Game

Can't Unsee Ux Game
Ready to test your UX design skills? You can test your skills with Alex Kotliarskyi’s Can’t Unsee. It is a game that tests your UI design skills and attention to details. With three levels, you can challenge your skills in interface design.

2. UX Challenges

UX Challenge Co Website
Practice solving problems with UX Challenges. These challenges ask you to solve real world problems. You may want to use your solution to a problem as a case study for your portfolio or practice for a design interview.

3. Daily UI

Daily UI Challenges website
Want to become a better designer? You can sign up for a series of design challenges, inspirations and more. Use these daily challenges to learn and improve your design skills.

4. Designercize

Designercize
Designercize randomly gives you a design problem. You can pick the problem that you want to focus on, choose a time to complete it in and click on play. When the time is done, you should have a completed design.

Need more challenges? Try 100 UX problems from Jon Crabb on UX Collective. Or if you write code, you can consider these coding challenges.