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.

Get Data Using JavaScript Fetch API

I was looking for a simple to get data from an API. When I found this tutorial using JavaScript Fetch and the Random User API. You use Fetch to send a simple GET request to the Random User API and provides you with JSON data of 10 random people.

Get Data Using JS Fetch API
Photo by Shopify Partners from Burst

Why manually type in code?

In Learn Ruby: The Hard Way, Zed A. Shaw, explains that you must type in the exercises by hand. It helps you to learn how to read, write and see code. By using copy and paste, you don’t learn how the code works.

How do I used this tutorial

This site is simple. I started with a simple HTML site. Then, I made some adjustments after I got the GET request working.

1. Added style to the website
I started with a simple HTML website that didn’t have much style to it. First, I added CSS code to style the images. Then, I added a header and footer to the site. I decided to stick with a black and white color scheme.

2. Changed how the API displays the data
When I first created the site, the API returns the user’s name in all lower case letters. I wanted the name to follow the format of first letter upper case and the rest lowercase for both first and last name. I modified the JavaScript to capitalize the first letter.

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

The API returns the email address as text only. I wrote an additional function to change email to be an actually email link.

function createEmailAddress(string) {
    return "<a href=mailto:" + string + ">" + string + "</>";
}

3. Changed the size of the photos
In the tutorial, the photos are on the small size. I wanted them to be bigger. To learn how to do that, I went to the Random User API documentation and read how to get bigger photos. It was a simple change.

Random User API

See more about learning JSON by building a simple website.

How to plan a project?

Projects can be large or small. They can be finished in 24 hours or take months even years to complete. Whether you are working on a project for yourself or a client, you need to create a plan. Your plan can be as simple or detailed as you need it to be. A simple coding plan covers things like what I am going to make, tools I need, steps needed to complete project, sketch out your designs, plan your code and schedule time to work on it.

How To Plan a Project
Photo by Emma Matthews on Unsplash

Decide what to make

The best projects fall somewhere between things that you enjoy doing and things that allow you to learn marketable skills. If you are working on a side project or a hobby, you want to make certain that it has these elements. When you work on client projects, you may not get a project that has both. All projects can provide you with the opportunity to learn something.

Coming up with ideas for personal or side projects can be hard. By keeping a project notebook as Amie Chen does, you’ll have plenty of ideas to choose from. You can also ask your friends what problems they are having or try one of these ideas.

Pick the tools you want to use

Whether you are going to use a new framework or sketching tool, you should make sure that you have everything that you’ll need. Need new software? Install it. Photos? Download or purchase them. Make sure you have what you so you can set up your space for working on your project right away.

Plan the steps to complete your project

When you are first starting a project, it is easy to get excited about it and want to start building right away. Don’t. Plan out your project. Use a process called backwards planning. Start with your end goal. Ask yourself what you want to accomplish and write down clear steps and milestones that you need to achieve this goal. It doesn’t have to be perfect, you can revise as needed later.

What about extra things that you didn’t plan for? You may discover that you need a few extra things. if you are using an API, you may need to sign up for a developer key. Add them to your plan as you learn about them so you don’t forget to do it.

Design

Design is more than making it look pretty. It can be helpful to sketch out your designs before building an app. By sketching it out, you can decide what features to include, how people will use it and how it looks.

Plan your code

Start small. Think about the steps that the user needs to do in order to accomplish something. Break your code down into functions. By breaking it down, you make it easier to write your code.

Schedule time to build it

Look at your schedule and plan time to work on this project. You may need to stop doing less important things like watching TV.