A simple design process for developers or non-designers 🤔🎨
Tags: webdev, career, beginners, design
Published: 2020-01-14 12:18:46

<h4>Hello, users! 👋</h4>

Today I want to share a **design process** and **some resources** with you all, in case you still don't know **how to face** a big/medium design project.

In this example we'll design some screens of a simple **CMS**, which I think is a pretty common design case in the web-dev community.

<h2>Setting up the environment</h2>

I'll be using **Adobe XD** (since it's totally free) and the "Web" option as you can see below:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/dianji6apw1g7ua04sfb.PNG)

If you're using **Sketch**, **Photoshop** or any other software, the **sizes of the document should be** 1920x1080, the standard for a web screen.

<h2>Our (dummy) client</h2>

If you have the chance to speak to your client be sure **you know what your client wants**.

As for this example, we have the following:

Our client, Pablito, wants a **CMS** to manage the pictures and videos of his bakery, he also wants to write/edit articles, and also he'd like to post all that content to Twitter and Facebook through the CMS.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/xu3rabkucv0y6aihtg8m.PNG)
<figcaption>This is Pablito. He's a nice man, he's willing to work with you as soon as possible.</figcaption>

So let's enumerate the **features of our project**, one by one.

What will be the **content** of our platform?
➜ Images
➜ Videos
➜ Articles

What will be the **features** of our platform?
➜ Log in; Log out.
➜ Upload images; Delete images; Post images to social media.
➜ Upload videos; Delete videos; Post videos to social media.
➜ Create articles; Edit articles; Post articles to an external blog.

All right! Next step: investigation.

<h2>Do not reinvent the wheel</h2>

Most people when trying to design something are totally blank, **how is that possible**? Design is not magic, **Everything** on the internet has a design, search for it!

In this case we'll be creating a **CMS**, so we need some inspiration. You'll find inspiration in:

➜ Pinterest:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/xsocxlc5rintdi4zqkd3.PNG)

➜ Bëhance:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/8iwl1heidn6hw8xhqq78.PNG)

➜ Searching competence:

Do not skip this step. Just type "cms" in Google and start going through different cms, Wordpress, Wix, Joomla, Drupal. Go on, search for it and see how they did what they did.

<h2>Sketch up</h2>

I'ts time to get **pen and paper** and start sketching up the ideas you have. My advice is to get a **little notebook**, it's better to sketch small ideas, if you have a lot of space you won't focus.

I want to show you some sketches I did:

Login:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/48s90wrxkh4qvgioheh4.PNG)

Home screen:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/teh2qi0mipvb4bgnks9g.PNG)

Images screen (will be reused for the videos and articles screen):

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/nzw29nd0zlsw2lve7e3a.PNG)

Modal to post/delete content:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/grawj4d3dz6vs6n3e06z.PNG)

Article writing/editing:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/5tqvfvh4umxbihjvr1n2.PNG)

Sidemenu:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/bpwhbz0mqe5u160fsdrg.PNG)

If you'd like to show your sketches to your client so he/she can give more ideas or just to get the approval, go for it.

<h2>Design. But in gray scale.</h2>

We haven't said anything about colors, and we won't until we create our design.

It's time to make our sketches digital. Pick a software and let's go for it. We'll follow simple guides of design, but if you'd like to have some in-deep advices of **how to design with usability and accessibility** you can check my <a href="https://dev.to/helleworld_/why-usability-and-accessibility-matters-in-design-4i8k">article, where I give you 5 advices</a>.

Why design in gray scale? Because then we'll be able to **focus in the content and how/where we place our elements** instead of focusing in the aesthetic side.

<h3>1st step: a grid</h3>

We won't get in-deep about **grids**. They are useful and necessary to place and position our elements inside the design. You can create your grid as you'd like to, here's mine for this example:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/n3nzy6hogkr8j4zmmkm5.png)

I created it like this: creating a **simple line in the right middle** of the document. Then copy&paste it in the right side, over and over again. You can make the lines as far as you want to from each other.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/avtegxi4hugbklqdc6bi.PNG)

Just copy-paste it in the other side to make it symmetrical.

<h3>2nd step: place the elements.</h3>

I won't make all the screens I sketched because that'd make the article too long. Here are some samples with and without the grid:


Home screen:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/l61e6jpjrnndcrq1xz4m.png)

Images screen:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/lzrtg53ogiyw0pcpk7pj.png)

Screen modal:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/q6ep31sxzhcgxzz6ccbw.png)

As you can see, I only use grays. I don't even use black. In case you'd like to highlight a color or a part of the design, use different types of grays.

<h2>Colors. Finally.</h2>

Okay, it's time to color our designs.

We won't get in-deep in the color palette and color theory. You should get in mind that the "ideal" palette should include: a primary color, a secondary color and a 'highlight' color. If your client has a logo and a brand, the palette should reflect those colors.

Let's say Pablito, our client, doesn't mind the colors you use. If you don't want to invest time in the creation of a palette, you can check <a href="https://colorhunt.co/">this page</a> and get a palette you like and that reflects the essence of the bussiness.

I'll get <a href="https://colorhunt.co/palette/167893">this one</a> and start doing some samples until I find a combination that I find comfortable.

Here's what I got in 3 samples:

Home screen:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/o6ngan1eb5m6ll0l44kl.png)

Login screen:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/u7jcp1k8rpfzb4pg253p.png)

Images screen:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/m8jmg0y2okez9u1f52u9.png)

In case you're wondering, I did all the icons in Adobe XD, but you could use any external resource if needed, and got all the images for free in <a href="https://unsplash.com/">Unsplash</a>.

<h2>So that's it!</h2>

Let's summarize the process:

📌 Setting up the environment.
📌 **Identified** the project's **content** and **features needed**.
📌 Investigated **examples, inspiration and competence**.
📌 **Sketched up** some designs with pen and paper in a little notebook.
📌 Digitalized those sketches in a **gray scale** and with a simple **grid**.
📌 Creating a **palette**.
📌 **Color** the digital sketches, make final **decorations and fixes**.

<h2>In conclusion</h2>

Designing is a complicated process, but figuring out some few steps before jumping into positioning and colors will make your process **easier and faster**.

How would you design the content if you don't know the content? You'll start just *guessing*? Or, moreover, how would you plan your screens (*sketches*) if you don't even know the **features** that the platform will have?

My last advice, but not less important: design is not about **looks**, design is about **information**. **Everything** you're designing is about **information**. Without it, **design is just...**

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/hqi6dir1l5ng9ionlxb7.png)

**...nice color and shape positioning.**

I hope this could be at least a bit useful for you, thank you for reading until the end!

See you around and let's keep coding 💻!

<h2>Complementary to this article</h2>

Hello again!

Since I haven't explained anything in deep, here you'll find useful resources:

<a href="https://visme.co/blog/layout-design/">About Grids</a>
<a href="https://trydesignlab.com/blog/how-to-choose-the-right-font-for-your-design/">About Typography</a>