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

General
1

I am switching over from Adobe’s line to other softwares and am trying out Serif’s Affinity Designer for creating website mockups. It does not create any html it is purely graphical so outputs in PSD, PNG, JPG etc…

Using Pinegrow what is the workflow people use to recreate these graphical mockups into real working websites?

With Adobe’s line you could take the graphic mockup and export layers and what not into html, crap html but still something to work from. I also used Adobe Muse for creating mockups and exporting to Html CSS and JS which I would not either know how or want to do manually.

Is there any video tutorials specifically using Pinegrow for these things and the difference between this and say Dreamweaver or Muse or whatever? Going from visual mockup to full fledge working site using Pinegrow?

1 Like
3

Responding from the response I got in email via the forum.

Let me simplify a bit. I design a layout visually using graphic design software or on paper. Then I take that design and visually recreate it either with Muse or Dreamweaver and sometimes Handcode from scratch. I no longer have access to Adobe products so am looking at other options and wondered how people use Pinegrow for this process. In Muse for instance I could create a background I could lock and then drag over components and begin visually designing based off the visual mockup.

Using Pinegrow how do you take a visual representation or mockup of a design and then create the functionality and working website?

I don’t and never have created a Muse website, just used it as a tool to help go from visual mockup to completed project.

1 Like
4

If you are creating mockups in Designer, you can use the output tools to export all of your design elements as resources that you can then use in a web design app. See Affinity Designer Workbook, page 360 for a tutorial (if you don’t have the book, it is worth buying. You can get it from the Designer website.)

As for using these resources in a web design app, make sure you make note of all the colors used in your design, as they will be needed for the exported content to match the color of any new content such as text or background fills.

By the way - If you have any content that you need to export as PNG (such as items with transparency) make sure to run the images through a minimizer in order to achieve the smallest file sizes. One resource is TinyPNG. Do the same with JPGs. While a Photoshop plug-in, you can go the the TinyPNG / Tiny JPG website and process up to 20 images at a time for free.

5

I am a windows user and also do not have access to adobe software any longer so I can’t use Photoshop.

Uploading assets to a website that we do not control is not something that I am going to do so TinyPNG isn’t something that I can use. I have not had a lot of opportunity to work with Designer or Pinegrow so I didn’t know about the assets export or that you had to shrink files outside of the program. Fireworks just did that for me and got them down pretty small.

Doesn’t jpg have transparency to it? Most of my images are in JPG format for the web though the originals are in PNG due to fireworks but I don’t have access to that anymore so…

6

I Also wanted to say I wasn’t going to buy any books or anything for Affinity products until they came out of beta, the Windows versions are all in beta right now.

7

Jpeg does not support transparency. GIF does, by identifying pixels that are set to be transparent, but it does not support translucency, which means that there is not a smooth transition from opaque to transparent pixels.

PNG24 is what you need for transparency.

As for uploading content -It sounds like you plan on hosting the site on your own server, which means that you would need to have a number of things in place.

Unless your content is highly secret stuff - such as requiring a password to view the site, there is no concern about having your site on a hosting service - just use a reputable one such as GoDaddy. Using GoDaddy as an example, they are hosting literally millions of sites around the world. If there were security issues, it would get around very fast. I’ve been using them personally and for corporate and business sites for some 12 years and have never had an issue. And they have tools to make things as secure as you like.

If you are concerned about people grabbing your images and content, the only way to prevent that is to create some sort of transparent overlay. Even so, people could easily so a screen zoom and grab a screen shot.

Regarding the book, it covers everything that is in the Windows version. It is not a major in-depth reference book, but a bunch of tutorials. It will not go out of date any time soon. BTW, the Mac version of Designer (also Intel based) has been out for several years and is very solid, so they have an excellent stepping off point for Windows.

You will be needing some sort of bitmap app if you’re not using Photoshop. If I might make a suggestion - you can buy used copies of pre-CC / permanent license versions on eBay and cheaply. Something like CS 4 or earlier will fit the bill.

