DEV Community

Cover image for A simple design process for developers or non-designers πŸ€”πŸŽ¨

A simple design process for developers or non-designers πŸ€”πŸŽ¨

DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ« on January 14, 2020

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 desi...
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Γ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

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Γ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

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
 
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Γ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

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Γ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

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Γ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

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
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

Hi again Adonis, I think maybe this article about grids and this article about composition may be useful for you.

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Γ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

Thank you Carolina, I really hope it was useful to you! 😊

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Γ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

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
 
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Γ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

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
 
dariuspirvulescu profile image
DariusPirvulescu

There is some really valuable knowledge in this article. So much better than 'Best 600 resources that would make you a better designer', this article would make me a better designer.
I'm not a designer at all and was always intimidated by designing stuff, didn't really know where to start, but having this defined process helps a lot.
Thank you!

Collapse
 
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

Thank you so much, I really appreciate that this article helped you. πŸ’–

Collapse
 
mohamednossair profile image
Mohamed Nossair

Good good article many thanks

Collapse
 
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

Thank you, so glad it was useful for you!

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Γ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

Thank you for your kind words, Kevin!

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

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

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

Collapse
 
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

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

Collapse
 
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

Wonderful initiative, Michael!

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

Collapse
 
dshamilton profile image
Darren

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

Collapse
 
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

So happy you find it useful, Darren!

Collapse
 
drodol profile image
David R

Really liked the article!!!

Collapse
 
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

Thank you Elmo, I'm happy to read that!

Collapse
 
consciousness_dev profile image
Ario Setiawan • Edited

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

Collapse
 
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

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
 
madza profile image
Madza

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

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Γ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

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
 
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
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

Woops!

Thank you so much, Ryan, fixed!

Collapse
 
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

Thanks and thanks for the corrections πŸ’–