If only our digital social networks were to exhibit this kind of faded grandeur when they no longer exist.
Sunday, January 14th, 2018
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.
Thursday, April 17th, 2008
It’s time for one of the more, um… “interesting” slots at The Future of Web Design conference. It’s a live battle of the sexes with Photoshop as the weapon of choice. Whatever you do, don’t call it layer tennis.
Andy Clarke is the compére. He gets the show on the road by introducing the contestants one by one:
With the introductions out of the way, the game kicks off. The boys win the toss and elect to let the ladies go first.
While Jina makes strange amalgamations of Malarkey and robots, Andy sits down for a chat with Elliot and Jon. Jon is sharing insights into life at Rissington. Apparently John has taught him to swear properly.
A Twitter from the audience:
Mr. Hicks, you’re rocking the pipe and beer but where are the slippers and flat cap? Did I neglect to mention that they’re all drinking some very nice Belgian beer.
30 seconds for the first round. Meanwhile Elliot explains the challenges in going freelance like getting dressed in the morning. With that, the first five minutes are up.
Second round. The boys get Photoshopping and the girls sit down for a chat. While Hannah explains the revenue model for Last.fm, the lads pull up embarrassing pictures of Andy like the one where’s he drinking out of pineapple when we visited the Tonga Room.
Andy quizzes Jina on the differences between agency work and working for a large unnamed company.
Next round. Hannah has control of the decks. Andy says he’s trying to ignore what’s been constructed on screen. Inevitably, he quizes Jon on the Firefox logo. Jon tells the tale of receiving an enquiry from Burning Monkey Software,
could we get a monkey on fire wrapped around a planet? Since doing the Silverback icon, he gets asked to do more primates.
30 seconds left on the clock for this round.
Time’s up. The ladies have created a lovely montage. Now it’s time for the last volley. The boys really need to pull out all the stops.
The conversation between Jina and Andy resumes. They’re talking about creativity and other such designery things.
At this point, the alarm on Jina’s iPhone (which has been deposited somewhere near me) starts to go off. I must spend five minutes trying desperately to find it and switch it off. Just as I manage that, the Photoshop battle ends. Who won?