iTranslated by AI
Web Application Design and Website Design
This article is for Day 10 of the Designers interested in engineering, Engineers interested in design Advent Calendar.
Aren't There Two Types of Web Design?
I feel like there are two major lineages in web design, and I've thought about the differences between them. However, not all web design can necessarily be divided into these two, and the boundary is a gradient.
This article is not about sharply dividing design into two, nor is it a discussion of superiority. However, I believe both take different approaches to design thinking. When talking about web design, knowing what background is being assumed can prevent unnecessary misunderstandings. In this article, I will explain the differences from the following perspectives:
- Visual characteristics
- Origins of design
- Relationship with business requirements
- Design tools
- Recent frontend technologies
Visual Characteristics
Let's look at the visual design, where the differences are most apparent.
Characteristics of Web App-style Design
This is the design used in web apps and the sites that operate those services. Design characteristics include:
- Distinct color schemes
- Symbolic graphics using line art or illustrations
- Component-oriented design
Due to the nature of the services provided, there are many situations requiring user interaction, and the focus is on whether the user can use it without getting lost.
An example of Web app-style design (https://corp.moneyforward.com/)
Characteristics of Homepage-style Design
Homepage[1]-style design is used for websites of local businesses or corporate sites. Design characteristics include:
- Overall unified color palette
- Layouts that extensively incorporate photos and illustrations
- Use of typography, with a high ratio of text elements among the components
Compared to the former Web app-style design, there is less user interaction, and the focus is placed on conveying information and impressions.
An example of Homepage-style design (https://tyo.co.jp/)
Origins of Each Design
Web app-style design often involves many scenes where users perform mouse operations or keyboard inputs, as the name suggests. I believe the origins of this design lie in the lineage of UI design that has continued since the birth of the GUI, rather than just "web design." (In fact, I feel it can be traced back even further to physical objects like mechanical control panels.)
Design with usability similar to native apps (Google Sheets)
Since Homepage-style design aims to convey information, its origins can be traced back to print media design that existed long before the birth of the Web. Font selection, the use of whitespace, and font sizes often share commonalities with editorial and graphic design.
However, within the medium of the Web, these are not completely independent; they blend with each other to create a new design domain called Web Design. In Web app-style design, the use of whitespace is crucial, and in Homepage-style design, user interaction still exists. Link and button designs are concepts that do not exist in print media. Even for Web apps, a hierarchical structure of "pages" unique to the Web exists. (Though I feel the concept of a "page" is thinning due to the evolution of SPAs.)
In addition, characteristics unique to the Web, such as SEO and loading speed, also influence Web design.
Relationship Between Business Requirements and Design
Business requirements and the design adopted for them are inextricably linked. As mentioned in the characteristics section, the differences in each design reflect the differences in their requirements.
Business Requirements for Web App-style Design
Web apps are constantly evolving with new feature additions, and the design must be resilient to those changes. Therefore, consistency in appearance across features and scalability are demanded of the design. This approach aligns well with component-oriented design, and sometimes a design system is constructed. With a design system in place, as long as the rules are followed, visual harmony can be achieved even without deep design expertise, enabling engineers to build new pages independently (without designer intervention).
At the same time, this component-oriented design is highly compatible with current frontend trends like JavaScript frameworks such as React and Vue, allowing development and design to work in sync. This collaboration also offers advantages from a business perspective. Web app-style design can be considered dynamic design.
Business Requirements for Homepage-style Design
On the other hand, corporate sites and similar projects often see no major design changes for several years once they are created. Consequently, reusability and scalability are not as strictly required in the design. Instead, visual aesthetics and creative expression are often prioritized.
Whether it is a store website or a corporate site, there is a desire to convey the quality of products or a specific worldview. Such elements carry high importance within the site, and significant energy is sometimes invested in them.
In these scenarios, rather than strict design consistency or global logical rules, the priority is for the design to be visually complete and optimized for specific contexts. To prioritize appearance, elements that appear only once across the entire site or exceptional treatments are entirely possible.
Furthermore, while these sites include dynamic sections like "News" or "Blogs," situations requiring completely new designs are rare. Even when adding new pages, it is often limited to what can be achieved through a CMS, meaning the design scope is predefined. Some parts of the site may remain unchanged from the moment they are published until the next full renewal. Homepage-style design can be considered static design.
Design Tools and Each Type of Design
Nowadays, both design tools and frontend technologies are diverse and continue to evolve. Tools like Figma and Adobe XD are currently popular for design, while React and Vue are popular for frontend development.
Looking at both from the perspective of design tools, I don't think there are advantages or disadvantages for either. Since both tools have component features, Web app-style design can align the granularity of design-level components with implementation-level components.
On the other hand, while Homepage-style design might involve more intricate visual work, leading to perceived functional shortcomings in Figma or XD, I believe there is no issue if you combine multiple tools rather than relying on a single design tool.
The strength of Figma and XD lies in features specific to web design, such as auto-layout and state management functions. These are not found in other graphic design tools and provide powerful support for communication with engineers.
For either design style, it is better to leave the creation of detailed individual parts to software specializing in illustration or image processing, while utilizing the main tools for layout and component functions.
Frontend Technology and Design
I previously mentioned that Web app-style design is compatible with React and Vue, but I don't think Homepage-style design is incompatible. React and Vue should be useful as powerful tools regardless of the design style.
However, I feel that React and Vue are not often adopted for Homepage-style design, more for business reasons than for design reasons. This is because many corporate or store websites are left to the client for operation after completion, often leading to the implementation of WordPress as a CMS. On a WordPress basis, it might be difficult to fully adopt React or Vue[2]. However, as Jamstack configurations become more popular, this situation might change.
Summary
Even when we simply say "Web Design," the design philosophy changes significantly depending on the service and its requirements. At the same time, however, the two are inseparable and form web design while influencing each other. Although I have categorized them by website type for clarity, if you look at a more granular level, I believe that a single site can contain both Web app-style and Homepage-style design philosophies.
Mixing the theories haphazardly will not result in a good product.
I believe that not only designers but also engineers can prevent unnecessary communication gaps[3] by having this perspective. Let's aim for better frontend development by understanding each other.
Related Articles
I have also written a bit about the relationship between design and engineers in the following article, so please feel free to read it if you're interested.
-
While the term "Website" is more accurate, I have used the word "homepage" here to refer to the common public perception of the term. ↩︎
-
Although full adoption is difficult, it is possible to use them for parts of a site. I have explained this in detail in my article "Easy ways to add motion with Vue.js to your HTML!" (Japanese). ↩︎
-
I suspect this is one of the causes of the frequently discussed "Pixel Perfect debate" and the "Should designers be able to code?" debate. ↩︎
Discussion