Design for Developers
Tech
×
June 20, 2024
The idea of the right and left brain is a myth. There’s no scientific evidence that backs this concept. So the ideology that a developer cannot design, and vice versa, is technically untrue. Learning outside your discipline strengthens neural connections in the brain.
Here are my key takeaways from the Design for Developers course I just completed on Frontend Masters
Layout Design
Layout design is nothing short of crucial in the realm of design. It serves as the bridge between content and audience, determining how information is perceived and interpreted. A well-executed layout design enhances visual aesthetics and facilitates effective communication.
So whether you’re building an app or designing a website, mastering layout design is a valuable skill that can make a lot of difference in the design field.
Scaling
Scale is a large part of design, sometimes literally. In a very basic definition, scale is the deliberate sizing of individual elements.
Scale can help us make sense of designs and images. Think about if you were to draw a mouse next to an elephant, you’d probably draw the mouse much smaller than the elephant, which would help viewers understand your design instantly.
In this way, scale helps us make sense of things. But, scale doesn’t always have to be based on realism. You can size your elements dramatically large or small to create stunning effects and to signal which parts of your design are more important and which are less.
Balance
Balance is a pretty important thing in most aspects of life, and it’s equally as important in the world of design.
One way to master balance is to think of each of your elements as having a ‘weight’ behind it. From images to blocks of color, text, etc. consider each of their sizes, shape, and what weight they have about other elements on the page.
A very good technique is to imagine your design to be printed out as a 3D model. Would it stand or would it tip to one side?
Inspiration
Everything is a remix! There’s nothing new under the sun. (- Dan Mall)
If you don’t know where to look allow me to recommend to you Dribbble, Behance, etc.
Get inspired by multiple sources
But wait…………!
Don’t just copy their design directly
Put together a mood board (screenshots of the designs that inspire you)
Then sleep over it and work from memory, not directly.
Revisit: if it is too close, change it or toss it.
Just like reverse engineering, copying existing work can help you learn. But you can’t claim it as your own.
Typography
Typography can make or break the success of a site or app. It’s a cornerstone of UX design; more than 90% of online information is in text form. But the design discipline of typography is so much more than choosing an attractive font for your website or app. There are several elements to consider when practicing typography. Here is a list of terms and a set of typography principles that will help you to become more proficient in this discipline so that you can create user-friendly designs.
Color
I know I don’t need to preach about how important color is to designs, but I’m going to anyway. Color is paramount. Color creates specific moods, and atmospheres, and channels emotions, and each shade has certain specific connotations associated with it. In short, color can make or break your design.
Color Mode
RGB - Red, Green, Blue.
CMYK- Cyan, Magenta, Yellow, Key (Black)
HSL- Hue, Saturation, Brightness.
Color Mixing
A color is only a color about another color.
1 . Complementary colors
These are colors that are located at opposing sides of the Chromatic Circle
2. Triadic colors
These are colors obtained by overlapping an equilateral triangle to the Chromatic Circle.
3. Split-complementary colors
This combination is obtained by matching the main color to the two colors adjacent to its complementary.
4. Analogous colors
These are colors that are next to each other on the Chromatic Circle.
Images
Words have their power and they also have limitations as language barriers but that’s where Images come into play, whether it is to convey a message, tell a story, or evoke an emotion.
Lots of information can be packed in a picture as the quote says “A picture’s worth a thousand words”, and it’s better to show than tell because our brain can interpret an image faster than text. Our brain is designed to perceive the world visually, and that’s what we crave.
When used right, images can make miracles, they can help you manipulate feelings and emotions. But only when used right.
Image file formats
Every graphic you see online is an image file. Most everything you see printed on paper, plastic, or a t-shirt comes from an image file. These files come in a variety of formats, and each is optimized for a specific use. Using the right type for the right job means your design will come out picture-perfect and just how you intended.
Conclusion
In conclusion, mastering the art of design as a developer involves understanding various aspects including layout, scale, balance, and typography. It's about learning to find inspiration, effectively using color, and selecting the appropriate images and formats. It's a multidisciplinary journey that not only enhances the aesthetics but also improves the user experience of your work. Remember, it's not about sticking to what you already know, but about exploring and integrating new disciplines to create a harmonious blend of functionality and design.
