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

Really a great example you shared, Terry. It leaves us enough room for discussing workflows - the good and the bad.

So let me give it a try:

First things first:

Certainly it doesn’t matter what way of workflow you prefer. Whether “stickers and paper” literally or digital media, not quite important. Much more important is the result - or the way to go. I can only speak of myself. I never was part of a team and never had (as you) the possibility to be part of a field test audience. All my older websites have been heavily based on “artwork”. That’s the field I thought I’m quite comfortable with - and filling the drawings later with some text.

Somehow this worked pretty nice. This is my very first website ever done (about 8 years ago):

The problem I’ve encountered was, that I was very happy during this process. But after finalizing it, I’ve had half a mind to start it from scratch. But I never had a real explanation of the “why”. Because it happened with nearby all following projects. Today, I can just have a vague guess, but I think it had much to do with this pixel-perfect thinking. All those projects heavily depended on the “designer”. No room left for an author or editor. All my stuff was artsy fartsy thinking.

So when I speak today of content (king) first, it’s not just jabbering - it’s the result of old mistakes. All this fully bloated color stuff is somehow redundant. I even read somewhere, that a bog-standard visitor doesn’t “see” the design. He only scans the page - trying to figure out informations as quick as possible. I think I made them hard times to do.

The GOV project

I think, that a government project is one of the hardest job in web-design. I often thought about it, cause everyone has a hometown and therefor a good chance to judge how “well or not well done” they are. All I can say is, that you have to consider all - literally. Usability, Operability, Clarity, Design and whatever. And finally - after you thought making everything correct, there are those nitpicker - often enough part of the government declaring it as crap. Something like:

“My brother-in-law is doing web design as well. He makes super DRUPAL stuff and he would be twice the better.”

I certainly can’t judge the Iowa-City project. Because I’m not living there and I can’t compare it to the old one.

But there is something telling me, that if something’s wrong, it had to do with “conversation” between the client and the team. Something like: The team wanted to … but client rejected". Or perhaps the other way round?

Pricing

In very rare cases, we’ll have a chance to talk about this. Personally I’d say, it sounds fair. Assumed those 10 guys realized it in 4 weeks (not realistic) - it’ll mean 5k each before tax on their pay check.

What makes a better workflow

All I can do is to recommend having a read of Mike Monteiro’s books “Design is a Job” and “You’re my favorite client”. Seek for his talks on Vimeo or YouTube as well. He sounds sometimes uncouth and in a know-it-all manner. But he has as well this lovely subtle humor. I’m pretty sure you’ll think “What the heck is this guy talking about”. But it is great. It will influence your workflow sustainably - it probably change your entire attitudes.

This might be a good representative of what I meant:

It’s just a small part of a huge and valuable discussion and I hope, that this all is part of the OP’s topic and comes up to his and some (or most) other Pinegrow user’s expectation. It’s written for sucking out the best of it (and not a glossing something over (whatever it will mean)). It’s easy sitting behind bushes firing from there.

Cheers

Thomas

There have been many projects I have seen that are like that, where the designer seemingly was trying to win some art contest or award but didn’t care or understand the purpose of the site was to make sales and not look pretty to look pretty. Similar to some commercials I have seen that are cute but you have no idea what the product is, you might remember the commercial but if you are at the store and need X you aren’t going to think of the product in that commercial if there is one. Many car commercials are like that, pomping up awards their cars have gotten. I don’t give a shit about awards but will it break down 6 months after I get it because the engines are crap? Or the engine shut off because the electrical switches were the cheapo kind to save on costs? Will I lose control of the vehicale because the accelerator gets stuck? Though none of that is important because it won the pride of the industry award or some such.

I talk about the design vesus function earllier in this thread and elsewhere in the forum where having the pretty just for the sake of the pretty can be a negative and yes the content is the most important, the design of the site should show case the content not have the content be the after thought. MANY sites are like that.

