Dark mode and light mode. Website design developed by Ailon Webs.

By G. Lara & M. Soutto

Dark mode and light mode. Website design developed by Ailon Webs.

The use of dark and light mode on web pages is already a reality, many websites offer the possibility to choose to change the display of their website with a simple click. Ailon Webs has taken a step in this direction and we are going to analyze how we have developed and designed the naturalapps.com website, a practical case of the design of a dark mode light mode website.

What is a dark and light mode website like?

We have already explained in another article What is dark mode and light mode?, we recommend that you read it if you are interested in this topic. In this article we are goin to explain to a user: what is a website dark and light modes like? how is it applied? or how does it work?.

When we start a web project we must make a list of requirements for that specific website. Taking into consideration the goals and functionality that we want to offer to users.

Web design decisions for a dark mode and light mode website.

1 Prerequisites to creating dark and light website

Our web design project aims to create a website that allows users to choose the display of web pages in dark mode or in light mode.

Taking into account the above, we start the responsive and Mobile First web design, aso we are going to start the design thinking about the design of the website for mobile devices but we must also think about devices with larger screens. What does this mean? Well, we must first think about small screens and therefore make sure that there is the necessary space so that we can use our fingers (of different sizes), and second, we don't lose sight of the content that we want to show the user, then third we make sure that the programming is optimal for the website to be fast loading and finally fourth that we implement a good SEO from the beginning.

Also, the web has the requirement that it will be in two languages English and Spanish, and to make it more comfortable for the web user, we will implement the necessary programming to detect the language of the device with which the user accesses the website, this way in fewer clicks you can view the website in your language.

2 Dark mode light mode website design.

All web design is determined by the content, in the case that we are describing Natural APPS, it is a website to publicize the apps for Android devices that they develop and design.

Thinking about the users who visit the web, it may happen that:

• Users already know the apps or the Natural APPS brand, in which case they may look for another app from the same developers, or seek to contact, or want to know who they are.
• On the contrary, there will be other users who come to the website and do not know them, but want to know who they are and what they do, because perhaps they are interested in an app.

We have to give both types of users a clear and quick answer of what they are looking for, but in an attractive fashion, because otherwise they will end up leaving the website.

We bear in mind that the purpose of the website is:

• Introduce who they are and what they do.
• Explain the outstanding features of the applications developed.
• Tell users how to download or buy an app.

With these ideas, we are already seeing the needs of the website to be able to organize the information that we are going to show out visitors. We design a site map to visualize the distribution of the information flow for this website.

We will use these programming languages for the website development:

• HTML5: HyperText Markup Language.
• PHP: Very flexible and database-friendly server-side programming language for use in web development. PHP its current meaning is Hypertext Preprocessor. Originally it meant Personal Home Page.
• JavaScript or JS, is an interpreted programming language that is mainly used on the client side.
• CSS3: for the visual style of the web page we will use the preprocessor Sass (Syntactically Awesome Stylesheets) for CSS3. CSS stands for Cascading Style Sheets.

Dark mode and light mode. Website design developed by Ailon Webs.

3 Mobile First layout of the dark mode light mode website.

With the sitemap that we have created, we now know the requirements of the navigation menu, key point for every website, and we can begin the mockup of the design of the web pages.

We design the mobile web version first, we will base ourselves on the characteristics and content that we think are most important for users, for this we have to determine what is essential and what most users need. For the computer we can add more features and content if necessary.

Navigation menu:

On mobile devices, it will initially be displayed as folded and as a button type menu, as shown below: (icon consisting of 3 horizontal stripes).

Thinking of the client who are app developers for Android and their users, when they press the menu button on the mobile, it will show its content with an animation as it is displayed, then it will show the displayed menu so that it appears from left to right like the most known applications on Android devices that we use every day. These are the details that when the website is finished they are not noticed too much but they create an everyday-use and universal atmosphere, always following the first rule of usability as we have learned from Steve Krug, 'Don't make me think' , in oreder to ensure that the user achieves his goal without having to think about it. If this menu style usability works in the design of apps, then it must also be implemented in this website design.

One button to switch from dark mode to light mode and vice versa.

The website will offer the modality to visualize the website in dark mode or light mode, consequently, when the user clicks on the button, the theme or mode changes with a single click. We will this create mode functionality button with a custom design and place it within the navigation menu on the mobile, with the rest of the web links, and on large screens, such as a desktop computers, we will place it with the navigation menu at the top of the page and in a visible place.

