Start Coding with Wireframes

by Matt Griffin

22 Reader Comments

Back to the Column
  1. I love this concept and the value proposition (we debate it often here at our shop). Our challenge is balancing speed and coding wireframes when it is most appropriate for fidelity, budget and workflow. Thanks for the encouragement!

    Copy & paste the code below to embed this comment.
  2. Chris,

    When you move to designing in the browser, too, the long-term benefits are obvious!

    Also, there are many ways to raise efficiency with this process, some of which Patrick Fulton and I talk about here: http://www.creativebloq.com/web-design/three-ways-design-extensibility-21410721

    I’ve been known to knock out a homepage wireframe in under 2 hours using our starter kit. :)

    MG

    Copy & paste the code below to embed this comment.
  3. Great article. I’ve always found it easier to demonstrate a concept through a functioning wireframe. In fact, it’s a great way to start usability testing ideas by validating working ideas so early on. I personally use the framework Wirefy but I definitely want to test out Stubble

    Copy & paste the code below to embed this comment.
  4. Such a great read – we started doing this at Forty on our more complicated web-app projects and it’s like it was made for an agile shop; it’s so much easier to communicate functionality with our clients when they can actually click through the framework.
    PS – I’m finding codeacademy.com to be an excellent resource for HTML and CSS as well!

    Copy & paste the code below to embed this comment.
  5. Good point Larissa! Codecademy is great.

    Also, for in-browser annotations, there’s metaframe: https://github.com/elliance/metaframe

    MG

    Copy & paste the code below to embed this comment.
  6. This is a nice reminder to focus on planning properly before coding. I’m looking to dive in with http://teamtreehouse.com/ myself and do this full time. Thanks.

    Copy & paste the code below to embed this comment.
  7. Nice, another fine learning option with Treehouse. Good luck Marcos!

    Copy & paste the code below to embed this comment.
  8. Hi Matt,
    What the next step after we finish our wireframe in HTML code?Should we move to Photoshop to adjust the color, matching font style, etc? Or we can stay on the wireframe and make it looks good without moving to Photoshop?

    I need your opinion how the next step should be. Because sometimes I need to go back to Photoshop after I finish my wireframe in HTML code to make it looks good as a real website. In Photoshop I feel confident to play with color, add some decorations, matching font-style before I apply them to my wireframe. But I know It can be done by adjust our CSS.

    That’s why I need your opinion how the next step should be :)

    Copy & paste the code below to embed this comment.
  9. Really great idea! Got quite sick of throwaways and the unicorns are coming. As someone who learns better from inspecting source rather than reading instructions, I’ve started to use Webflow to wireframe. I can export the code from there and inspect each section and element, gaining at least a semantic understanding of the code and markup.

    I’ve read HTML & CSS, and it’s fantastic for those that retain ground-up instruction. Nice resources all around. Thanks a bunch.

    Copy & paste the code below to embed this comment.
  10. Hear hear.
    Been doing this for 2-3 years now, no throwaway psds, no inconsistencies, a REAL stylesheet, which actually serves as a stylesheet and even more important, made me think more about information architecture than I ever had when designing in Photoshop.
    Triple win.
    Combined with pre-processors, mixins, extends and sass placeholders: almost pure gold.

    Copy & paste the code below to embed this comment.
  11. I don’t think that this is a good idea, as a designer you should focus on what really matters: colors, patterns, behaviors or interactions, not on writing code. I’m really supporting the idea that designers should know the web beyond the photoshop, but writing code for wireframes… I’m not sure that this is a good advice. Developing a html&css; prototype could be very time consuming process. Time is precious. There are a lot of great tools available on the market that can save our time and help us to deliver great prototypes at the same time. Why not to use these tools?

    Copy & paste the code below to embed this comment.
  12. I’m sorry but this is going to sound snarky. In the year 2014, there is a job description for Web Designer, Interactive Designer, UX Designer, and at minimum it requires knowledge of HTML/CSS. I’m one of the web designers that had to cut a place for myself in the market from 1998 – 2006 or so when employers said, “but I already have a designer, what’s your value?” If you want to work the medium, know the tools. For pete’s sake, even Photoshop will write CSS for you now. It’s shocking that an article like this would appear on ALA today.

    Copy & paste the code below to embed this comment.
  13. The article isn’t as shocking as realizing there are people that have managed to survive this long on the understanding of the theory of UX alone. If not for employment purposes, one would hope that an inquisitive disposition might lead to further exploration in one’s field. That’s like having an art teacher that never produced any work- can’t paint, draw, or sculpt, yet is considered to be an “expert,” and is trusted for their opinion. How can you value their critique completely if they don’t even understand how the parts function and come together?
    If anything, a common base level of understanding or shared skills benefits all those involved. It’s key for any and everyone involved in design to at least dabble and experiment with development, programming, IT, etc. Also your team will be less likely to laugh at you when you request something that’s less feasible to implement- mainly because you’ll understand what’s feasible and what isn’t….

    Copy & paste the code below to embed this comment.
  14. I’d been a print designer for, oh, ever, but started learning HTML/CSS as I began making websites. A basic knowledge of code is a must for designers, IMHO—especially on small or distributed teams. It is immensely helpful for brainstorming ideas with developers.

    But I’m still building basic mockups in Adobe presentation software, and am finding it an increasingly kludgy way to work. Although it’s comfortable, I can’t show any interactivity and the process is time consuming. I think the time is better spent creating basic code and dynamic wireframes that can be expanded on later. With responsive design and gajillions of viewport sizes out there, this seems to be the most forward looking strategy, and still follows Design 101 “Form follows function.”

    So thanks for the article and listing of various flavors of wireframe software—this plus a good text editor should help get me where I need to go.

    Copy & paste the code below to embed this comment.
  15. This article isn’t actually about the merits of designers learning about html/css (despite the introduction), it’s a suggestion to wireframe in code. We all agree that some cross-discipline knowledge is beneficial.

    Now, each to their own, but… As a UX designer and front-end coder (no graphics) I try and keep the ‘how’ part away from the wireframe stage as much as possible. Wireframing is about ‘what’, and tying that too closely with the ‘how’ of coding can stifle creativity.

    While I can see this approach working for relatively standard website projects, for something like app design it seems way too cumbersome. I find prototyping in Omnigraffle very fast and Invision provides enough interaction for wireframes. A homepage mock-up using those tools can take a lot less than 2hrs.

    In any case, thanks for the article Matt :)

    Copy & paste the code below to embed this comment.
  16. Rizqi,

    Take a look at a couple of my other articles for help with those steps:

    http://alistapart.com/article/responsive-comping-obtaining-signoff-with-mockups

    http://alistapart.com/article/client-relationships-and-the-multi-device-web

    MG

    Copy & paste the code below to embed this comment.
  17. Wow, thanks for all the feedback, folks! There are certainly many tools out there for use, and they all have their merits.

    My advice would be this: don’t be dogmatic about your tools. Choose the right one for the job. There may be points where Omnigraffle is an efficient way to sketch out an app interaction (personally I use whiteboards, sketchpads, and then … HTML and CSS – which is really nice for user testing). But remember that Omnigraffle etc. files get thrown away sooner or later.

    At a certain point, code must be written. And those 2 hours spent writing wireframe code means less hours spent later in the project. It’s important to consider project-scale efficiency, and not just the efficiency of a single deliverable in the process.

    Ben Callahan at Sparkbox talks very eloquently about the path to fluency with a new tool. With any new approach there is a learning curve before we achieve fluency (and thus efficiency). It strikes me that tools go in and out of fashion (how are those Flash chops holding up now, amiright guys?). HTML and CSS, however, (being the primary building blocks of the web) will be around for a while yet. Whether you implement with HTML and CSS on any one part of the process or not – it seems like a wise investment of your time if you’re building web things.

    MG

    Copy & paste the code below to embed this comment.
  18. “and a handful of crossed-out FPO images.”

    Or use dummyimage.com or any of the other dummy image services http://www.russellheimlich.com/blog/list-of-dummy-image-generators/

    No need to waste time generating FPO images yourself.

    Copy & paste the code below to embed this comment.
  19. Hey there Russell,

    Personally I prefer my own images because they’re visually more unobtrusive. But if you are going to go the generator route, and need a little pizzazz in your life, don’t forget Nice Nice JPG:

    http://www.nicenicejpg.com/

    MG

    Copy & paste the code below to embed this comment.
  20. I’m glad to see this concept catching on. I have been using this method for about 6 months, ever since I discovered Foundation by Zurb. Clients love seeing a functioning wireframe. It gets all the team members on the same page and moves the project along faster. Everybody wins.

    Copy & paste the code below to embed this comment.
  21. After designing an entire responsive e-commerce website using only balsamiq and some grids to show breakpoints I discovered Adobe Edge Reflow. It’s currently a free beta so some functionality is TBD, but it can take a photoshop mock and output a decent starter in-browser mockup with custom fonts, then you can edit the css and html assets manually to create a final interactive responsive mockup.  I think this workflow shows promise, and would encourage UX designers to try the program and inform Adobe about what works and what doesn’t so it can reach its full potential.

    Copy & paste the code below to embed this comment.
  22. Hey Matt, great article. How do you suggest dealing with the problem that a lot of folks new to code might not be writing the most semantic markup? Or using pure CSS when a dev is using SASS/LESS. Do you feel that handing some OK code (wireframed or with aesthetic CSS) to a developer that might have to be re-written is still a better starting point than using a responsive wireframing tool like Axure? Been struggling with this for a while with an in-house team that’s stuck on outdated workflows.

    Copy & paste the code below to embed this comment.