I’ve thought often of how our design and prototyping tools for the web are often not of the web. Tools like Photoshop and Sketch and Invision create approximations but need to walk the line between being a tool to build native apps and to build web apps. They do well in their ability to quickly validate designs but do little to validate technical approach.
Thursday, July 12th, 2018
Sunday, January 14th, 2018
If only our digital social networks were to exhibit this kind of faded grandeur when they no longer exist.
Wednesday, August 24th, 2016
I giggled at quite of few of these mashups.
Thursday, January 8th, 2015
An important clarification from Stephen:
You don’t actually design in the browser
When I speak of designing in the browser, I mean creating browser-based design mockups/comps (I use the terms interchangeably), as opposed to static comps (like the PSDs we’re all used to). So it’s not the design. It’s the visualization of the design—the one you present to stakeholders.
Personally, I think it’s as crazy to start in the browser as it is to start with Photoshop—both have worldviews and constraints that will affect your thinking. Start with paper.
Tuesday, December 2nd, 2014
A history lesson and a love letter to the early web, taking in HTML, Photoshop, and the web standards movement.
Those were long years, the years of drop-shadows. Everything was jumping just slightly off the screen. For a stretch it seemed that drop-shadows and thin vertical columns of text would define the web. That was before we learned that the web is really a medium to display slideshows, as many slideshows as possible, with banner ads.
Thursday, April 17th, 2014
A nice summation by Dan of when it makes sense to use a graphic design tool like Photoshop and when it makes sense to use a web browser.
Friday, February 1st, 2013
I really like Dan’s take on using Photoshop (or Fireworks) as part of today’s web design process. The problem is not with the tool; the problem is with the expectations set by showing comps to clients.
By default, presenting a full comp says to your client, “This is how everyone will see your site.” In our multi-device world, we’re quickly moving towards, “This is how some people will see your site,” but we’re not doing a great job of communicating that.
Wednesday, May 2nd, 2012
The Old Aesthetic.
Wednesday, April 25th, 2012
This seems like an eminently sensible thing to do when building responsive sites: ditch mock-ups entirely. The reasons and the workflow outlined here make a lot of sense.
Saturday, March 24th, 2012
I want to go to there!
This is what Photoshop is for. Be sure to watch the slideshow.
Monday, February 27th, 2012
Mark talks about the tools web designers use and the tools web designers want. The upshot: use whatever you’re most comfortable with.
Monday, January 9th, 2012
An incredibly realistic Photoshop simulator built in the browser—it feels exactly like using the desktop version.
Thursday, January 5th, 2012
Funny but creepy. Freepy.
Where men meets moustaches meets hair meets moustaches meets hair meets MOUSTAIR.
Tuesday, August 9th, 2011
I know this is probably inappropriate (comedy is tragedy plus time) but I am getting quiet a giggle out of this. I know, I know: too soon.
Sunday, March 20th, 2011
Cruel in a subtle sort of way: re-posting slightly tweaked Facebook photos of one poor guy.
Wednesday, December 15th, 2010
Friday, August 27th, 2010
Yes, yes, yes: "A PSD is a painting of a website.” We don’t spend weeks or months understanding a client’s complex needs and issues to make them paintings.
Thursday, June 3rd, 2010
Tools of a different trade
I was in Boston last week for An Event Apart, the second of five instances of the travelling web roadshow touching down in the US this year. As with Seattle, all the talks were of a ludicrously high standard. Tickets are still available for the Minneapolis leg; grab ‘em while you can.
What’s fascinating about seeing all the talks together is finding the unspoken connections between them. Without any prior co-ordination, myself and Aarron had moments of crossover with our talks, Emotional Interface Design and Paranormal Interactivity.
Your designs should embrace the diversity of browsing experiences offered by different devices.
Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.
Here’s my quick three-step guide to ensuring your websites work in just about any device:
- Mark up your content with a logical source order.
- Style your markup into a flexible—i.e. liquid—layout.
- Use media queries to re-arrange the layout for varying viewport widths.
There are very few legitimate reasons for using a fixed width site, the main one being concerns over the line length on a fluid width site; obviously as the site gets wider, the line length gets longer which is bad for readability. This is can easily be countered by using max-width, larger font sizes and so on but is really quite faulty thinking – if the solution is a fixed width site that’s sized for 1024×768 then if you’re window is any smaller then that then the line isn’t readable at all, which is obviously much worse.
I also think he was spot-on with his explanation for the prevalence of fixed-width layouts:
When you make a web site design (probably in something like Photoshop) it obviously starts off as static — you have no way of testing how it’ll stretch in a browser. You’ve got to picture how that’s going to work, and design accordingly.
Photoshop and Fireworks are great tools …for tweaking photos and creating icons, gradients and textures. When it comes to laying out web pages however, they are worse than substandard. They are actively harmful. They reinforce the incorrect idea that there is a way of representing the browsing experience in anything other than a browser.
What’s ironic is that designers who continue to shackle themselves to Photoshop and Fireworks do so because they claim that designing with HTML and CSS in the browser limits the design possibilities. And yet they are perfectly content to limit themselves to an environment where designs cannot be resized, cannot respond to varying text sizes and typefaces, and cannot convey even the most basic of interactions.
Tuesday, August 25th, 2009
Two little tips courtesy of Dan.
Monday, September 29th, 2008
Andy makes a great case for presenting clients with designs in HTML/CSS rather than flat, fixed, non-interactive graphics.