Programming of the dark mode light mode website

This is another important step in the process of creating a website and essential for the design of the website to be responsive (the content and presentation are adapted to the screen size and type of device). As a result we will obtain an efficient and beautiful website.

We plan the files with HTML language and add PHP to provide it with the required functionalities. As the work requires it, we will program the necessary scripts in JavaScript language. We implement the style of the web pages with the Sass preprocessor that allows us to clarify and simplify the style code, creating variables and functions that speed up our work.

We design the variables to control the goals of the pages, we create the appropriate and common code sentences for both languages to call the variables that we have defined for each page of the website. This way we save time and effort when adding the meta tags of the page. This is the invisible part but it will later be important to position our website in the main search engines.

We develop the necessary programming so that when the user changes from light to dark mode or vice versa, the color of the background of the web page, the text and the images change, adapting the content to the selected mode. This change must be instantaneous, transparent, fluid and without loading delays. And of course the web page must 'remember' the user's mode preference so that when browsing to another page of the website it continues in the desired mode.

How do we improve the content of the web?

Original and hight quality website content will make us stand out and is essential for the website to be positioned in search engines.

For this reason, in this web design developed by Ailon Webs for a website with dark mode and light mode that we are writing about, in addition to being able to change the mode or theme of the web page, we want to show the content on the web pages that describe the apps or applications developed by Natural APPS, with images and texts in a fun way using a gallery of cards that do not leave spaces between them but are coupled according to their dimensions (Masonry type distribution).

In the mobile the information cards are distributed one after the other, with different heights, and on large computer screens, the distribution of the information about the app can be seen in which the cards are shown in blocks that are stacked and arranged in depending on its size in order to fill the space on the screen, in such a way that there are no gaps between the cards.

There are many more ideas that can be taken into account when we are adding content, for example that your website has more languages to reach a higher percentage of visitors on the internet. The best thing is that your visitors find you on the internet, have a good user experience and then perhaps they will share your website on their social networks.

4 Optimization of web quality and size, components and content.

As we all know, the key to search engine optimization is quality and well-structured content. And that content must be displayed and organized in a specific way to achieve good SEO for the website. We must ensure that each page of the website has its key phrase and related images that are part of the content of the web pages in an optimal way so that the search engine finds them.

That is, in this phase we need a clean programming code, with the key phrases and their optimized images integrated into a quality web content but also attractive, imaginative and easy to understand.

For this reason, it is essential to start with a good sketch for mobile and computer screens, with the defined color palette, the fonts for the text and much more components and elements that will help us develop our web project on the right track.

And finally, we measure and optimize the Web Vitals of the website. These Core Web Vitals are according to Google, a unified guide that identifies the quality signals that are essential to provide an excellent user experience on a web page. This score is important for search engine positioning, so it is essential to review and optimize the websites to improve the Web Vitals of the website. If you want to know you can read our article that explains the Measurement of Web Vitals of the web Why do you have to measure Core Web Vitals?.

Process for the development and design of a dark mode light mode website, by Ailon Webs.

Conclusions of the a dark mode light mode website design

After writing our article Dark Mode and Light Mode. Which is better? and seeing the interest it aroused, we thought it would be a good idea to explain the development and design of a website with these modes with a practical case. Since we believe that a practical case is a good way to understand the development of a website and how is a web page displayed in dark mode or in light mode?.

Web users may ask themselves: what is it like? How is it applied? or how does it work? a website with both dark and light modes. Therefore, being able to see and use a web page design with the possibility of choosing to switch to dark mode or light mode is a good way to understand what it is, see how it is applied and test out how it works, in order to choose the option that we like the most as users, ambient light and much more.

You can see and test this practical case that we have described of the website designed for naturalapps.com and developed by Ailon Webs. On this website you can view web pages in both dark and light modes with a single click, without losing its identity, its objectives or the message of the website, with a scalable and easy-to-view web navigation.

Ailon Webs is a professional web design company, we have created many websites with responsive web design over the years, we create scalable internet services so that the architecture of the content and the presentation adapt to the screen size and type device.

Each web project is different and we study the best possibilities to carry out your website. Get a free quote for your web project.

Get a free professional website design quotation