loading...
Cover image for A simple design process for developers or non-designers ๐Ÿค”๐ŸŽจ

A simple design process for developers or non-designers ๐Ÿค”๐ŸŽจ

helleworld_ profile image Desirรฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ ใƒป6 min read

Hello, users! ๐Ÿ‘‹

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.

Setting up the environment

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

Alt Text

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

Our (dummy) client

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

This is Pablito. He's a nice man, he's willing to work with you as soon as possible.

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.

Do not reinvent the wheel

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

โžœ Bรซhance:

Alt Text

โžœ 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.

Sketch up

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

Home screen:

Alt Text

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

Alt Text

Modal to post/delete content:

Alt Text

Article writing/editing:

Alt Text

Sidemenu:

Alt Text

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.

Design. But in gray scale.

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 article, where I give you 5 advices.

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.

1st step: a grid

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

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

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

2nd step: place the elements.

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

Images screen:

Alt Text

Screen modal:

Alt Text

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.

Colors. Finally.

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 this page and get a palette you like and that reflects the essence of the bussiness.

I'll get this one 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

Login screen:

Alt Text

Images screen:

Alt Text

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 Unsplash.

So that's it!

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.

In conclusion

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

...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 ๐Ÿ’ป!

Complementary to this article

Hello again!

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

About Grids
About Typography

Discussion

pic
Editor guide
Collapse
leob profile image
leob

Fantastic article, this makes me think that the improbable might be possible - that I might actually be able to "do" some design! Well no sure thing but let's see, definitely gonna try this process.

(probably going for Figma because it's free and Adobe is too complex for me ;-)

Collapse
helleworld_ profile image
Desirรฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ Author

Thank you, Leob!

This takes effort, do not demotivate if you don't feel comfortable with your first designs, time will do!

Maybe I try to do some guides or tutorials about Adobe XD, nobody should fear it, it's very simple! Have a nice day and thank you again :)

Collapse
leob profile image
leob

You're welcome ... just checked Adobe XD, I see that they even have a free version, I thought that only Figma had that ... pricing for Adobe products is definitely better than it used to be back when there was just Photoshop for a whopping 1000 dollar ... looking forward to your Adobe XD article.

I've put a shortcut to this article prominently on my desktop because I REALLY want to start forcing myself now to finally do "design" before jumping into coding!

Thread Thread
helleworld_ profile image
Desirรฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ Author

Yes, Adobe XD is totally free!

Thank you Leob, I'll start thinking about that article, and thank you again for your amazing words!

Collapse
louisefindlay23 profile image
Louise

Personally, I found Adobe XD easier to get to grips with than Figma.

Collapse
michaelandreuzza profile image
michael-andreuzza

A lovely article, all the way.

I couldn't agree more.

In case you guys ate interested I am running colorsandfonts.com and I send every 2 weeks a newsletter showing how to apply a color palette to a design system.
You can see it here. colorsandfonts.com/newsletter.html

This is how it works.

Color Schemes.

The color schemes that we are gonna work on are based on the ones in Colors & Fonts. We are going to take a Design system and apply the chosen color
palette.

UI.

The color will be presented on a Design System including buttons, forms, inputs, and components.

Files.

An image will be provided to download and you will be able to copy to Figma. Also, you get a SASS and JS file with the variables to download from GitHub if you want to implement the colors right away.

I hope the color palettes are worth it for you guys.
reach me out here or twitter twitter.com/Mike_Andreuzza
have a great day everyone:- )
/Mike

It's all free !

Have a good day ans thank you for the wonderful post.

Collapse
helleworld_ profile image
Desirรฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ Author

Wonderful initiative, Michael!

It's very interesting, a great work, and thank you for your kind words :)

Collapse
michaelandreuzza profile image
michael-andreuzza

Thank you too. Have a great day !

Collapse
da5atar profile image
da5atar

I can safely say: It's the best post so far I've read on Dev.to. simple, concise and to the point. Very useful! Thanks

Collapse
helleworld_ profile image
Desirรฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ Author

Da5atar, thank you really much!

I hope it may come in handy for you in your next project!

