How is a Design Made at CodeChef-VIT: A Practical Handbook

Most of you would be wondering, what goes behind the scenes in making a design? What should one keep in mind while making a poster or be it a website design? Don’t worry, we got it all covered for you! This blog covers my experience over the years of pursuing design, hence the name “A Practical Handbook.”

Introduction to Design

Design is not only limited to art. It is a science as well. The science of focus, the science of thinking. How does the viewer perceive the design? Is the right focus being given to the important features? Is the text readable? All these as well as other questions are based on 4 fundamental pillars, Human Psychology being at the center of each of them. In design, human attention is everything, partially because of the reason that humans have a short span. A good designer makes things easy for the user so that he/she won’t have to think much. In the book “The Design of Everyday Things”, Don Norman says:

Good design is invisible. Its goal is to guide users effortlessly to the right action at the right time.

We at CodeChef-VIT focus on this and try to produce good designs, something new and unique every time. But before explaining how work goes behind the scenes, time for a quick theory lesson!

Gestalt’s Principles of Design

Gestalt Psychology is broken into 7 principles, all based upon the fact:

People interpret ambiguous or complex images as the simplest form(s) possible.

They are the basis of UI/UX design, especially while designing apps and websites. Every designer needs to know about them since they teach quite a lot about how the brain perceives stuff. They are:

1. Principle of proximity: It basically means that we see objects that are close to each other as more related than objects that are far apart. Visually, distance defines relatedness. Objects that are close together are seen as related, while objects that are far apart, well ….. aren’t.
2. Principle of closure: The Human Brain works in such a way that whenever we tend to see a complex arrangement, we look for a single, recognizable pattern. We’re always trying to bring meaning and order to meaningless chaos (sorry but not talking about your previous relationships sadly), and our eyes do that by filling in missing data to make sense of something we see.
3. Principle of similarity: It states that when things appear to be similar to each other, we group them together. Our brain is hungry for uniformity, and thus we tend to do this by seeing elements that share characteristics as more related than those that don’t.
4. Principle of continuity: It states once the eye begins to follow something, it will continue traveling in that direction until it encounters another object. It is because we see elements that are on a line or curve as more related than elements that aren’t on the line or curve.
5. Principles of perception/Figure-Ground relationship: People instinctively perceive objects as either figure (the focal point) or ground (background). The figure is the object or person that is the focus of the visual field, while the ground is the background. The focal point is whatever stands out visually will capture and hold the viewer’s attention first.
6. Principle of organization: In this, there are five principles that fall under the umbrella of organization: uniform connectedness, common regions, common fate (synchrony), parallelism, and focal points.
7. Principle of Common Region: The principle of Common Region is highly related to proximity. It states that when objects are located within the same closed region, we perceive them as being grouped together.

You can read more about all these principles in detail over here!

Understanding the Grid Anatomy

Grids are very essential to design as it helps align elements sequentially based on rows and columns. It lays out a detailed framework for a page’s layout and provides an answer to “what goes where”. It makes it very easy for designers to collaborate on designs by providing a plan for where to place elements. Grid systems help to decouple work on interface design because multiple designers can work on different parts of the layout, knowing that their work will be seamlessly integrated and consistent.

Grid layout in design by Manabie Tech

Most designers as well as many popular frameworks use a grid system of 12 equal-width columns. The number 12 is the most easily divisible among reasonably small numbers; it’s possible to have 12, 6, 4, 3, 2, or 1 evenly spaced columns. This gives designers tremendous flexibility over a layout.

The Grid anatomy is explained is very well in a blog by Elementor.

8-Point Rule

The 8-point rule, popularly also known as the 8-Point Grid is more of a continuation of the Grid System mentioned above. In a gist, it tells you to use multiples of 8 to define dimensions, padding, and margin of elements. Do check out this article by Spec.fm to get a better idea of how this is done. You can also refer to this article by UX-Planet.

4 Golden Rules of UI Design

As the name suggests, this is mostly related to UI Design and is one of my personal favorites. It basically says:

1. Place users in control of the interface
2. Make it comfortable to interact with a product
3. Reduce cognitive load
4. Make user interfaces consistent

You can read more about the 4 Golden Rules of UI Design in detail on Adobe XD’s blog page. These are based on Ben Shneiderman’s The Eight Golden Rules of Interface Design.

Design at CodeChef-VIT

Well, now enough with the theory lectures. Let’s get to the fun part!

Our Design team at CodeChef-VIT is a close-knit team of designers striving every day to produce good and meaningful designs. At CodeChef-VIT we follow the system of Continuous and Progressive Feedback. We have different stages of how designs are made in our design house, lets have a look at them in the form of an interesting flowchart!

We sit down together, brainstorm together. This is usually done with some prior research. We have regular design meetups and occasional 2-hour design sprints, where we discuss and pitch our ideas, no matter how random they are, vote on designs, come up with prototypes and crack a few jokes here and there to keep the mood light. We also keep regular internal workshops and peer sessions where we teach each other something we are particularly skilled at.

During the process of making designs, we frequently provide detailed feedback to our peers at every stop. This comprehensively helps us address the flaws associated with a particular design, remain transparent about our designs, as well as welcome any sort of constructive criticism. After designs are made, we tend to get a final review by the entire CodeChef-VIT team before pushing it out.

In the midst of all this, who says we don’t have fun? We have regular music jam sessions on Discord where we are listening to songs while making these designs. Sometimes after work is done, we even watch movies together, or perhaps treat ourselves to a few rounds of Skribbl, AmongUs, Krunker, or other fun multiplayer games on the Internet!

Conclusion

TL;DR? No worries! Summing it up in a gist, design is an art as well as a science revolving around human psychology, with a few basic yet very easy-to-understand principles governing it. At the end it should be able to answer 3 points, “Why, What and How”. In design, Practice is very important, as it requires a lot of honesty and diligence to become a good designer. After all, practice is what makes a man perfect.

Hope you enjoyed reading this blog and found it insightful. If you would like to read more about the theory of design, I’m dropping you a few materials worth reading in your free time!

• Jakob Nielsen’s 10 Usability Heuristics for UI Design
• Ben Shneiderman’s The Eight Golden Rules of Interface Design
• Bruce Tognazzini’s Principles of Interaction Design
• The Design of Everyday Things, by Don Norman
• Design Thinking, Interaction Design Foundation
• Apple’s Human Interface Guidelines (for UI/UX Design only)

In addition to this, feel free to reach out to us if you need any help, would like to know more about this field, or have already finished reading the above and want more to read xD. We have plenty of stuff in-store to help you out with and help you become proficient in no time!