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

[Jack]

You have to remember this forum isn’t that active and the few members that post tend to be focused on learning about wordpress, making themes or building bootstrap blocks, so there may not be individuals that can offer you tips regarding the design process of taking a website from a graphical mock-up to a working website.

Here is an example of two mock-up blocks I built for a recruitment website I’m working on, a mock-up that some would have designed with paper or photoshop, but using Pinegrow I’ve saved myself time as the majority of work has been completed, and I can save these blocks as smart components for future projects.

and second block

Now, I understand that doesn’t offer you any tips for your design process, but maybe if you start using Pinegrow, you may discover a different way of designing mock-ups, IMO a smarter more productive way.

[Terry44]

Nice! How did you do the wedge / arrow on the bottom one? CSS?

[Jack]

Yes! I’ve started to develop an obsession with CSS shapes

.triangle-down
{
    width: 0;
    height: 0;
    border-left: 75px solid transparent;
    border-right: 75px solid transparent;
    border-top: 75px solid #292C2F;
    margin-left: 20%;
}

I would then play around with css/media query for different screen size. Pinegrow just makes everything that much more enjoyable, especially when experimenting - hopefully all you DW guys will see the Power of PineGrow

[Thomas]

Hi Terry,

all good. Those scribbles are excellent. All I wanted to say from now:

Never go into a Design application. Start directly in Pinegrow. Save time and money by focusing on UI and UX and real-life content, you won’t get paid for all those hours of (mainly) useless but impressive artwork.

This is called “Designing “in” or better “for” browser!!!”

@Jack

hopefully all you DW guys will see the Power of PineGrow

I’d like to second this heartily (and it’s not restricted to the DW audience).

Cheers

Thomas

[Thomas]

It’s interesting how everyone has a different way and how that works for them. Your way of not visually mocking up so you know how things will fit together before you start isn’t my own way but if it works for you then great.

Hm - yeah! It might be always the case, that we don’t understand each other just because of my pretty mediocre english (I’m german - just for protocol)

We are not used to know each other so it’s hard to judge things anyway. But to get used to each other, it would be fine if you could post an example of your previous work. “Code” is much more international and static widths are scaring me.

Cheers

Thomas

[Terry44]

No worries.

I think it would be great if we could share code with each other and learn from real examples. Is there a section of the forums where we can do that?

When I get more into Pinegrow and buy it here soon I am sure I will have questions in which case I will share code samples. I am in the 7 day trial now as I installed it earlier or last night I think. I am going to be watching the video tutorials again to learn more on it and experiment directly in it.

One question I have is can we rename the code sections and everything still work? I don’t like calling the container div or section “container” I prefer to name it different, I have my own naming conventions. If I do that will things stop working especially the bootstrap framework? I personally don’t use frameworks all that much but if Pinegrow is built to easily work with it then I may start using that in my projects.

[Thomas]

I think it would be great if we could share code with each other and learn from real examples. Is there a section of the forums where we can do that?

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

One question I have is can we rename the code sections and everything still work? I don’t like calling the container div or section “container” I prefer to name it different,

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

[Pinegrow_User]

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

[Rob]

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

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

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

[Terry44]

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.

[Terry44]

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.

[Terry44]

Ah - you can give it an ID or class name up to your liking.

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.

[Rob]

@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?

[Terry44]

@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

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

[Pinegrow_User]

@Terry44

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.

@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 …

@Pinegrow_User

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.

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 ]

[Rob]

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

[Pinegrow_User]

I don’t mind at all @Rob. Anything that can make Pinegrow better, I am all for. 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.

[Thomas]

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.

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

[Jack]

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.