DESIGN DELHI [WORKSHOP] -Design for Developers

Another workshop of Design Delhi, in association with my HQ workspace, was conducted in Gurugram on 29 July 2017. 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.

Design Delhi Workshop

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 learnings of the workshop:

Understanding the Context 

While designing any interface one must understand the user needs and the objective of the project. You can gather a list of the functionality required by the system to achieve 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 FrameWork
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- Heatmap samples

Websites and their heatmaps of user eye tracking. The Red color indicates places where user looked the most; the yellow areas indicate comparatively fewer views, after that there is the least-viewed area that is colored blue. 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 found in nature and when used in the design it fosters organic and natural looking compositions that are aesthetically pleasing to the eye. It is basically a mathematical ratio. 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/

Golden ratio in design

Rule of Third

Imagine breaking an image down into thirds (both horizontally and vertically) so that you have 9 parts, this is the basic principle behind the rule of thirds. Rule of third states that if you place points of interest in the intersections or along the lines then 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 the platform of your choice. You can also use some free tools like Moqups, Canva to develop framework digitally. One must start with working in the 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. Remember that you are designing a website for highly mature internet audiences, who understands the message of the image when they see one and who hate irrelevant, low-quality imagery. A bad image choice can 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 a signboard. 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?

Text importance in images

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

Overlay the whole image

Overlay the whole images

 

Text inserted in a box                                                                                           text inserted in a box

Blur the Image

blur the image for designblur the background for focus

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/

Double your White Space- Increase the Breathing Space

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 a particular industry. Also one must know about the cultural barriers around the globe 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 awesome 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 events, 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!

To find out about the services we offer, visit UX Gorilla Click here
+ +