194 - Static design v in-browser design

Debate with Nathan Wrigley and David Waumsley

Poor audio warning! I have no idea what happened this week; sometimes David's audio is poor due to the vagaries of the internet, but mine is almost never that bad, but some gremlin got into my system this week! It's not that bad, it's certainly listenable, but I just thought that I'd warn you in advance in case you're an audiophile!

So the subject of the podcast today is where to design your WordPress website. Should you be doing this with a range of dedicated apps, or are the tools that are now available in the browser enough?

Setting up the Debate

We'd like to thank Tim from Tickyboom for suggesting the topic this week!

Over the years we've done this podcast we have both talked about how  WordPress Page Builders have moved us away from the traditional static design (made in Photoshop or similar) to starting and finishing in the Page Builder.

We’ve even warmed to the idea of using templates or templated sections as conventions about page layouts have become more informed by research on conversion rates.

But we have more interactive prototyping tool now with Adobe XD, Sketch and Figma (et al.) so it's time to look at this again.

Static design - David

• Better designs - stops you designing to constraints of the Page Builder
• The prototype tools like Adobe XD allow you to revert back to old versions
• Keep a consistency with element spacing 
• You can do art / mood boards and wireframes quickly
• Get all you image sizes right first - playing with fonts is quicker too
• Faster - if we have greater restrictions on layout of content, things can get boxy and predictable... if you want lots of overlapping elements or you have have vertical text you do more with vectors, even if that's only blob backgrounds
• It keeps everyone more focussed on aesthetics 
• The tools can be used in a quick way to get an 'okay' from clients on the initial look and feel... is something like this what you had in mind?
• Easier to share 
• Better for team working... the designer can get on with their thing while the developers do theirs
• You might even get a better designer with new ideas if they have not been too influenced by creating webpages - gives you challenges you might not think of
• Avoids you looking at easy whizz-bang animations to make up for poor design
• If you do want nice animations, you may be back in the graphics tool anyway with animated gifs or newer things like Lottie 
• There is a problem with sterile design coming from Page Builders. We see more people moving to hand drawn graphics, which you can only get from the graphic tools

In browser - Nathan

• Faster in term of getting started - saves money, because you're familiar with how it all works
• Lets you test speed and resources used as you work - it is all theory on paper
• You may think about or spot issue with browsers and device earlier
• Sets an expectations for client earlier (when I have been given designs, I have so many question myself, usually about what is full width or not)  
• It allows you to accommodate lower budget client without losing out  
• Lets you experience the interactions earlier (could save issues of poor usability)
• Animations - easily!
• Allows you give editor rights to clients for better collaboration
• Don't waste time on design that will not translate to the web
• Get them used to the tool that they will be using
• The client can be taught about WordPress
• Less dislocation from designer to me - ‘I can’t really do that with the tools I have' conversation
• The browser is the future and things like Chrome OS in schools means that the next generation are all about the browser, it's what they know and what they'll be using more and more

Final thoughts

David: It's rare that I don’t open a graphic program. My approach is more towards the browser. My approach is agile anyway and I don’t really want all the budget to go on design if none is going on traffic and conversion.

Nathan: I'm the same as David in that I really try to use the browser as much as humanly possible. This was not always the case, but now that the tools have evloved to the point where they are now, we can do almost 100% of it in the browser if the clients are willing!

BTW - Do you remember Page Maker, Quark, InDesign? David still uses Fireworks!

If you've enjoyed this conversation, please feel free to subscribe to hear about our latest content. Also, join our Facebook Group and get in touch with like-minded WordPress people!

Mentioned in this episode...

Stencil
Canva
Pixteller
Sketch
Figma
Adobe XD
Elementor
Beaver Builder
Brizy
Oxygen