I think most designers should take psychology courses and courses in marketing so they understand the thinking of the people the product is targeting so they can design for the desired outcome which is to get a sale or signup to a newsletter or click a link. What colors and placement will grab the eye in a way that leads the visitor to become a buyer? How does the content focus this and guide the visitor to make that purchase or make that desired action?

On the web developer / design company that did the website for my city government, I believe the employees are paid hourly and are not free lancer. It took I think 14 months to deliver the website and it was late and over budget from my understanding. They had to start over multiple times I guess because they did not understand the requirements which when I read them from the sheets I saw was very specific, there should not have been a lot of back and forth though I was not part of the process other than in the information gathering group I took part in. In my opinion it was a waste of time because all that information as to which part of the site is most popular and what information is requested or looked up the most and in what order can be found in the logs. All that they accomplished how 12 groups of 5 to 7 people would organize the links on the site. It was a huge waste of time in my view but it gave me insight into the thinking of this company and how their process works.

I could of delivered a site in a 3rd of the time for a lot cheaper but one thing I have learned when dealing with companies, not government but companies is that they have a budget and if they don’t spend that budget it won’t be there again at that level so they do what they can to create projects that have high overhead, the low ballers usually don’t get the bid.

Now working with non-profit organizations it is some what the reverse but they also have a budget so if it isn’t used all up they put it to something else, not necessarily to their charity directly but maybe to buy art for the walls or something similar. I have seen it.

I have been building websites and working as a developer since the mid 90’s, I remember my first paying developer gig was to fix a shopping cart for someone. I couldn’t fix it all the way but did 90% by just reading the instructions of the cart which others before me did not, I guess they went through 3 or 4 people before me that screwed it up worse and I undid their screw ups and fixed it most of the rest of the way. I did not really know what I was doing but I still got paid and in cash too.

I am in agreement with you Thomas about most of your view points on design I just go about the mocking up and planning stage different, that’s all.

My first website I don’t even have it anymore but it was total crap compared to yours. Good job.

Yes, we all look at our work and want to redo it once it is done, sometimes we don’t have that luxury though. Just take our insights and what we learned and put it into the next one and then the next and so on and so forth.

Hey @Terry44, I thought you may find interest. I just purchased another app over the weekend that provides a good example of this and is somewhat similar to Pinegrow overall (except Mac only I believe), I briefly discussed it here. You may be interested to look it over even just to see the concept, as proof of concept for Pinegrow as we discussed previously above in this thread concerning snapping, dragging & dropping visually on the page. Even if you are not a Mac user, check out the site, videos etc., it’s a rather interesting concept.

It looks like abandonware to me. It has not been updated since July 2015 and there are NO reviews or any videos at all on youtbe about it. The only one I can find is the features video made by the creators put up on vimeo. It smells to me like abandonware. I would advise to get a refund, because I can’t find it is supported or that there is a user base.

Microsoft Frontpage had all that as well but it was total crap code and before standards really took hold over the internet. I think everything to date has been trying to replace Frontpage as it was really the first WYSWYG editor that really took off and there are still people wishing there was a clone of that today that would still work. LOL

I am not a Mac user so can’t really comment on it, I looked over the site but for me there really is not a lot of detail that tells me what it’s features are. The video they have is brief snipits of this and that and I can’t get a good look at it to make a determination. Plus as usual with Mac based web products there are no technical specs or details that show the type of code it produces. I looked at the source code of their site and it is mostly div’s with less than useful ID and Class titles though for SEO the ID and Classes aren’t used really which is why the semantic markup was created in HTML5 which I find interesting that their own site does not use any of it.

I would really advise you to get a refund on that software though because it really does look abandoned.

LOL, that’s hilarious, :smirk: I thought you would see the parallel regarding what we discussed before, I felt it was a good example of said previous discussion above. But I digress.

Yeah, I can’t really tell from the video and I don’t have a Mac to try the software so I can’t know from my end what you see on yours actually using it. There are not enough screen shots of the interface to give me an idea on it.

What I’ve found from my current design approach is because I focus on the following:

  • Mobile first
  • Plain Html/css
  • Content before photography
  • Photography included to add depth or relevance

