How do you create a client website design mockup/image?

by

For all the graphic designers who do web design too: How do you produce client design mockups for review and then convert them into HTML/Wordpress etc?

Are they created in Illustrator/Photoshop and then the images extracted for use with the new site?

Can any HTML/CSS properties be extracted from a website page mockup done in Photoshop or Illustrator?

Answer

You have two main options as workflow (although as DA01 pointed out, these are just a few of many possible ones):

  • Create the mockups in Photoshop or similar software, and then manually re-create them in HTML/CSS;

  • Create the design directly in HTML/CSS.

In option 1, you would basically use the photoshop file as a reference, mostly to calculate distances and font sizes. You can save assets to then use later (as you mentioned, images are the best example), but there would be no automation. In option 2, you would be coding your web page directly, because there’s nothing better to see a website working than using the actual technology it will require.

Both approaches would benefit from having wireframes done beforehand (also as mentioned in the comments, pen and paper is usually enough!).

Attribution
Source : Link , Question Author : user58172 , Answer Author : Yisela

Leave a Comment