Dive straight to code or wireframe

I was chatting with someone recently who’s building their first website for a paying client. He’s doing extremely well, grappling with setting up hosting, domain names, WIX, WordPress, CMS templates, Twig and HTML and CSS. That’s a lot to simply learn. Producing something that’s someone’s willing to pay for while you learn is doubly difficult.

One thing he was particularly frustrated about was receiving various files that he was expected to build web pages from. They might be Photoshop generated images or (a lot more usefully) Sketch wireframes. It’s a kind of baptism by fire – or by jQuery – where you try and wrangle something that looks like something else that’s constructed differently, and serves a different purpose.

When I build sites for paying customers, I think I have been unfairly blessed and lucky, I think. I got work on the back of this website, and I suspect it’s pretty obvious you’re not going to get complex, poster-like layouts and effects from me.

So this site sets expectations nicely. I’ve also found that it’s important for the developer to control the conversation about what’s being built. And the only way to do that is to start building HTML as soon as possible in the process for comment and approval. Once the customer (or someone in your team) produces a Interface and asks you to translate it to Code, you’re either going to have to have a “difficult conversation” or spend your time pushing pixels and reaching for more and more javascript or abstruse, difficult CSS in order to wrangle your screen into the right shape. Responsiveness, manageability and speed become afterthoughts.

That’s not to say something like a Sketch-generated image doesn’t have its place as it can express things like tone, colour, mood and typography succinctly. Wireframes get you thinking about UI.

However, with concern to quickly prototyping, platforms and tools have emerged that intend to make that process more efficient and faster, taking you from wireframe to high fidelity mockups even to HTML, React, or any Mobile template build you prefer. In you free time you can checkout any of these solutions.

• UIzard
• Draftbit
• FramerX
• BuilderX