In that order. This means my websites are fast loading and I mean fast! They don’t look generic because the photos are mainly used to add depth, rather than a big cheesy stock photo and my websites are user friendly (this is important) no one will get frustrated or annoyed browsing a website I design because they are designed to be an enjoyable experience.

Also if you include photos mainly to add depth, they can be optimised to quite a low file size without the user noticing the image has suffered any loss of quality

Plus because I now design mobile first, it means I don’t face that stage of “shall I remove this”, such as images etc, because its awkward to fit such content within a mobile display, which used to happen when I designed laptop first.

I use software like Mobirise for the mockup, then define the functionality for each block. As soon as that’s clear, I start with a blank sheet (well: document actually) and start building the mockup from scratch in HTML, CSS, JS, Bootstrap…

Why not use Pinegrow for the mockup? This way you’re developing the website as you work on the mock-up.

Plus it saves you so much time when you have blocks saved as components as they are already optimised for mobile devices.

I’m preparing to launch a website for a Charity and really I can’t stress enough how much time Pinegrow has saved me, because for this project I’ve worked exclusively within PInegrow and I have access to all these blocks that I can drop into the page, blocks that I can also use for mock-ups.

To me the best is to pair :
Bohemian Sketch + Affinity Photo
Pinegrow + Sublime (or Atom)
And Codekit 3 (or Terminal)

Simple, Affordable and very effective
(+ there’s Affinity Publisher in 2017 to come and replace indesign…)
Still for those multimedia artist keep Adobe cloud because there’s nothing to replace After Effetcs, C4D, Premiere and Audition… that’s making this offer incredible because you can do anything you want with Adobe Creative Cloud… But yes for web design no need of adobe CC

I hope they release the SublimeText (both 2 and 3) plugin for PG 3.0 (and 2! :slight_smile: ) as they have done with Atom editor. It was mentioned an age back, but never happened. I can only use ST at the moment but its all set up nice :slight_smile: I’d love to have the intergration.

And how do you go about it @Bio-Designer, do you design graphically first with those chosen tool sets?

it’s really depends about the project itself (small project vs big project), product, target, communication strategy. Also, we were in an era of complicate web with a lot of new modern thing, multiple devices and resolution, new technology and some others limited or dropped… things get complicated and need a real strategy at the beginning of the web project planning/briefing. it’s also depends about the existing assets or whatnot. If you create things from the ground-up, adapt or re-design.

But of course, the responsive boards (mobile - tablet - screen - large screens) starting template in Sketch or whatever Wire-framing tool like a paper or balsamic mockup can be a good start point to layout ideas with the customer or the company.

in these days the content is the king… and less the graphic designer to experiment and/or serve an experience immersion like it was with adobe flash years ago and/or 3D Web projects…

1 Like

As of late, it involves breaking out a real ide such as Brackets to correct all the things Pinegrow jumbles. Pinegrow 3’s leaves much to be desired. It would be nice if we could use delete in the view code pop-up without deleting the entire block of code.

Would also be nice if we could view a css file in full view, without wrap.

Speaking of line wrap, Why do we have to enable line wrap and then disable it before it stops wrapping lines? So frustrated with Pinegrow 3.0, 3.0.1, 3.0.2,etc

I am in the process of switching my “programming” editor from Brackets to Atom. Because the development seems to not be as active with Brackets and comparing the recent version of Atom to Brackets it seems to me to be pretty much the same software but faster and more features. I really like the ability to include multiple folders into one project with Atom. Can’t do that with Brackets.

My process really hasn’t changed much since I started this thread.

Notepad++ is still my main editor for hand coding though Atom is slowly getting more of my attention in that regard.

Pinegrow for the visual layout design.

Paper sketches and physical mockups with magazine type collages of overall design and look / feel of site and content layout.

Affinity Photo and Designer for visual element creation for icons, photo’s and visual content presentation.

Then combination of Pinegrow and handcoding to finish the project.

