Design 101 for Developers
Table of Contents
Many devs may believe design is less important than functionality. But, at the end of the day, the truth is that design and development go hand by hand. Even if, as a developer, you have no intention to deepen into design, knowing its basics is quite important. As a result, not only you’ll optimize relations with designers. Further, you’ll have a better understanding of final users.
Instead of making these fields “compete”, we’ll focus on the value of combining them. This is why, in this article, we will be going over design basics for developers. First, we’ll cover the importance of design for developers. Then, we’ll move on to the basic design principles and patterns developers should know. Let’s overcome this hypothetical dispute and discuss its worth!
As a developer, we’re confident you know the difference between these two areas. Yet, it seems to be a running question, so we thought it was a good place to start. Let’s unfold the differences of design and development. In broad terms, design involves creating an app or site’s look and feel. What’s more, it addresses solutions for users or clients needs, focusing on UX. Usually, it’s done through design softwares, such as Fireworks or Photoshop. Meanwhile, application development entails programming, testing and implementing the application design. Further, it adds functions to an app or site and creates user interactivity features. To do so, it applies programming languages and tools.
Why should Developers learn Design?
Design and development are separate disciplines, but many professionals have mastered both. As we’ve mentioned, it will prove useful to have some knowledge of this field as a developer. Here are the top reasons why you should learn design as a developer:
Programming or coding is a creative activity. You have to think with creativity to solve the problems you come across as a developer. But, design also involves creativity and problem-solving skills. If you handle its basics, you can pour this creative energy into coding as well.
Some developers can’t afford a designer; others want to be in charge of every inch of a project. There are also small development teams that may not have a dedicated designer. This may be one of the main reasons. In every case, having design knowledge comes handy. At least, until being able to get help.
Another huge reason is to improve work relations with the team’s designers. When knowing design basics, devs are less likely to make changes able to make or break a UX/UI design. This leads to fewer corrections, saving time and fostering teamwork.
An understanding of design also helps developers to understand potential users. As you may know, knowing users is key to developing successful products that solve their needs.
Whether you work for a company or are a freelancer, adding skills to your resume is always a great asset. As a result, you can keep your career moving forward. Learning design adds a selling point, and can open doors to new and exciting roles or projects.
Basic Design Principles: The First Steps
Now that we’ve covered the reasons to learn design, we’ll start our journey into Design 101 for Developers. First, we’ll be covering basic design principles and rules that you should follow.
The most important thing to consider when it comes to design is usability. It does not matter how stunning the visuals may be. If it’s difficult to use or understand, the product will most likely fail. This is when consistency comes in. Design must be consistent enough for users to understand its uses in an intuitive way. For instance, this includes fonts, color, and sizes. Further, there is alignment, spacing, effects, styles, and elements. Moreover, you should take into consideration standard aspects. An example of this can be a blue underlined text for clickable links.
Hierarchy helps users focus on the most important information. You can use hierarchy to draw users to where you want them to go and draw their interest. In general, type size and style are usually enough to establish it, but you can also use, for instance, color.
White space makes the reading experience more enjoyable for users. When we say white space, we mean any space without images or writing. This encompasses margins, line-spacing, and the space above or below paragraphs. Besides improving readability, it’s also helpful for drawing users to specific areas.
Layout and Alignment
Proper alignment of text and different elements is quite important. While body text is often left-aligned, headings and subheading are usually centered. Yet, you should avoid center alignment for big chunks of texts as it makes reading it a bit trickier. Regarding the elements on your website or app, using columns can simplify matters. Designers often use grid systems to structure a page or app in a clear way. As a result, this makes the design process simpler. Also, it means that users can easily navigate through content.
Understanding color theory is essential in the context of visual design. But it is also one of its most complex aspects. Different colors, or shades of a color, can change visual impact and emotional effects. Here are a couple of tips on color to help you get started.
Warm, Cool, and Neutral Colors
Warm colors —such as red, orange and yellow— are vibrant and energizing. Cool colors —like green, blue, purple— are calm and relaxing. Finally, neutral colors, —white, black, gray, brown, beige— can alter the meaning or impact of warm and cool colors.
Work with HSL color values
Many designers may be prone to work with hex values in relation to colors. Yet, HSL colors make more sense when it comes to the correlation between similar shades of one color. As a result, it’s easier for developers to manipulate colores via code.
There are a few things to consider in the context of typography. For instance, fonts, sizing text and headers, line height, and shadows. Let’s look at some pointers below:
• You should have at least three levels of hierarchy when it comes to typography. These apply to title, subtitles and body font.
• Use different fonts to create a visual hierarchy. If you are afraid of combining different fonts, you can always look within the same font family.
• The font you choose should be easy to read on both design and size, particularly when it comes to body copy.
• You can use the < em > function to define text sizes for responsive web design.
• Keep line height and letter spacing in mind.
• Be careful when using type on a colored or busy background. If it poses a problem, you can try changing colors or even adding shadowing.
A key element of good content is linguistic clarity. You should use language that will be familiar to the reader. Also, you should consider that attention spans of online readers tend to be quite short. So, it’s better to avoid long texts. Let’s take a look at some tips below:
• Get the point across in as few words as possible and don’t be afraid to cut your text.
• Simplify your language and your structures to make your content more approachable.
• Remove unnecessary words or phrases.
• User stories can be a great way to think about your content.
• Keep SEO and ASO best practices in mind when writing copy.
• Make sure all content is proofread to avoid spelling and grammar errors.
• Also, correct sentences that might not flow very well.
• Take advantage of bold and italics to draw the user to specific sections of the copy or to help structure it.
Design Patterns every Dev Should Know
Patterns are standard reusable architecture or design solutions for recurring problems. These are not code, but descriptions of how to tackle specific design problems. Also, they can help to speed up the development process. There are three main categories that developers should know about design patterns. These are creational, structural and behavioral.
Creational design patterns are those designed for class instantiation. These get divided into class-creation and object-creation patterns. For example, some creational design patterns are singleton, builder, and abstract factory.
These patterns relate to class and object composition. Also, they help improve code’s readability and maintainability. For instance, structural design patterns include bridge, facade, decorator, flyweight and adapter.
In design patterns, behavioral refers to how class objects communicate with each other. Some types of behavioral design patterns include iterator, observer and visitor.
You can learn more about design patterns here!
Design Tools and Resources for Developers
This article wouldn’t be complete without going over some design tools and resources. Take a look at the most popular ones below.
This cloud-based platform focuses on UI design. It combines design with real-time collaborative editing and prototyping. Also, it runs on any platform with a web browser. Some of Figma’s features include a modern pen tool, a wide array of plugins, and easy export. Uber, Microsoft, Slack and Braintree are some of the companies who use Figma.
Sketch is a collaborative UI and UX design tool for mobile apps and the web, mainly for macOS. It is simple and easy to use and compatible with ProtoPie (for prototyping) and Maze (for user testing). Also, it’s great for prototyping and wireframing, and has powerful export options. Companies using Sketch include Google, Apple, Stripe and Nintendo.
This is a prototyping and workflow tool based on the web. InVision helps to create interactive mockups which you can share with your clients. It offers smart widgets, Kanban boards, and Loom and Zoom integrations. For instance, companies include Netflix, Slack, Amazon and HBO.
Proto.io is a prototyping solution for mobile UX. To name a few, it has over 250 UI components, hundreds of templates and thousands of digital assets. For instance, it has easy-to-use drag, and drop-building blocks. Proto.io gets usage by ventures like Nordstrom, PayPal, Amazon and Amplify.
Another excellent design tool when it comes to collaboration is Marvel. It offers rapid prototyping, testing and handoff. Also, it has over 2 million users worldwide. Moreover, Marvel offers user testing features, support for every screen, and different integrations. Among businesses, Marvel users include Deliveroo, Cookpad, Cabify and Buzzfeed.
You might also like: Best UI Tools and its Rising Alternatives
Instead of thinking about design vs development, handling both areas is really beneficial. This applies for both designers and developers. With basic knowledge on design, devs can foster better teamworks and smooth processes. What’s even more, it can be key for creating superior end-results. We hope our article has not only given you an overview of design 101 for developers. Also, we trust it gets you driven to learn more about this field!
Knowing how to combine design and development can be the key for taking the lead in this era of digital transformation. We've got an amazing team willing to create the beautiful and functional ideas on your business' mind. Today is an amazing day to stop the thoughts and start the actions. Get in touch with Capicua to make it real!