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

I would call this classically “URL” - a link to a live-example. This is the site of my main client.

I’m not earning my living with graphic design - I do it behind my job. Mainly for him to be precise. It has been done in FreewayPro - the editor of my choice the last decade (unfortunately retired).

Ah - you can give it an ID or class name up to your liking. But a DIV is a DIV and a Section is a Section or cody spoken:

        <div class="my-name-whatever">
            <p>Some content</p>
        </div>

or

        <div ID="My-unique-name-never-appears-twice-on-the-same-page">
            <p>And certainly some content here as well</p>
        </div>

Cheers

Thomas

[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.

@Pinegrow_User nice one, I think that’s an interesting idea.

It may be nice to have it as a feature via the UI or something similar on another level under the page. Have it so the user can chose and set a mockup / design image, the ability to toggle it on and off, set the opacity or overlay color, and delete the image as well.

Just an idea, see what @matjaz thinks. :wink:

I also like the idea of a grid system overlay (like in the older thread) to toggle on and off via the UI.

What I did was create a div in the body of the page and using the eye in the code list on the right, for me it is on the right I turn it on and off. You can also set transparency on the img or div via css too if you wanted.

Problem with setting it to the Body tag is that if you wanted to temporarily hide the image you can’t because it would hide the whole page.

Yes, I was thinking changing DIV’s to HTML5 based tags where appropriate like Article, Section, Nav, aside etc…

If I changed the id’s and classes to my own names I didn’t know if the Bootstrap stuff would still work if I was using bootstrap, will experiment with it and see.

@Pinegrow_User maybe this might be of help, it was a very handy addition that I had in me list of tools for web design: PixelPerfect

@matjaz @Emmanuel would this be difficult to add to PG?

1 Like

This is nice, isn’t just for Chrome either.

@Terry44, it was just a basic example ideal for your mockup image workflow desires. But yes using a DIV allows for more manipulation and features via CSS and the current UI.

If it was to be an actual feature as previously hinted at …

Then it could be hidden from the user in the page tree, much like the “actions bar” etc., is on page items. Instead only accessible via it’s UI controls, and not directly by the user like a typical page item. I think this type of feature is also something that could help designer types better visualize as they set out to work with Pinegrow and use LIB , PROP , CSS , etc. Then as they add LIB items and change CSS properties they would begin to understand visually how those features work (by visual trial and error with their designs), in Pinegrow to accomplish their design and see visually the outcomes of those manipulations in comparison to their designs. After a while they would be less reliant on the underlying mockups and more in tune with the features and what needs are required.

Could be useful for some peeps. [ Feature Request - consideration @matjaz :wink: ]

@Pinegrow_User I’ve added a link to your post in the Feature Request category! Hope you don’t mind.

I don’t mind at all @Rob. Anything that can make Pinegrow better, I am all for. :evergreen_tree::heart: Maybe nothing will come of it, but it’s worth a consideration at least if it may help certain users, given the feature idea is simple enough.

1 Like

Hi Terry,

not sure if it is already answered, but if you want to use a framework, you need to keep up framework’s dingus. So changing Tags shouldn’t be an affair - changing class names will be though.

Cheers

Thomas

Yes - just be careful about messing with the default framework. You can remove classes from certain elements and control the element with your own style sheet/class but in my early days of experimenting with bootstrap, i edited part of the default bootstrap framework, causing complete havoc with the column layout!

You can actually create your own custom bootstrap framework http://getbootstrap.com/customize/

That is my plan for when they decide to release bootstrap 4.

Actually I may do that soon as it will speed up the process when dropping in components.

Here’s a very interesting article about designing a website and the considerations involved.

1 Like

I skimmed the article. The wireframe mockups I was doing in Fireworks but now I use Affinity Designer though I also do physical mockup magazine style where you have physical mockups on paper and collage form where I move things around on a table to get ideas and see what fits and doesn’t. Then I take that into Designer and mess with colors and final placement. Though the end my workflow seems to be similar to that article maybe minus the physical part, I just skimmed the article so missed some things.

1 Like

Yes, I also have multiple images in the “Design DIV” so I can look at aspects of the proposed layout and not either or thing with one image only. Also the pixel perfect design feature mentioned in another thread would be perfect in this process too. Have the ability to move around as many images as you want instead of one at a time it seems with the browser plugin.

I would think a single Mock Up image would be a good starting point for a feature like this.

But if they could find a clear way or determine the benefit too implement multiples images, then yes ways do exist for allowing pixel snapping while dragging and nudging divs. I would think most would be happy and could benefit from a single image (as described in the above posts) to start however.

This would also be a starting point for a visual design editor that automatically populates those results directly into the CSS tab. Why manually do it when Pinegrow could do it for us?

Drag images and div’s or other containers and elements around the page pixel perfectly and you would have replacement for most visual editors out there.