DESIGN DELHI [WORKSHOP] -Design for Developers

Design Delhi, in association with my HQ workspace, conducted another workshop in Gurugram last week. This workshop was for the developers who wish to create a better experience for their users with a basic understanding of design. Developers are great at writing code that machines understand. We believe making something for the machines is easier than making something for the humans. There are some simple but make-or-break rules every developer should know while creating interfaces.

I would like to thank all the participants and organizers on the success of this workshop.

IMG_2527

This workshop was in continuation to our interactive session organized last month on learning the basic principles of design, one must know while creating interfaces. In the previous session we learned about elements like understanding User persona, Research including design elements like Color, Typography, Spacing, shadows.

We tried to actually apply these aspects in our workshop while giving a problem statement to the participants and developing a digital interface for their users. In this 3 hours workshop our objective was to take the participants through the process of creating a web page while keeping design basics in mind.

The Participants were free to use any platform of choice. We had people from different industries who were keen to understand the critical know how of these elements. They shared their working experience while working on interfaces throwing light on the importance of design.

There were many key learning’s of the workshop:

Understanding the Context 

While designing any interface one must understand the user needs and the objective of the project. You can assemble a list of the functionality required by the system to accomplish the goals of the project and the potential needs of the users. You must be able to answer the following questions:

a. Who is your User?

b. Why would the user come to your page?

c. How is your product/service adding value to the user?

d. What is the goal of your page?

 Secondary Research

An important aspect of research includes learning about what your competitors did. You must go through at least 10 similar interfaces and try to find the common patterns in terms of Typography, color or any other design element. This is a good trick for beginners to understand why particular element has been used and how one can improvise on it.

Designing Rough Frame Work

Before developing an actual framework, it is advisable to design a rough wireframe of the interface. This saves you from looking into the knitty gritty of the technical details and you can focus on the actual functionality.

While drawing , always remember to focus on these elements:

design-for-developers
Other important topics that were discussed are:

Navigation

Whether it is a scurrying movement in the corner of your eye or a sexy walk from someone across the street, the human eye is drawn automatically to certain points of interest. While some of this depends on the person, the majority of people tend to follow definite trends — including how they view a web page.

f_reading_pattern_eyetracking

Heat maps from user eye tracking studies of three websites. The areas where users looked the most are colored red; the yellow areas indicate fewer views, followed by the least-viewed blue areas. Gray areas didn’t attract any fixations. You can read more about these from below given links:

https://webdesign.tutsplus.com/articles/understanding-the-f-lahttps://webdesign.tutsplus.com/articles/understanding-the-z-layout-in-web-design–webdesign-28

Golden Ratio

The Golden Ratio is a mathematical ratio. It is commonly found in nature, and when used in design, it fosters organic and natural looking compositions that are aesthetically pleasing to the eye. But what exactly is the Golden Ratio and how can you use it to improve your own designs? Read more about Golden Ratio at https://designschool.canva.com/blog/what-is-the-golden-ratio/

rsz_national_geographic_web

Rule of Third

The basic principle behind the rule of thirds is to imagine breaking an image down into thirds (both horizontally and vertically) so that you have 9 parts. The theory is that if you place points of interest in the intersections or along the lines that your photo becomes more balanced and will enable a viewer of the image to interact with it more naturally. Read more here : https://digital-photography-school.com/rule-of-thirds/

Designing the Mockups

Once the framework is finalized on paper, you can develop the same digitally through platform of your choice. You can also use some free tools like Moqups, Canva to develop framework digitally. One must start with working in black and white screen while designing the interface as colors are the major distraction that can easily take you away from other elements.

Finding images

Visuals have always been a powerful means of communication. . You are designing a website for highly mature internet audiences, who can identify a common stock image when they see one and who are put off with irrelevant, low quality imagery. A bad image choice has the potential to ruin your website in more ways than one. It negatively impacts UX and UI, the website conversion ratio and also its credibility. If possible ,put the self clicked image as they are original and more relevant to the message you actually want to convey.

Writing Text and context

An image without text is as dangerous as a road without sign board. It will be perceived in different ways by different viewers and might confuse some.  So how do you put up a text on an image?

1-cZFET5UcuL6rjVWkwqoK_A

Here are some best practices followed to place image and text together:

Overlay the whole image

upstart

 

Text inserted in a box                                                                                           tradestone

Blur the Image

1-mC1oHWTKlRqOZ-ra3sLh-Q8-preview-opt

Double your White Space- Increase the Breathing Space

Most of us like our space, of course. And that often even extends to our websites. A crowded, dense site can be an immediate turn off to visitors. Read more: https://premium.wpmudev.org/blog/wordpress-white-space/

music_archive

There are other details like choosing the right typography and colors that one should read about before actually designing the interface. An important learning is that one must start observing and noticing these design elements around various digital mediums coming across you and try to identify similar patterns being followed within particular industry. Also one must know about the culture barriers around the global while developing any interface. For example a particular color may be celebrated in one part of the country while it may signify something evil in another area. For beginner’s, one can start with simple black and white colors or monochromatic scheme instead of experimenting with multi-colors.

uber-screenshot

These basic details are essential for any developer who wants to design an aussum interface. We are going to conduct many of these workshops in the future. If you would like to volunteer, participate or speak, at any of our upcoming even, shoot a mail to [email protected] with Design Delhi in your headline. Also, subscribe to our meetup group to not miss any future event.

Cheers!