↵

Do you design in the browser?

9 years ago from Wes Oudshoorn, Co-founder at AppSignal

  • Yuri VictorYuri Victor, 9 years ago (edited 9 years ago )

    I only design in the browser.

    I love it for two reasons

    1) Changes are fast. If you have to add another item to a navigation, that's one line of html <li><a href="">my item</a></li> but in Photoshop it's resizing every nav item and moving everything around and then doing that for all the other breakpoints.

    2) I work in news and a lot of what we do is time sensitive so sometimes we have to take a lot of shortcuts.

    Tools

    We use Middleman for one-off apps and we have a lot of middleman templates that generate most of the background code we need.

    I also have a bunch of grunt tasks and templates that help me quickly spin up projects.

    Also, our Media Stack, Chorus, has a SASS tool built in with articles.

    Tips

    • Never start from scratch
    • Make code and design elements reusable
    • Share the workload by building tools that allow non-designers to do design work or at least support designers in helpful ways
    • Pull data in from spreadsheets or some type of data source, so others can edit copy or change photos while you're designing
    • Use an iterative process to scale design (The first time you build something it might take a couple weeks, the second time a couple days, the third time it should take less than a couple hours)
    1 point
    • Mitch WarrenMitch Warren, 9 years ago

      I totally agree.

      With every site I build, I'm constantly adding reusable chunks to my personal code library. It was hard at first, but once you've iterated a bunch, and you know and have trust in your own library - building is FAST.

      I'm keeping a list of notes with each project, to document where I'm getting tripped up and how to improve for next time. That iterative process is so important.

      As someone said above, clients do have a hard time understanding what's going on without PSDs - and I do agree. No client I've worked with has ever grasped the "design-in-browser" thing and that's been a bit of a burden until recently.

      I designed a website for a client a week ago. I got into the browser as soon as I could - and once done - I used a screenshot extension for Safari to generate a full page image of the design. Each time the client wants a change, I'll tweak the code, and then just run the extension - linking them to the image. They also have the added benefit of seeing the live site too, but the images put them at ease.

      1 point
    • Liz CormackLiz Cormack, 9 years ago

      So jealous of Chorus... great advice, important to think in patterns you can pull from and reuse: http://patternlab.io/

      0 points