From Web Development To UI/UX Design - The Fundamentals A Developer Should Know
Tags: ux, design, ui, webdev
Published: 2020-06-21 05:23:01

**Why Most Web Developers Struggle To Understand Design**

Design is fundamentally an intuitive skill.

It rests primarily on a foundation of feeling, with some knowledge to back it up.

Programming is the opposite.

The fundamental problem for programmers approaching design is in _how_ they approach it. 

It’s a difference in style of thinking. One that requires a developer to not only learn new fundamentals, but to begin to think more intuitively about problems than they are probably used to.

Because this is a style of thinking that is relatively unfamiliar to a developer, the way in which it is taught must be wise.

The most wise method of approaching new knowledge in general is with a [constructivist](https://fromtoschool.com/why-most-programming-tutorials-are-so-hard-to-understand-and-a-solution-to-this-problem/) style.

This style of teaching begins the construction of new knowledge by first starting on a foundation that is already there.

For developers, this foundation would by definition be a logical one.

The most logical, and ironically, most ignored aspect of the design process is the _information architecture_ that a design ultimately springs from. 

I also believe that it is the most powerful concept that a developer can learn on their journey towards becoming a competent designer. 

**Information Architecture - The Secret To Understanding Design, For Developers**

When we talk about information architecture, we are literally talking about the fundamentals that underpin a design. Design is, in essence, the organization of information, so that it may best be used for whatever purpose its organized product has. This organization happens according to logical principles, but it is done in an intuitive way, based on experience.

Information architecture then, is the description of _how_ we organize that information. 

There are various ways of doing this, based on various different use cases, and this can be explored in more depth [here](https://uxplanet.org/information-architecture-basics-for-designers-b5d43df62e20).

But for the purposes of this article, we will simply focus on our definition above.

The value of understanding information architecture for a developer, particularly one who is trying to better understand design, is that in understanding it, it gives a developer a tool that allows you to create effective designs, without much of the initial intuitive knowledge that more experienced designers have.

With an underpinning of information architecture serving as the foundation of your knowledge structure, the subsequent design knowledge and experience that you gain on top of that will be that much more effective when used. And will also be easier to learn.

**How Developers Can Approach The Learning Of The Design Process**

Once a firm grounding in information architecture has been gained, a developer's next steps will involve an iterative loop of both gaining knowledge of design fundamentals, along with a consistent practice of design.

Let’s first dive into what the fundamentals of design are, and then once we’ve grasped that, delve into some of the consistent habits that can be adopted in order to develop a strong design intuition.

**The Fundamentals Of Design - 4 Basic Principles**

In general, there are only 4 basic principles of good design that are universal across domains. They all, apart from the last principle of contrast, serve to bring a design ‘together’, in order to create a consistent product.

**<span style="text-decoration:underline;">They are</span>:** 

**Proximity** : Items that are related to each other should be indicated by being grouped close to each other. When items are placed in close proximity, they become one visual unit rather than several separate units.

**Repetition**: Repetition of visual elements within a design creates consistency, which further emphasises the unity of a design. You can repeat colors, shapes, textures, spatial relationships, line thicknesses, fonts, sizes, graphic contents etc. These all work to add to the consistency of a design piece.

**Alignment**: How different elements on a page line up with one another helps to create a connection between those elements, which adds to the unity of a design. Every element within a design layout should have some visual connection with another element on the page.

**Contrast**: The idea behind contrast in design, is primarily to draw attention to relevant elements on a page by making them distinct. If the elements are not the same, then they should be differentiated in order to make them different. This can be done with any of the sub-elements of design, such as color, shape, texture, etc. Contrast is often the most important visual principle on a page, as it is what primarily grabs a users attention, and ultimately, allows them to navigate a page.

**Consistent Habits That Help To Develop A Design Intuition**

All of the following, apart from the actual creation of a UI, which is actually one of the most important practical aspects of getting better at design, can be grouped together and referred to as [UI/UX planning](https://planflow.dev).

Ideally, you want to apply these habits within the context of creating something that solves a problem that you yourself have.

**<span style="text-decoration:underline;">They are (each with a link that goes into more detail on how to do it)</span>:**



*   **[Creating Information Architectures](https://www.youtube.com/watch?v=Ytv21Jx0hD4)**
*   **[Site Mapping](https://www.youtube.com/watch?v=xVgepwWXgVo)**
*   **[Wireframing](https://www.youtube.com/watch?v=PmmQjLqJQlY)**

    **[Designing Or Redesigning Vector Graphics](https://www.youtube.com/watch?v=B_KeOTlDdSQ)**

*   **[Creating UI Layouts With both UI design tools](https://www.youtube.com/watch?v=3q3FV65ZrUs) as well as with [CSS And/Or CSS Frameworks](https://www.youtube.com/watch?v=UBOj6rqRUME)**

**Conclusion And Summary**

Whether learning to design for a developer is possible or not is ultimately dependent upon whether or not a developer has the right learning style. 

In this article we’ve gone over the reasons why beginning with a logical approach, via information architecture along with knowledge of the fundamentals, and then gradually progressing towards a more intuitive understanding via practice, is the most useful way of learning design. 

I hope that this has helped to shed some light on the process for you, if you are developer who is currently trying to grasp design. 

Good luck in the process, and let me know in the comments if you have any questions or anything else to add!

--
This article was originally published on the [FromToSchool](https://fromtoschool.com) blog.