With modern CSS properties including Grid, Flexbox, Multi-column, and Shapes, designers have countless opportunities to make diverse, and engaging designs. Sadly, many of us haven’t had the memo which gives us permission to make more interesting work, so I decided to write that memo. Feel free to modify the message for your company or organisation and of course, circulate it to the designers on your team.
I’ve written plenty of times before about how important it can be to look offline for inspiration to improve the things we make online. Last year, a few friends and I met in London for an inspiring visit to the Photographers Gallery.
For the past few weeks, I’ve been working with Equfund, refreshing their visual identity, redesigning their website, and developing a consistent brand experience for customers across different channels and touch-points.
One of my earliest blog entries, all the way back in May 2004, was about a favourite technique for creating colour palettes. It was a technique which I’d used for years, even then. Now I have a new take on creating colour palettes, it’s time to revisit that topic.
Back in January I wrote about why I believe that style guides and component/pattern libraries should be beautiful as well as functional. That to be effective, they must cater for the different needs of creative and technical people by inspiring as well as informing.
While I’m finalising the table of contents for my ‘shot,’ I’ve been thinking about the things that I regularly do when I’m ‘Designing with a Browser’, one of which is using the contenteditable attribute in the templates that I share with clients.
Over the last few months, we’ve been working with a client on the design of a mobile analytics ‘web app.’ I’ll show more of it when we add it to our portfolio, but because lately one or two people have asked me about how we choose colour palettes, I thought I’d share how we came up with the colours for the Elemez app.
Spoiler alert: I’m discussing a theme from the first half of the latest series of Mad Men, season 7, but I don’t mention what happens to major characters.
Towards the end of the 1960s, technology had begun to creep into advertising and in ’68, Mad Men’s Sterling Cooper and Partners agency (SC&P) install their first computer, a room-filling, low-humming IBM System/360.
Last week, Cennydd Bowles wrote his Letter to a Junior Designer. It was widely shared and commented on, but while I enjoyed Cennydd sharing his experience—he is, after-all, an experienced product designer—I felt that his message and tone were profoundly negative.
Some commenters want to use initial-capped Responsive Web Design to mean responsive design as Ethan first defined it, and lowercase responsive design to mean an amorphous matrix of exciting and evolving design thinking. Lyza says soon we’ll stop saying Responsive altogether, a conclusion Andy Clarke reached three years ago.
I like to think that at Stuff and Nonsense, our house isn’t so much a place to work as it is a house of fun and although we take the work we do very seriously, we don’t take ourselves too seriously at all. We hope that sense of fun comes across on our site and today we’re putting aside our embarrassment, putting on our baggy trousers and unveiling a new header on our home page.
If you listen to Unfinished Business, you’ll know that I’m a big, big fan of Hammer For Mac, the app its developers say lets you create HTML builds & templates quicker, more efficiently & more conveniently. Hammer works for us because these days we mostly deliver static HTML and CSS templates, instead of static visuals, and we rarely develop complete sites.
I’d always admired the work of, and the people behind the Web Standards Project. What they had achieved in only a few short years in bringing browser vendors and tool authors together behind open standards was nothing short of magnificent, so when I was asked to join the project on March 31st 2005 it was an ambition fulfilled.
You might think — because all the talk at the moment is about seven inch tablets, in particular the iPad mini vs Google’s Nexus 7 vs Amazon’s Kindle Fire HD — that a seven inch tablet was a seven inch tablet was a… Right? Wrong.
Thank-you to everyone who tweeted and emailed about the site. The reaction was overwhelmingly positive. More than I’d hoped for. And I’d hoped for a lot. Some of the comments came with bugs I need to fix and suggestions for improving the site and its performance overall. I’m really grateful for that. A little bit of follow up from yesterday’s site launch.
You know those responsively designed sites where — on small screens like smartphones — navigation is either hidden or set at the bottom of a layout, then revealed when you click a button? Well, I think we need a standard ‘show navigation’ icon for that button in responsive web design.
When we’re designing responsively, getting type sizes right can be tricky. On small screens especially, we need to make sure that passages of body text are comfortable to read and that we don’t set headings too large or with too much leading.
Tools like Fireworks and Photoshop can’t cut it for responsive design — they’re bringing a knife to a gun fight — so I needed to find a way to decide on my type sizes before I start using Fireworks or Photoshop.
So I made type reference files and uploaded them to a server (and now to GitHub.) There’s really not much to them. They contain only headings, paragraphs and small text, but of course you could expand them to include any number of different content types if you need to. I open them on all my test phones, e-readers and tablets.
Because different typefaces need different treatments, I made type references for both serif (Georgia) and sans-serif (Helvetica) typefaces. The next time I start a project, I’ll likely hook up one to my Typekit account too, so that I can test my web fonts on real devices before (and during) a design.
I’m sure that smarter people can improve the tools for a technique so I’ve posted my files up to GitHub (whatever that is.)
Brad Frost wrote about Responsive Navigation Patterns, Alexis Fellenius Makrigianni followed up with his thoughts. Both mention a responsive design pattern that was the subject of much debate at this month’s series of Fashionably Flexible Responsive Design Workshops in Australia — transforming a navigation lists into a select menu using scripts like TinyNav.js at small screen sizes.
This year’s been one of my busiest for speaking, teaching and designing for clients. You might not be able to tell that though, because when I deconstructed this site a few months ago, my portfolio was one of the things that didn’t find its way back. I’ll rectify that in the new year, but in the meantime I wanted to share some of the projects I’ve been working on, starting with this — a redesign for ISO, the International Organization for Standardization.
I’ve been wanting to create a new look for Stuff & Nonsense for a good, long while, but I felt daunted by how much work I imagined there’d be for a redesign. My work diary is so full that I couldn’t see the time I thought I needed, so the site stagnated and over the last few months I couldn’t bear to look at it. Then a few weeks ago, Elliot spontaneously redesigned his site and inspired me to follow suit.
Since Ethan Marcotte first lit the fire at An Event Apart in Seattle last year and later in that article, we’ve gone crazy about Responsive Web Design. But the more I think about what this means, the more CSS3 Media Queries I write, the more I realise something. I just don’t care about Responsive Web Design. I’ll tell you why.
If you didn’t get a chance to catch my Hardboiled Web Design talk at a conference this year, your luck just came in. Those fine chaps at CodeWorx have posted a high quality video of the entire talk. I’ll post a text transcript and slides from the talk later this week.
Back in August I started work on a new design for MobiCart, a new mobile e-commerce platform, designing both the front-of-house site and the back-end admin. It was fun, although it lasted only a few weeks.
It seems like months ago (it was) when I handed over my design templates for the redesign of CannyBill. Since then, the canny chaps have been working hard to implement the design and @RellyAB has been working her strange magic on their copy. Yesterday the new CannyBill site went live.
I’m in the middle of preparing materials for a new book, “Hardboiled Web Design”. To demonstrate CSS3 selectors, transforms and transitions I’m putting together a page in the demonstration site, “It’s Hardboiled”. That’s where you come in.
Now that our For A Beautiful Web workshops calendar is closed for the year, it was time to push live a redesign of that site with a focus on my new DVDs. This was a chance for me to play, both with HTML5 and CSS transforms and transitions to spice up the interface.
Web forms often ask visitors for non-essential information, but long and complicated forms can hinder a sales or sign-up process. Wouldn’t it be cool to give users the option to hide these optional fields at their own discretion. (This entry was originally posted in 2004 and has been updated in 2009.)
Before we send over our design files to the chaps at CannyBill, first a run through of the browsers that we have tested in the new design and some musings about what browser testing actually means today, in the face of an ever more diversified browser and device landscape.
With the first phase of the CannyBill redesign process drawing to a close, I would like to say a huge thank-you to the CannyBill team for encouraging a public, open design process and to everyone who has commented and tweeted their helpful suggestions.
When is it the right thing to do not to attempt to reinvent a well established, tried and tested design pattern or convention. This question has come up while I have been designing the CannyBill prices and plans page.
It’s not everyday that I get to work with a client that completely gets why it’s important to push the progressive enrichment boundaries by using HTML5 and the kind of advanced CSS styling that I teach at my workshops. Luckily, the CannyBill team do more than get it. I’d like to share a little of the HTML5 and CSS that I’m using for this project.
Liked most of my projects these days, I’m designing the next iteration of front of house site in a browser rather than making static visuals of page layouts. I know I’m in danger of sounding like a broken record, but I genuinely do find the process to be faster and better at scoping ideas and demonstrating them to clients. So I thought I’d share the start of this process and the files that I use.
After two weeks on the CannyBill redesign project (one of which I spent traveling to Chicago for An Event Apart), it time for deep breaths as I talk about my design of the home page for the new CannyBill front of house site and ask for your thoughts and suggestions.
While open to the public redesign projects have lately been popularised by Mark Boulton Design‘s work for Drupal and by Happy Cog‘s work for Mozilla, it’s rare to find a commercial company involved in an open project.
It’s here — months in the planning and weeks in the making — the new Stuff and Nonsense. The new design is a continuation of my efforts to blend professional and personal styles into a brand that is as much about my personality and interests as it is about our work.
With all the buzz around @font-face delivery services such as Typekit, one question remains to be properly answered. How can web designers show concept work to their clients when the fonts they want to use are hosted (and protected)?
I’ve been slowly evolving the design of For A Beautiful Web over the last few months since I relaunched it in April. Back then I stripped it back from its almost universally unpopular first design, then added hints of a future direction on the home page. Now that design has matured and today I launched its sister site at Transcending CSS.
It’s been one helluva busy, tiring but inspiring week, traveling first to speak at An Event Apart Boston, then, with Jeremy Keith and Jason Santa Maria onto London for @media2009. At both events, I presented Walls Come Tumbling Down. Here are the presentation slides and transcript.
It’s been ten days since I uploaded the last batch of New Internationalist design files. Since then the team at New Internationalist have had time to live with the templates and make a small number of suggestions and requests that I have implemented over the last couple of days.
Last Monday, I met up with the New Internationalist team to talk about what we had accomplished so far in the redesign and the remaining issues. As he was in the area, we were also joined by my friend and design meeting interloper Dan Rubin.
Now is the time, particularly during this open design process, where I get nervous about presenting the design I hope to launch. While I know that there are still aspects left to resolve, I wanted to share my process and thinking behind what I’m showing today.
For the last few days I’ve been working on the branding aspects of my New Internationalist redesign and I have to admit that I’m struggling. There is a raging argument going on in my head. Please help me make it stop.
As I’m putting together Walls Come Tumbling Down, the talk that I am giving this year at @media 2009 London and An Event Apart, I wanted to share some of my notes on how the current recession will affect the way that web designers and developers work.
It’s possible that this should be an elsewhere entry, but as so many people have emailed, tweeted and otherwise asked about the placeholder images that I’m using in my New Internationalist redesign process, I thought I’d share the source.
Thanks to all of the excellent and constructive feedback so far, I am today working towards the New Internationalist pages that I am designing being feature complete and ready for sign-off next week. With that in mind, I wanted to share with you a top-down view of all of the pages that I have been working on.
Most often when I’m designing a new site, I focus first on its content pages. Then, working from the inside-out, I finally arrive at the home page. This is the approach that I’ve taken in my work for New Internationalist. That said, a site’s home page is often what people want to see first, so who am I to disagree? Today I want to share and invite your feedback on my work on the New Internationalist home page.
When I was asked by New Internationalist to design for their online magazine, blogs and shops, the challenge seemed pretty daunting. The New Internationalist site has content that reaches back over thirty years, more page templates than you can shake a riot policeman’s truncheon at and a structure that involves some complex interaction design challenges. I also have limited time, budget and resources available.
As part of the New Internationalist redesign project, I’m focussing on how the organization presents itself online. To begin that process, I’ve been researching the printed magazine since it started in 1973. (I should stress that I’m not working on the organization’s overall branding, nor the design of the magazine.)
A few weeks ago I received an email from New Internationalist magazine asking me if I’d like to work on the redesign of their online magazine, blogs and shop. I was away from my studio when the email arrived so I pecked out a quick reply on my iPhone. I think it went something like New Internationalist? Oh fuck yes!
It’s always a pleasure to have the opportunity to build on work that I have done in the past, so a few weeks ago I jumped at the chance to work on a small visual design realign for my friend Richard Rubin of Really Worried fame.
This week Brian Suda and I launched tweetCC, a Twitter micro-app that allows Twitter users to declare a Creative Commons license for their tweeted content. I’ll be writing more about why we decided to make tweetCC and why licensing you tweets is important in a future entry, but as several people have commented on my design and CSS implementation, first a few words about them.
Today it came to light in a blog post on Microsoft’s IE Blog that the company intends to include a new ‘compatibility feature’ and black/white list that it hopes will help users if sites break in the up-and-coming release of Internet Explorer 8.
Let’s be fair, few customers are professional writers and few hire one when making a web site. That is why I now include professional copywriting into every estimate as a non-removable item. When customers are adding their own copy to a site, I give them ten simple tips to follow.
With only a week to go until our first Visual Web Design Master Class in London, I’ve been taking time away from client work to focus on writing all new content that I hope people attending will really love.
Web designs need not look exactly the same in all browsers. I know that’s a topic I have written about and spoken on a fair amount before, but somehow I’m always amazed by the reactions that I get when the subject comes up.
Demonstrating our designs to clients as XHTML/CSS pages rather than as static Photoshop or Fireworks has streamlined our workflow and helped us to set and manage a client’s expectations better than ever before.
When I set out to design the site to launch For A Beautiful Web I knew that I wanted to set a new tone and arrive at something a little unexpected. One of the ways that (I hope) I have achieved that level of unexpectedness was to turn to a classically trained artist, rather than a web designer for creative direction.
To my complete and utter amazement, Jon Burgerman has agreed to create something truly, but unsurprisingly unique for this site. In doing so he has made me realise just how different a feel a new illustration can create, even when nothing else on a page changes.