If you're looking for a book that will teach you how to design beautiful websites and interfaces, look no further than Design for Hackers by David Kadavy. In this book, Kadavy breaks down the design process into simple, easy-to-understand concepts that even the most novice of designers can understand and apply to their own work.
With clear and concise explanations, Kadavy covers everything from choosing the right colors and fonts for your project to understanding grid systems and layout. He also provides helpful tips and tricks for making your designs stand out from the crowd. Whether you're a seasoned developer or just getting started in web design, this book is a must-read.
The Application of Composition
Here are a few of the most popular and well-known compositions techniques I’m thinking about since reading Design for Hackers by David Kadavy.
The Golden Ratio
The golden ratio is a mathematical concept that has been used in art and design since the days of the ancient Greeks. It is based on the idea that there is a perfect proportion between two things, and that this proportion can be found in nature.
We often assume that simply aligning an object center is good enough for proportional representation of two objects. But I’m sure that only is true when the current ratio happens to be fraction of the golden ratio. In reality, we like when there is a bit of scenic difference between these elements.
The golden ratio can be represented by the following equation:
a/b = (a+b)/a
So, if a is the length of one side of a rectangle, and b is the length of the other side, then the ratio of a to b will be equal to the ratio of (a+b) to a.
In other words if you add the length of one side to the length of the other, and then divide that sum by one of the sides, you will always get equal to the ratio of the other side to that side.
This ratio is approximately 1.618, which is found in the Fibonacci sequence and considered the most pleasing to the eye.
As you might remember from high school, the Fibonacci sequence is a series of numbers in which each number is the sum of the previous two. The first two numbers in the sequence are 0 and 1, and the next number in the sequence is always the sum of the previous two.
This ratio often found in nature, such as a sunflower, because it is one of the most efficient ways for a plant to pack its seeds.
The Fibonacci sequence has many applications in mathematics, art, and nature. The golden ratio can be used to create pleasing compositions in art and design. For example, if you divide a page into two unequal parts, such as a header and footer, you can use the golden ratio to determine the ideal width for each section.
(Magically, stock traders applying technical analysis are also drawn to the 1.618 ratio because of the Fibonacci numbers and look of this sequence. But this takes advantage of the human eye's tendency to see patterns in random data simply because they are aesthetically pleasing.)
The Rule of Thirds
The rule of thirds is another way to create pleasing compositions in art and design. It is based on the idea that our eyes are naturally drawn to certain points in an image or composition. It’s a guideline that suggests dividing your image into nine equal parts using two vertical and two horizontal lines.
By doing this and then placing your main subject at one of the four intersections or along one of the lines. you create more balanced images by making sure that your subject doesn’t take up too much space in the frame.
You might be familair with this grid this from your smart phone camera. This technique helps you to use negative space to create more visually appealing photos. The idea is that the most important elements in the scene should be placed along these lines or at the intersections of these lines.
| 1 | 2 | 3 |
|---|---|---|
| 1 | ||
| 2 | ||
| 3 |
You can apply this technique in UX/UI to help you to create more balanced and harmonious designs. It can also help you to focus the user’s attention on the most important elements on the screen.
Leading lines
Leading lines are another popular composition technique that can help you create more visually appealing images. It involves using lines to lead the viewer’s eye toward your main subject or a specific part of your image.
There are many different types of lines that you can use, including straight lines, curved lines, diagonal lines, and zigzag lines. You can also use other elements like color and texture to create leading lines.
We oftentimes find ourselves drawn to certain areas of an image, like roads, skylines or beached. But I have a feeling what attracts our attention to these pieces are leading lines.
Here are some examples of leading lines:
- A path through a garden.
- A road leading to a mountain in the distance.
- A river winding through a valley.
- The edge of a cliff overlooking the ocean.
And here are 4 examples of how you can use leading lines in UX/UI:
- Guide the user's eye to the main call-to-action on a page.
- Draw attention to important information or content.
- Create a visual hierarchy on a page.
- Guide the user through a step-by-step process.
Frame within a frame
The frame within a frame composition technique involves using elements in your scene to create a frame around your main subject. This can be done by using doorways, windows, arches, or any other type of opening.
In this photo, the photographer has used a window to create a frame around the main subject. The subject is in the center of the frame and is surrounded by the window frame. This creates a sense of depth and dimension in the photo.
The frame within a frame technique can also be used with other elements in the scene, such as trees, branches, or even people.
In this next photo, the photographer has used branches to create a frame around the main subject. This gives the photo a sense of stillness within a background of movement and energy.
The frame within a frame technique is a great way to add depth and dimension to your photos. It can also be used to create a sense of movement and energy. This translates to UX/UI because it helps you to create a visual hierarchy in your design. It can help you to focus the user’s attention on the most important elements on the screen.
Color and light
Color is one of the most important elements in both photography and design. It can be used to create a certain mood or atmosphere in a scene. It can also be used to draw the eye to certain elements in the scene.
Light is another important element in both photography and design. It can be used to create a certain mood or atmosphere.
In this photo, the photographer has used color and light to create a sense of warmth and energy. The orange and yellow tones of the scene make it feel lively and exciting.
Likewise, color and light can be used to enhance the way our users interace and most importantly the emotional connection they have with our apps and products.
Review
Design for Hackers is a book that teaches the reader how to design beautiful and user-friendly websites and apps. The book starts by teaching the reader the basics of design, including typography, layout, and color theory. The book then moves on to more advanced topics, such as responsive design, user experience design, and web performance optimization. Throughout the book, Kadavy provides practical tips and tricks that readers can use to improve their own designs.
Overall, Design for Hackers is an excellent resource for anyone who wants to learn more about web or app design. Kadavy's writing is clear and concise, and his tips and tricks are easy to follow. If you're looking to improve your own designs, or if you're simply interested in learning more about the subject, this book is definitely worth checking out.