I have actually been using this work flow to create content packages for book format in PDF and physical form. Not just website content. It is interesting using HTML and XML to create PDF versions of content, I like the flexibility that Pinegrow gives with creating the visual layout. Not sure if anyone ever thought of using it for something other than website creation but I find it more flexible compared to office suites like Open Office.

2 Likes

Choose a layout
Modern design offers three main types of layouts to place important elements, according to the way the user scans a web page. You can choose between a Z-pattern, F-pattern or a Gutenberg diagram layouts. Your choice should be based on the type of website you have and the content you have here. (from how to create a website mockup avoiding common mistakes and pitfalls )

Yes, that is good technical layout information but what is the process you use to implement these patterns? Do you mockup by hand, in a graphic program or within Pinegrow itself? What is your work flow?

I have decided to change the software I use for mocking up designs and layouts. I added into my work flow more of a DTP all in one work horse for web and publishing, Xara Designer Pro X. Only reason I actually purchased it was that it was on sale right now, is on currently and it is hands on all development on same page. Graphic Design, Animation,Text and HTML preview and output versus just images with Affinity Designer / Photo.

I like the output format options, example the PDF and Print advanced options, jpg and png typical options for optimization and that the output looks the same whether it is PDF, Html or Print. Not many softwares accomplish this.
I would call this after playing around with it the Adobe replacement for all things print and web.

Pinegrow is still the hands down winner for the actual end point for web creation but you can take the output directly from Xara and import it into Pinegrow without issues. Which I can’t do with Static image layouts.

Will continue to use this work flow and see over time how well it works. So far just being able to edit graphics ON page without having to open a graphics editor, do the changes, import back into the designer or into Pinegrow and preview in HTML is so much easier, especially with multiple versions where you can hide and make visible each element as you want. Similar to Fireworks, or Photoshop Layers.

No, Pinegrow does not have this level of visual editing capability and I don’t think it should,. my view though. Maybe by version 5 we will begin to see the WYSIWYG that we are familiar with. Though for all in one page layout creation, out of everything I have used including Adobe’s options, this Xara Designer Pro X is closest I have used personally that does it.

I am not selling the software, this is not meant to be an ad for Xara it is just something I have recently been using within my layout mockup process, though actually going from static images to dynamic functioning html pages and featured sites in ONE program is so much easier. I am talking about Mocking Up layouts here.

Then exporting out into real html and importing into Pinegrow and working on the polished design in standards compliancy, OH so sweet…

You can mockup within Pinegrow, I have done it but I prefer more of a Photoshop like design process for laying out and mocking up the look and feel then create that in Pinegrow. It’s just MY process, not everyones.

So for my current work flow

Atom to Pinegrow for coding (php, js, html edits and manual css editing)
Xara Designer Pro to Pinegrow for layout mockup All the graphics, sample animations, html import
Notepad++ to Atom for quick things Atom isn’t great at.

Hi @Terry44,

It certainly has a wide gamut of features for a singular app. It’s probably worth noting that currently its for Windows Only , no Mac (or Linux) versions.


I see on the Xara site it describes:

• It can enable you to produce professional HTML5 /CSS3 compatible
• state of the art websites; CSS3/HTML5 compatible, responsive
• all without you having to understand these technologies or get involved in coding
• etc.,

However, looking at some of the website themes or user sites linked to on there site, the output seems to have a lot of inline styles, perhaps perhaps some divitis, etc.,

NOTE: I know you are not using it as an end product for web deployment and are merely using it for mockup for final scaffolding and build out in Pinegorw, Atom, etc.,

:wink:

But I am curious…

What is the quality of the HTML / CSS source?

Is the quality as such that once in Pinegrow you can run with it without gutting it and literally rebuilding things? I ask because most apps that are so wide ranging with features that also include HTML output, historically output terrible HTML as an after thought, Adobe for one ;-).

So are you saying this outputs clean HTML thats ready to run with in Pinegrow? Can you explain regarding this further. I am on Mac so can’t test it, but remain curious.

Just curious, what type of things?