Collapse
da5atar profile image
da5atar

I have followed different similar process when working with developers but never had a simple approach I could put in a quick-start doc...so yes I'll definitely want to use this :)

Thread Thread
helleworld_ profile image
Desirรฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ Author

I'm so glad to read that!

Happy I could help :)

Collapse
simo97 profile image
ADONIS SIMO

This is very clear and simple, thanks, personnally am developer, but i work alone most of time and most of the time i struggle to come out with a good UI by myself (even when i use templates); this process will be very useful for me.

thank you

Collapse
helleworld_ profile image
Desirรฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ Author

I'm really glad this process can help you with your designs!

In case you're struggling so hard and you'd like also to check some templates created with a very simple and easy to use css framework, maybe Bulma CSS woud be useful for you along with the templates it has.

Thank you for your words Adonis, let's keep coding and designing!

Collapse
simo97 profile image
ADONIS SIMO

Thank you. Actually this method of using grid while drawing is the most useful for me, the other problem that am having is related to proportions of items on the page (when creating the wireframe for exemple).

Thread Thread
helleworld_ profile image
Collapse
cayruro profile image
Carolina Rojas

Thanks!!

This post really help me to focus on the right option.

Saved it ๐Ÿ’–

Collapse
helleworld_ profile image
Desirรฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ Author

Thank you Carolina, I really hope it was useful to you! ๐Ÿ˜Š

Collapse
patryktech profile image
Patryk

Moltes grร cies! I've always wanted to learn to not be horrible at design. While I realize I'll never become an artist, this should still be very helpful while I try to work out my interface.

Any tips design tips when working with frameworks (e.g. Quasar, Vuetify)?

Collapse
helleworld_ profile image
Desirรฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ Author

De res, Patryk! ;)

I'm not familiar either with Quasar and Vuetify, but I am with Bulma css and its version for Vuejs Buefy.

You could always stick to the styles that a framework provides, even though I learned SASS and started adding my own styles to it. There's nothing wrong in making a great "mix"!

Collapse
arimagic8bit profile image
Ariadna Dรญaz

A really good article! I will use a lot of the things you said in it in my future projects.
I would like to use Adobe XD but sadly I work with linux and my free option is Figma (but I can't complain! ).
Hope to read more things from you :)

Collapse
helleworld_ profile image
Desirรฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ Author

Thank you so much Ariadna, trust me, Figma will work too!

If you have any questions don't hesitate to contact me. Best of lucks! ๐Ÿ™Œ

Collapse
itsgabsgarcia profile image
Gabs Garcรญa

Amazing post for beginners like me! Already saved it.

Collapse
helleworld_ profile image
Desirรฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ Author

Thanks and thanks for the corrections ๐Ÿ’–

Collapse
dshamilton profile image
Darren Hamilton

Great post, literally exactly what I'm looking for right now!

Collapse
helleworld_ profile image
Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

Wow. That's nicely explained with a great example. Thanks!

Collapse
helleworld_ profile image
Desirรฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ Author

Thank you Vaibhav, I'm really glad you liked the article!

Collapse
_shirish profile image
Shirish

Fantastic article, Desirรฉ.

This is by far the the best article on design prototyping i have read and enjoyed thoroughly.

Thank you for taking time to write it.

Collapse
helleworld_ profile image
Desirรฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ Author

Hello Shirish,

Thank you so much for your kind words and for taking your time reading the article, I hope it was helpful to you, have a nice day :)

Collapse
madza profile image
Madza

Always keep in mind the rule of thumb: Content is King ๐Ÿ‘‘

Collapse
ryansmith profile image
Ryan Smith

Very well explained. Great post, keep it up!

I also noticed a small typo on "usabilidy".

Collapse
helleworld_ profile image
Collapse
kevinhch profile image
Kevin

Great post, when I was studying, a teacher give us a massive bunch of docs about design, but for me was impossible to understand something, this post has all you need to know.

Collapse
helleworld_ profile image
Desirรฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ Author

Thank you for your kind words, Kevin!

I'm happy you found this article useful for you!

Collapse
drodol profile image
David R

Really liked the article!!!

