Why does Frontend Development need to diversify the design?

Tram Ho

Frontend development is a small area of ​​programming. To be an engineer really needs a balance between the creative side and the brain’s analytics.

Nature of Front End Development

User interface development is a lackluster area of ​​technology because it is a bridge between people and code. It represents the business and provides its users with access to the goods and services it provides. When we talk about front end development, we often talk only about the code aspect: JavaScript, CSS, various frameworks and libraries become the center of conversation. Conversations about design, however, are often removed. But the front end is not just lines of code. It is the specification of digital design and the presentation of business rules in the form of the desired response from the user. We don’t tend to admit it but the front end is a multidisciplinary field involving a mix of programming knowledge, design knowledge and digital psychology. Knowledge of visual patterns, color theories, and typography are some of the things that many front end developers encounter, regardless of roles and distinctions.

Where appropriate design

Understand design as a front end developer of technical knowledge with the ability to produce at least one product without the need for additional human resources – something any potential employer wants. To understand the design and how it affects users and their choices, gives developers a variety of skills – in addition to knowing how to code effectively. The designs are also materialized into the corresponding designs. When developers can identify these templates, it can lead to well-organized and easily extended CSS with HTML. In addition, understanding design can mean less reliance on libraries and startup solutions to create something that meets expectations of good digital aesthetics.

More than usual

The features of digital design are more than just colors and typography. Here are some areas to explore in order to convey and upgrade your development toolkits and UI development skills.

Digital component design

Responsive and flexible development is what every front end developer expects to know and understand. Reponsive and flexible development is merely a mathematical translation of the component into CSS code.

What did Google do ?:

  • layout design
  • visual hierarchy theory
  • Visual cohesion in graphic design
  • one-third rule
  • grid design

Typography for digital screens

Problems with typography. Combined with images, words are how the interface communicates to users the reason for its existence. Different browsers and screens display the same different font, despite having the same settings in your code. Choose two fonts you like – one serif and san serif – and stick with them until you find them completely. This will give you the first understanding when it comes to other fonts.

What did Google do ?:

  • presentation
  • Effective font sizes for desktops, tablets and mobile phones
  • digital font thickness
  • Optimal line length and line height for the device

Color and aesthetic intuition

Instagram exploded into such a big problem today because it drives the market and desires aesthetically pleasing selfies. Although you can’t place a filter on your front-end interface, the ability to identify and implement an effective color palette and aesthetic layouts is something developed over time. Intuition is simply a set of internalized rules and expectations, culminating in the ability to immediately distinguish good design from bad design – and in order to do that, you have to come into contact with the world. of digital design and simulate their samples until you can create your own. This is the easiest and fastest method to develop your color and aesthetic intuition. Effective creation is the act of combining different elements working for others to create an intuitive but unique solution.

What did Google do ?:

  • Digital color palette
  • Adobe
  • Popular designs in web and mobile

User experience model

Design is always changing. Design is an experience conveyed through a physical expression of color, layout, image and typography. In this digital space include interactive reactions. The ability to effectively and accurately model user experience with their design experience can help frontend developers identify future patterns. This in turn can help reduce potential errors that can hinder the overall user experience.

Conversions occur when there is a positive user experience. Even the most loyal customers give up because the process is put in the ‘too hard’ basket. This is not just about the number of clicks – but also the ability to easily solve the immediate problem users encounter. When this is not done, the user experience diminishes.

What did Google do ?:

  • UX value
  • Heuristic evaluation process flow
  • Designing product maps
  • Usability and utility in the user experience
  • Integrated heat map


Aesthetic design and recognition skills are what everyone has the potential to develop. If in doubt, follow the web trend of stripping things back as much as possible and focusing on what you are trying to achieve.

Understanding how design works can aid implementation and communication – making it easier to talk with resident digital designers in their language and understand needs, issues and each other’s requests are a lot easier.

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo