1

I am new to front end web development. I work with a designer who makes mockups (no html) wire frames and the finished product is a React/Angular single page application.

I was thinking of this workflow. 1) Get the mockup wireframe 2) Recreate it in HTML/CSS and collaborate with the designer to make quick changes. 3) After completion, then take the HTML and convert it to the React/Angular single page application.

Thanks.

Mitch
  • 31
  • 3

2 Answers2

1

Hi Mitch welcome to web dev!

So I can't say I'd recommend that workflow exactly, only because you don't want to have to write and rewrite code and make it into components.

Working with a designer myself we collaborate closely on a daily basis. If your designer is using sketch (which he loves) he can create wireframes and prototypes. Our workflow is similar to what you are proposing, this is what we do:

  1. We have a feature request that we need to design and build
  2. He creates a mockup / wireframe
  3. Then he whips that up into a prototype (optional)
  4. From there I turn the prototype into working code (we use angular)
  5. When I think I have recreated his prototype I ask him to look it over and we discuss from there.

For me, it is easy to go back and fix some CSS or change some HTML around, just keep everything organized and well commented so you can easily change stuff in the future as your app grows.

One other thing I would recommend is that you should create your own form of a wireframe so that you can see how your components are going to be placed and interacting with one another.

I hope that this helps you and your designer come up with a workflow that you both enjoy!

Afro
  • 94
  • 1
  • 8
0

This is my workflow. I import the figma, sketch, adobexd design file into Desech Studio to get a clean html structure positioned with css grids. Then I need to adjust the margins and sizes and I'm done with the conversion. And finally I work on the responsiveness of the website.

Then I install and enable the react plugin and when I save the project, it will export react code. And then I work on the react code and components. Here's the github repository for the react plugin.

dreamLo
  • 1,612
  • 12
  • 17