All Things Design Part I: The Beginner’s Guide

Designing might not be a skill you were born with, but definitely a skill you can master with practice and self-learning. Consider design as a means to solve real-world problems, and as a designer, you keep finding effective solutions.

More often than not, folks who are just starting out on their journey to become a professional UX  and/or UI designer (especially the ones who are self-taught) become confused with what to pick up on. As a beginner, the first step is to avoid bombarding yourself with tricky concepts & principles and just concentrate on the basics.

Part I will help you target the most important aspects of design as a beginner.

Using grid systems to achieve an organized layout

A grid is a structure consisting of multiple intersecting lines (vertical, horizontal, angular, or curved), serving as a framework for arranging graphic components within a layout in a coherent manner (among other things for other domains such as print media, etc).

Thanks to technological advancement, people are now consuming content through devices of varied dimensions — mobile phones, notebooks, laptops, etc. And while the human eye is easily drawn to graphic elements, it gets equally disappointed in not finding things where they are supposed to be. Judicious implementation of grids helps guide users to the information they want to view, essentially creating a visual map for treading through content.

Grid systems also determine the size of aspects such as the width of a column text, line height, image padding, word spacing, placement of identical elements, and so on. As a result, it imparts a better flow to the content (textual or graphical), making it more comprehensible across devices.

Constructing Visual Hierarchy with spaces and margins

Visual Hierarchy is the designer’s attempt to arrange components in a way that will draw a user’s visual attention the most. It is relatively a guide that defines the order in which the human eye discerns information. Several factors determine how the hierarchy of content is ranked within a layout: white space (or negative space), margins, opacity, and position.

White space and margins are the most fundamental attributes to grasp onto and largely determine how readable or comprehensive a piece of design is. Proper use of white space between paragraphs and around the margins enables readers to focus easily on content.

Spacing further impacts visual hierarchy in two ways: proximity and white space. Proximity indicates an element’s functionality using mere visuals. White (or negative) space signifies all those areas in a layout that are free of graphic elements. It prevents clutter and offers the eye with a visual breathing room. A right balance between negative space and content also helps drop the spotlight over crucial elements that you want the users to focus on.

For a detailed comprehension of visual hierarchy:
https://www.canva.com/learn/visual-hierarchy/

Putting Heuristic principles into practice

Although Jacob Nielsen’s principles on interaction design are based on practice rather than theory, they still hold an upper hand in the creation of practical, engaging, and intuitive design. And since you’re just starting out on your journey, this is the perfect time for you to learn through practice. Here are the 10 principles of Nielson’s heuristics:

Visibility of system status – Users should always be informed about what is going on with the system through relevant feedback within a reasonable period of time.

Match between system and the real world – The system should communicate using words, phrases, and concepts that are familiar to users, rather than system-oriented language. Following real-world conventions ensures that information appears in a logical order, which in turn makes it a seamless experience for users.

User control and freedom – For situations when users mistakenly choose a system function, there should be a clearly marked “emergency exit” for them to leave the unwanted state without having to go through an extended dialogue. It is therefore essential for systems to support undo and redo.

Consistency and standards – Platform conventions should be followed so that users do not end up wondering whether different words, circumstances, or actions mean the same thing.

Error prevention – A prudent design is always better than a good error message to prevent faulty action in the first place. Even if a flaw slips by, the system should provide users with a confirmation option before they execute an action.

Recognition rather than recall – Users should not have to memorize information while switching from one part of the dialogue to another. Usage instructions should be visible or easily accessible when required. When objects, actions, and options are made visible, it automatically minimizes the user’s memory load.

Flexibility and efficiency of use – Accelerators undetected by new users may often speed up the interaction for expert users. Hence the system should be able to cater to both inexperienced and experienced users and allow them to modify frequent actions.

Aesthetic and minimalist design – Dialogues should not carry irrelevant or rarely-used information. Every extra piece of unnecessary information competes with the relevant ones, in turn, diminishing their relative visibility within a dialogue.

Help users recognize, diagnose, and recover from errors – It is crucial for error messages to be expressed in simple language, precisely indicating the issue, and effectively suggesting a solution.

Help and documentation – It is never wasteful to create a user guide. Any form of documentation should hold information that is easy to search, focused on the user’s perspective, and lists to-the-point steps that are required to be carried out.

Learn more about Nielsen’s heuristics:
https://www.nngroup.com/articles/ten-usability-heuristics/

Creating static prototypes of your work

A prototype is a basic model of a mobile or web application that is created to scout, explain, and test user flow concepts within the least possible timespan. Prototyping is the successive step to wireframing in product design. Prototypes usually showcase colored static figures, each of which has a sketch of the UI.

Apart from presenting a piece of design, static prototypes offer a lightweight way of making wireframes or visual components interactive for the purpose of usability testing.

While the simplest way of prototyping is by using pen and paper, hard copies of work are inconvenient to store and more sensitive to damage. Applications like Adobe XD, InVision, and UXPin enable convenient prototyping minus the hassle.

Basic knowledge of HTML, CSS, and JavaScript

HTML lets you frame the basic structure of web content, which can be enhanced and modified by technologies like CSS and JavaScript. Consider HTML as the canvas and CSS the paint that imparts all colors, fonts, and background elements to the site layout.

JavaScript on the other hand is used to control the behavior of different elements. Supported by all modern web browsers, JavaScript is used on almost every site to realize complex functionalities right from creating confirmation boxes and triggering slide-in call-to-action (CTAs) to developing interactive games, animations, and special effects. As a designer, having the knowledge of JavaScript will not only allow you to make the static elements of your site interactive but also keep you a notch up in the competition. Moreover, such concepts are essentially design tools and make coordination with the development team much more seamless when you are working on a project!

When it comes to learning, there are tonnes of rules and concepts to go by. But it is important to lay the foundation right before moving on to the next level. For now, get a good hang of the basics and continue your hand on awesome designs. Also, remember that design is an art in itself. There’s always room for experimenting and allowing your own creativity to shine!

Graphic credits: https://www.freepik.com/