Collapse
helleworld_ profile image
Collapse
consciousness_dev profile image
Ario Setiawan

Awesome!!!This what i need for freelancing project(beside my frontend engineer role in company), thanks A lot! -^

Collapse
helleworld_ profile image
Desirรฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ Author

I'm so happy to read that, Ario!

Please feel free to explore my other articles, maybe you'll find more useful information, all the best for you!

Collapse
mohamednossair profile image
Mohamed Nossair

Good good article many thanks

Collapse
helleworld_ profile image
Collapse
mikgross profile image
Mikael

Hire a designer :D I know one that does great designs for 450EUR

Collapse
helleworld_ profile image
Collapse
mikgross profile image
Mikael

Ah just a small joke. If you are a dev I would keep being a dev and hire a designer for the design work. Everybody has to eat ยฏ_(ใƒ„)_/ยฏ

Thread Thread
helleworld_ profile image
Desirรฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ Author

Mikael, thank you for your joke, let me just point out some things:

โžœ Not everyone has money enough to pay a good designer. (And I'm saying "good" for many reasons).
โžœ Not every project requires a professional design or designer.
โžœ (Are you totally ignoring fullstack devs who also do great designs?)
โžœ Everybody has to eat, those who can't afford a designer, are freelancer and must create Pablito's web and not Vogue's web, too.
โžœ (Are you ignoring those devs who actually like to design but are too afraid to call themselves a designer?)
โžœ By the same rule, let's close Wordpress, Wix, Drupal and Joomla because everyone can use them without "hiring a designer".

Thank you.

Thread Thread
mikgross profile image
Mikael

You know, that was of course not an attack.

What I am saying is: if you are budgeting a website for a client, make him pay the design, and if you are a good dev, focus on dev and hire a designer. Even one just out of design school. If the client doesn't want to pay for a designer than maybe reconsider clients.

That being said, you can perfectly do some designs/dev yourself if you like it, it just mixes jobs and for large projects it is not suitable.

Thread Thread
helleworld_ profile image
Desirรฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ Author

Who made it an attack? I think your "joke" didn't focused on the actual reality we're living in, so I just tried to point it out.

But I think you're still missing fullstacks who are great designers too, and the fact, again, that you can't just "hire a designer" neither "reconsider clients" if you actually are a small freelancer and willing to eat.

Maybe you're just so lucky, being able to afford big projects with big budgets and being able to hire a designer ยฏ_(ใƒ„)_/ยฏ.

Thread Thread
mikgross profile image
Mikael

I don't know about luck. But I live in Madrid, started freelance 4 months ago and with the right commercial strategies you can find clients and start hiring people. And I am fullstack.

So I live the reality you describe everyday.

I defend that people have to pay for what they want, if I need a designer to do a piece of web dev, I will budget it and tell this to my client: "If you want a good web app, you need to make sure you have a great design, or your app is worth not much".

Honestly it also feels good to give work to other people that are also struggling to make a living.

Thread Thread
helleworld_ profile image
Desirรฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ Author

You're living in one of the best cities in the world to both work in the IT field and being freelancer as a fullstack. That's what I mean speaking of luck.

I'm not against the point of hiring people or help people finding projects, I'm just against the idea that everyone in the field can afford that.

Thread Thread
mikgross profile image
Mikael

Again luck has little to do with it because I chose to move there from another city. My clients also majoritarily come from out of Spain.

Anyway, I added you on LinkedIn, if I have some web-dev work to do I will get in touch :) Have a great day, Mikael

Thread Thread
helleworld_ profile image
Desirรฉ ๐Ÿ‘ฉโ€๐ŸŽ“๐Ÿ‘ฉโ€๐Ÿซ Author

You have a really bad idea of luck, and luck is not bad at all. I myself consider I had real great luck my entire career, which along with my talent positioned me exactly where I wanted.

I'm a designer and I also develop, if I can develop what my clients wants, perfect. If not, I must hire a dev to do ir for me, that's totally acceptable, but it's not always something I can do if I can't afford it.

Thank you Mikael, I'll check my LinkedIn, you too have a great day.