DEV Community

Cover image for Perfect webdesing Workflow?
Adrien
Adrien

Posted on • Updated on

Perfect webdesing Workflow?

On This post I try to make my own workflow. To be honest I'm not best dev front or web designer. But in my work I need to create some design or update sites.

I have been using this method for a few years. But if you have another method. I can't wait to discover yours.

https://github.com/afevre/workflow

Use this workflow like a boss:

At start you need to centralize you'r inspiration on MoodBoard folder

  • put screen capture, web site, flyer, restaurant menu, picture, Anything can be use to create you'r own desing.
  • If you find something can be interesting during the creation put on Asset folder (font, picture etc...)

Create, test and restart, on SketchBoard folder you put you'r interpretation and you'r idea of you'r desing.

  • That can be sketch on paper, on procreate, sketch , figma, paint, word etc... we don't care. It's just for materialize you'r mind.

In parralle you need to find something to write in you'r desing on Text folder. A good desing need to give us a message.

  • I think this step is realy important because it's pretty hard to create good mockup without something .

Now we can create the skeleton of you'r desing! The mockup!!! ta ta tammmm.

  • I think the mockup can be realy important if you shearch to create web site. Because on the web the text is very important. Now we can stay less 5sec on the site. If we don't find what we whant we get a

Let's go to be creatif, CREATEEEE the Model

  • you can use sketch, indesing,affinity desinger etc
  • Becarfull at you'r breaking point. With mobil and tablet small pc screen and verry big pc screen. You'r breaking point whas verry important. 480px for smartphone, 767px tablets, 767-979px to landing tab
  • you don't need to create 12 models but you need to be attentif at you'r breakingpoints.

Now my favorit exercice, Create style guide!!!

  • Style is the most simple and the most powerfull tips
  • Create you'r own styleguide or take my exemple and make atomic desing of you'r desing

I will try to update this post and my repo with your comments.

credit:
Photo by "My Life Through A Lens" on Unsplash

Top comments (0)