Another option (feel free to dismiss it) is to pick up a used Mac on eBay. It will open the gates to tons of software not available on the PC (including Affinity Photo), and the Mac can also run Windows (either / or, or both OSes simultaneously, plus they can share peripherals. A real-world benefit of having both platforms is that you can test your websites properly, using browsers such as Safari, as well as older version of other browsers. Windows machines tend to display colors slightly darker than on the Mac (Windows users tent to crank up the brightness) and sometimes, especially with low-contrast fonts, a site may look great on a constrasy Windows machine, but be harder to make out on a Mac. Roughly one computer in ten these days is a Mac and studies consistently show that Mac users tend to spend more time on the Internet than Windows users, so being able to test a site on a platform that can represent around 15% of users is worth considering.

Of course, this is only a suggestion. For myself, I run Windows XP, W7 and W10 on my Mac (simultaneously) and have a range of browsers installed on each copuy of Windows (including different versions of the same browser). This has been extremely valuable, as it shows me where things can go wonky so I can make my sites look good on all OS versions. (Even when a person doesn’t care about the Mac, being able to run multiple versions of Windows for testing purposes and have them all running at once is a huge boon.) Feel free to tell me to jump in a lake. No offense taken.

8

For transparency you need png. jpg doesn’t offer this - visit http://www.irfanview.com/ (been around for decades) but still excellent for window users, you can batch convert/compress images (download the add-on pack).

Gimp is another alternative, open source photoshop replacement and has a batch image plug-in for compression/resize . https://www.gimp.org/

I use Linux, so I have access to tons of open source software, most of my professional standard software is free, while I have compression software running locally but its command line http://www.imagemagick.org/script/index.php and is much better then irfanview or gimp.

I build my own bootstrap blocks, meaning I design my mock-ups within Pinegrow. To give you an example, here is a free psd mockup http://www.graphberry.com/item/gonex-simple-psd-landing-page

If that was me designing that mock-up, I would use Pinegrow to create that mock up (instead of photoshop) by drag and dropping components using the bootstrap framework, designing the mock up using css/html.

9

Well as it turns out, imagemagik also runs on windows and mac, but if you install, you may want to watch the youtube guides to understand how it works.

10

It’s a myth creating “mockups” in the sense of design.
You can’t design into the blue.

You need a solid understanding about your client and her content. It’s about taking the inventory, writing the outline, structuring your content. With this round about 50% of web design is done.

With having the structure (outline) created, you add this content continuously to your web design tool (whatever named).

Probably here, design starts. Typography is the most important. Readability (Font-Face, Size, Line height …) matters.

The Rest?

Yeah - some well chosen images, perhaps a background pattern? Who knows. It’s just decorative.

That’s what I call a workflow. It doesn’t require some special applications (or platforms). The first 50% above can be even done with pencil and paper. Scribble and Mockups.

Cheers

Thomas

2 Likes
11

Thomas - not everyone designs the same way. Some of us have different talents and some prefer to work with paper, others with a blank screen and use their own creative process.

With design you do what suits your style, but yes, content is key, a design is nothing without content, but again, some are better woking with content “out of the blue” then others, so it isn’t a “myth”.

I can look at a blank screen in Pinegrow and create a web design mock-up just using my own creative thinking by dropping elements into a page and creating a structure as that is what I’m good at, others can’t and prefer to use pen/paper or photoshop.

From what I’ve read, some people that are new to Pinegrow (or considering a purchase) don’t understand what the software can do, thinking it will help you create a website easily, but really the software isn’t there to hold someone’s hand, its there to give you complete control but you have to make an effort learning css/html and that isn’t in reply to anyone in particular, was just saying as some think WYSIWYG means everything should be easy.

12

I have been watching their tutorials on Vimeo and some on Youtube, I hope that most of the information is provided in video format, I like to watch someone actually use and demonstrate in real time how to do something.

I have read people complaining about not being able to register and activate these older softwares. In any event I have contacted Adobe and had them close my account so I no longer have anyway to register Adobe softwares. I have cut ties completely with the company.

The entire Affinity line, Designer and Photo are in Windows Beta right now, they just updated the software today. I have been using Affinity Photo and it is pretty good, I have already done as much as I used Photoshop for with cleaning up photos and it is a little easier and faster in Affinity.

I call BS on this.

I use VMware Workstation Player 12 for windows, it is free and allows to install and run any operating system you want in it, there is a utility available from them to also clone your computer into a virtual disk and load that into VMware. I have Windows 95 and WinXP and Win7 as well as couple flavors of Linux but I don’t really use them that much. I have dual boot Windows 7 Pro and Windows 10 Pro computer so I can run both natively where as the VMware versions don’t have exactly the same access to the system as a natively installed version.

13

I have no idea what you just said. It’s a myth nobody can look at a blank canvas and not create something? The human world we know today wouldn’t exist if that were the case.

Yes, my question was using PINEGROW how do YOU go from blank canvas or actually using a graphical design made up in a Photoshop or other softwares and create a website with it. What is YOUR process actually using the Pinegrow software because I want to learn more about how it works and what and how people use Pinegrow. Or in other words, I am looking for tips and ideas based off of real world use. If you personally don’t have this process then fine, thanks for you reply.

Yes, I do this or make a collage from magazine pages or junk mail and put together a mockup of ideas and features then I formalize this into a cohesive design using fireworks though I don’t have that anymore so probably will be using affinity designer and photo for this process. I just saw an interesting technique in a vimeo video, one of their isometric tutorials I believe, that I will try to incorporate into my process briefly outlined here.

JUST decorative? Cordan Blue!!! NO!! Not JUST decorative, NEVER! LOL

I try to design where everything has a purpose, to compliment and draw the attention of the viewer to the ultimate end goal which is to make a purchase or sign up to a newsletter or go to an event or click a certain link or… or… or…

I don’t really design just for design or to win some graphics award, I see a lot of people get fired for that especially if their beautiful designed website doesn’t result in the end goal which is usually but not always to make $$$.

My clients are more ecommerce driven but there are design aspects to some that allow for that creative flair graphic artists really love to do but the design just for design… usually doesn’t work well except for the designer that won some award over it but caused the company to lose money or go bankrupt due to no-one actually buying the products being offered.

Yeah, design is important but I prefer targeted design with a purpose than just slapping something up just for pretty sake.

1 Like
14

I want a software that can read my mind and just do it with a push of a button or it pushes the button for me.

I have seen softwares that try to do that and the end result is total crap! LOL
Will be playing with the trial of Pinegrow later today. Thanks for your responses.

15

Re: Mac vs PC usage: One out of every ten computers sold is a Mac. When it comes to personal vs business computers, the Mac share gets a bump.

When it comes to using the web, Mac users tend to hit more sites and spend more time online. It’s not much of a reach. Taking consumer-owned computer usage into account, Windows folk may spend the same amount of time on a computer, but their time spend with games is much higher. One thing that tends to level things out is streaming video such as Hulu and Netflix, but it is slight, as most streaming is done via a box and a TV.

One very important stat is that of mobile. Here is some interesting Internet info as of December, 2015 (in billions of minutes online):

Desktops / Laptops: 500.17
Smartphones: 787.54
Tablets: 160.77
That makes mobile (at 954.31) nearly double that of computers.

As shown in a range of marketing reports, while there are twice as many Android users as iOS users, but iOS accounts for two thirds of all mobile internet usage.

I’m a marketing guy. One simple fact to keep in mind is that in order to stay competitive most companies (the full range, not just giant corporations) do not maintain high margins, 10% being considered reasonable. If one in ten use a Mac for the internet and two thirds of mobile surfing is done on an iOS device, that represents an absolute ton of business.

By not designing for maximum impact on all platforms, that narrow margin can be shot to pieces.

Regarding virtualization - The Mac supports accurate previews of all iOS devices as well as Mac. if you can’t run and test Mac and iOS and only preview your work as it would appear on Windows and Android, this would be ignoring some sizeable market share. And it’s not just about screen sizes and pixel densities. It is also about color and contrast, as well as font sizes.

16

Seems I have to explain a couple of things (trying to respect the OP’s basic question):

Designing Mock-Ups means creating a static statement, such as:

In width of 1428px your page looks like this!

Presenting this to a client, she will be absolutely amazed - for sure. But wait - you said 1428px. How does it look in a width say 752px?

Hum - well then we have to re-arrange a couple of things. Question: Which one how?

This is why I say: You need content - not graphic elements (into the blue).
To answer the “Which one how” topic, you have to discuss with client which part of the content will be featured … and so on and so on.

We design in a highly dynamic surrounding. Responsive doesn’t mean: “Design for Devices” it means Design for content no matter which width it is displayed on. So apologize for sounding pedant, but there aren’t much “alternatives” to this way.

I have to admit, that I haven’t created any project in Pinegrow yet. My current playground is:

https://clients.updog.co/flexotec/index.html (our upcoming company web site).

I’m coming from a full bells and whistles WYSIWYG editor which recently retired and am as well seeking for an alternative. As Jack already mentioned, Pinegrow is not sort of this. To me it’s just the next logic step into the “hardcoded” world. I’m used to start my stuff from scratch, writing my own grid (I call it theFlexGrid) and am then collecting all the things I like from other frameworks.

The LIB offers everything you need. Drop and drag it, classify (or identify) it - done. This is the way I’d work in any kind of application though.

Allow me to quote in addition parts of the foreword of Mike Monteiro’s “You’re my favorite client”:

Here we get to the point: design disasters usually spring from the faulty notion that design is art not craft. Mike’s first book, Design Is A Job, gave designers a swift kick in the pants, admonishing them to wake up, ditch their artsy-fartsy egos, and take responsibility for their work.

Just to let you know where I’m coming from.

Cheers

Thomas

1 Like
17

I really do not understand you. I have included examples of a couple mockups I found in bing images below to show you. Filler content is represented by lines and boxes.

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…

That is part of web design, making content display appropriately on different screen sizes. I use a responsive layout but I do also use a static layout at 960px wide which most screens can see well. I am not one for creating mobile only or using mobile for EVERY screen size because they look like crap on large monitors. If I am on a desktop computer or a laptop and I have attached it to a 27" or higher monitor I don’t want to be limited to mobile menus, after all I am not on mobile in this situation. Then vice versa when I am on mobile I don’t want to have readers scroll and scroll to click a link. Now a days I am seeing people just creating for mobile only and using that for all layouts. I don’t like it as a user,. that’s me though.

If you only create for one layout then that is your decision, I don’t design that way myself or need to really go back and forth a lot with the client because all of that is handled in the interview and mocking up stage. Everyone is different though.

That was my question, how do you use Pinegrow in your process.

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.

Thanks for your response.

1 Like
18

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.

Selection_004.png1243×691 546 KB

and second block

Selection_007.png1152×570 41.5 KB

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.

1 Like
19

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

1 Like
20

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

.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 :sunglasses:

21

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!!!”

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

Cheers

Thomas