What is your work flow to go from design mockup to full website?

General
25

[quote=“Terry44, post:17, topic:359”]
Using a graphic design software like Photoshop, Fireworks, Affinity Designer or whatever you can use Lorem Ipsum text for filler text content and various image blocks to represent components like carousel galleries. tabbed boxes, buttons etc…[/quote]

@Terry44 ,

This may sound silly, but one option you could try for using a visual mock-up as your starting point in Pinegrow would be design your mock-up in any of those programs you mentioned at a desired desktop size (like your 960px preference etc.,). Save your mockup design as an image with a ghosted overlay (white/grey/etc.,) or as a semi-transparent .png , enough that it wont be dominate or conflict to visually design over.

Then once you have your mockup image, in Pinegrow go …

Page > Edit Code > style.css

add the following code:

body {
    background-image: url("yourMockUpImageHere.jpg"); /* reference to your image */
    background-repeat: no-repeat;
    background-size: cover;
}

Now you can use Pinegrow to design over your mockup image using LIB , PROP, CSS , etc.,

Once your have your structure items in place to match or simulate your mockup image, you can now delete the code for the body > background-image and carry on with your coding, adding the responsive aspects, etc.,

I would be curious to know if this will help your efforts of working from a mockup.