The dramatic changes of web design have transformed what used to be complicated to convenient. “The History of Web Design” to blueprint the start of it all and even offer a future forecast of web design to spark interest and trigger more site traffic.
When one goes to the professional, one expects to invest in his expertise. This investment requires no great leap of faith, as it is supported by a trust acknowledged among the general populace and duly warranted by the traditions of the profession. The standards and practices of an individual professional in the fields of, say, law, medicine, or aviation seldom present any great challenge to their clients’ preconceptions. Strict standards and regimented practices are the baseline assumption for all involved. Moreover, the results of those relationships generally support the ideal.
Unless we’re referring to the design profession. In which case, you can discount all of that.
Design, by comparison to other professions, is an odd and disappointing institution. While design exists as a profession in name at one end of the institutional spectrum, it also exists as a commoditized technical service industry at the other. And this is not necessarily a bad thing; it’s a construct of the market. It’s appropriate only within a very narrow context and far narrower than is generally assumed. But as I’ll argue in detail later, both designers and the public benefit from this commodity service aspect to the industry.
The problem with this situation is that there is no definitive guide for potential clients, detailing the differences between the commodity designers/agencies and the professional designers/agencies. To make matters worse, many who claim to be design professionals lack any understanding of the term and, therefore, erroneously claim it. As a result, those paying for a designer’s expertise often don’t know whether they’re working with a professional or anonprofessional until some matter of vital import in the midst of a project makes it abundantly clear. At that point, the entire community of designers either triumphs or fails in the eyes of some very important people: those who need our responsible expertise and have gone to the trouble to pay for it.
You see, the uncompromising standards of design professionalism are highly constraining, expensive, and sometimes even off putting. Yet for the sake of our reputations and our clients’ fortunes they are our industry’s most essential traits. Therefore, the constraints of professionalism must be embraced and the costs paid. I submit to you that the design profession is an imperative.
The lack of transparency regarding professional standards in the industry means that the entire Web design community is held responsible for the mistakes of individuals.
Many would disagree. I understand that for any of this to make sense or even matter to you, you’ve got to believe that design should be a profession. Moreover, you’ve got to know why it should so that you can substantiate your belief. But why hold with this belief? It begs the question: why can’t design simply be a technical service industry, free from the fussy standards and constraints peculiar to a profession? It so often does fine as just that! Why is it important that design be a profession?
My effort here will be to answer that important question in a compelling and convincing way. I believe that in order to understand the profession’s imperative and place, we must fully understand how nonprofessional services fit into our industry and, by the same token, understand the voids created by the inadequacies of that approach. I also believe that this examination must take into account the motivations behind factors that promote unprofessional ideas and practices. So to start, let’s look at the most familiar and most commonly encountered facet of the design industry: the nonprofessional world of technicians.
Design as Commodity Service Industry
The opposite of professional is not unprofessional, but rathertechnician. – David Maister, True Professionalism
Designers and just about everyone who employs them are familiar with the concept of designer as technician or service provider. Need a graphic? Tell the designer what it should look like and he can bang it out for you. Need an image gallery on a web page that wasn’t made to accommodate it? Show the designer how it should work and she can make it happen. Need a newsletter head mast font that communicates authority? Call the designer and he’ll send you 5 new authoritative candidates from which you can pick your favorite.
Multitudes of bosses, supervisors, and would-be clients already know what they want; they just don’t have the technical ability to make it. Call the designer!
Employing designers as technical service providers is an attractive prospect because it’s relatively easy, quick, and inexpensive. It’s easy for the designers too. Nonprofessional production service is light on obligation, plentiful, and often profitable. Design as a technical service industry addresses a market need and in this respect it’s necessary and beneficial. One could build a business doing this sort of work exclusively, and many freelancers and even agencies do just that. So long as the project’s scope and process aren’t too complex and the object of the work not significantly critical to anyone’s success, nonprofessional technical service may just fit the bill.
Keep in mind, though, that one feature of technical service employment, in contrast to professional employment, is that the designer gets managed. Working in a technical service capacity means the designer is there to provide little more than technical service, according to the standards, instructions, or whims of the one employing him. Design technicians need to be kept on task, on time, and their work moderated to reflect fluctuating supervisor preferences or customer preferences—whichever carries more weight. As in, “WAIT, lemme see… Well, the circle needs to be a darker blue. And can we make it more of an oval? Great. That page is going live in 30 minutes. Just send the graphic off to Jan when you’re done and she’ll put it up.”
The non-professional designer can provide quick, cheap fixes necessary to fast-paced businesses. As a design technician they aren’t constrained by artistic integrity. Image source: Jason Hickey.
This plentiful, light-on-obligation technical-service work brings with it certain tradeoffs. Costs, to use professional parlance. These costs are paid almost entirely by the customers, as they get results that are fractional to what could be realized in a professional relationship. The designers in these instances function merely as enablers to those costs and maybe even get paid well in the exchange. But there are some costs for the designers, too. They must suffer the potential indignity of having much of their expertise ignored and discounted, for instance.
For many, the benefits outweigh these costs. One of the more popular benefits is liberation from professional standards and constraints. For example, as technical service workers, designers and agencies have the luxury of taking on customers rather than clients. One does not discriminate among customers; all are welcome. In the commodity-design service realm, designers are engaged for their technical skill rather than for their uncompromising standards, depth of understanding, or ethical scruples. Therefore, one need not have years of experience or a rock-hard backbone to meet the minimal project requirements, which seldom include more than technical expertise. Technical skills are comparatively easy to project and maintain. Uncompromising moral and ethical standards, not so much. Those professional traits tend to chafe against the customer’s authority and strong will anyway (the customer is always right) and could jeopardize customer satisfaction and designer income opportunities. By contrast, the “I can do whatever you want me to do” approach is often more attractive.
Perhaps the most common articulation of nonprofessional design is subcontracting. Many designers and even agencies devote the majority of their project work to employing or being employed as subcontractors. Sadly, most subcontracting arrangements are not just nonprofessional but highly unprofessional, as they are set up to circumvent designer authority and critical communication in a fog of dishonesty. However, as long as the project context accommodates expediency and requires no significant investment or obligation, nonprofessional subcontracting (and no, there’s no such thing as professional subcontracting) can bring relative ease and speed to a simple project.
Subcontracting also extends the liberation of commodity service to larger projects and can thus expand profit opportunities. The results are inevitably mediocre, but there can be no denying that economy and expediency often outweigh quality concerns. There is a large and thriving market for “good enough,” especially when it preserves a strong-willed customer as the decision maker or obviates uncomfortable complexity in a project.
This arrangement can work so long as the results need be no better than what the customer or subscontractee can conceive of and allow. In these instances the designers are not expert decision makers, but rather the idea presenters and technical tool operators. Many designers are quite happy in this limited and comparatively safe capacity. Sometimes (most times?), however, clients need or are looking for something more dependable and more substantial than commodity design service. Professionalism is hard and many of its constraints present hurdles too great for designers to consider. But while designers typically balk at its constraints and obligations, the idea of professionalism is certainly attractive.
The Idea of Professionalism in Design
Without question, designers of all stripes love the idea of professionalism. It’s just that most prefer that idea remain as vague as possible in practical definition and application. The result is that the concept gets relegated to a station of subjectivity and cited merely for its halo effect.
I find that the vast majority of designers, when asked to define it, associate professional design practice almost exclusively with technical quality or “seriousness,” ignoring the uncompromising ethical, process, discrimination, and accountability factors. This is an unfortunate and disappointing sentiment, as professionalism has absolutely nothing to do with technical quality; which should merely be one positive result of projects involving professionals.
The reason for this preference is not so deep or difficult to understand: professionalism is expensive for designers. Proper preparation takes years and requires institutional guidance from senior professional peers. Professional standards impose grave responsibilities on the designer and are difficult to uncompromisingly maintain. They also tend to challenge the preconceptions of just about everyone who encounters them; designers included. According to the character of those brushing up against them, requirements for the professional conduct of design projects can be refreshingly positive or intensely off-putting.
Design is craft, but no matter how skilled you are as a designer, unless you are equally prepared in professional matters, your prospects will be limited and your circumstances compromised. Image source.
The refreshingly positive part is easy enough to understand. The off-putting part is due to the fact that few people inside or outside the industry expect designers to employ discrimination or to eliminate compromise with regard to moral, ethical, business, or process standards. Most potential clients and most designers believe that designers should simply behave as merchants; eagerly following whichever path the profit opportunity leads. Because unprofessional and nonprofessional employment has ever dominated our industry, most potential clients believe they should run their own project and make the design decisions after being presented with options. Most designers believe they should simply be told how high to jump and which hoops to jump through. Note: there exists no profession within those ideas.
As to expense, one unpopular result of maintaining professional standards is that a freelancer’s or agency’s viable client pool gets significantly reduced…which is nuts in the minds of most folks. Prevailing wisdom finds fault with any practice that deliberately limits opportunity for profit by applying what cultural convention perceives or defines as obtuse discrimination. Going along to get along makes far more sense. Why would anyone invite the difficulty of uncompromising standards into their life or their design practice? How does it even make sense that design should be a profession?
The Professional Imperative
When you think beyond the apparently easy money, cultivated expediency, and low-obligation assumed for some design projects, a couple of things beg for consideration:
these qualities can ethically describe only the most insignificant of projects, and
design results and the processes required for realizing them impact the experience and fortunes of real people.
People’s household incomes, staff payrolls, and economic futures often hinge upon how competent, how ethical, and how uncompromising their designers are.
These facts place a grave obligation on designers and on the industry itself. Every employment of a designer is an investment that demands a positive and profitable return. Designers have an obligation to meet that demand in prepared fashion. The fact is many projects—most, I’d argue—require understanding, skills, standards, and obligations beyond what is typically assumed. The commodity design service industry ignores this fact.
Uncompromising standards are the rule where quality and ethics matter, because these things are not bargaining chips. A designer’s comfort with or allowance for compromise has no place in a consequential design project. Since the commodity service approach is built on compromise and expediency,consequential projects can in no way be served by that segment of our industry. What’s more, common customer assumptions brought to commodity services are inappropriate in professionally run projects.
The ethical constraints for such projects do not allow for clients to compromise or circumvent the professional’s standards and prescriptions. This logical standard reflects the extension of the profession’s obligations into society and allows a design professional to demonstrate responsibility by not allowing the client to harm himself or others by deliberate choice and yet remain as a client. Despite how design organizations typically choose to define social obligation, it is established not on emotional or preferential grounds, but on moral and ethical grounds.
These moral and ethical grounds reflect practical mechanisms. For instance, clients need some acknowledged institutional assurance that their designer or agency will not abuse their relationship for financial advantage; that the fees paid and the work delivered amount to a mutually profitable exchange and not simple opportunism. They need the same reasonable assurance that their designer’s or agency’s work or process is not tainted by any conflict of interest. Moreover, clients need some acknowledge institutional assurance that their designer is worthy of the authority they’ve invested in him and that he is qualified to make the many crucial decisions in the project.
These qualities should be widely understood to be as associated with a specific segment of our industry; gathered up as the acknowledged professional qualities of members of the profession rather than happy exceptions that clients find by hit or miss. The term “design professional” should have an objective definition acknowledged by the public. Therefore, this segment of our industry must be devoted to a codified set of uncompromising standards. Design professionals should be identifiable to their client pool not because of how they lay claim subjectively to the term, professional, but by how they approach their dealings according to vital moral ideals and how they publicly proclaim adherence to an objective, ethical, social contract.
Ethical responsibility is not a now-you-use-it now-you-don’t proposition. To secure the long-term trust of clients professionalism requires that standards be rigorously kept. Image source: Jason Tester.
To survive, these qualities must be cultivated in institutional fashion. Otherwise they reside only in individuals, locked up rather than compounded among peers over time. The profession and its culture are created in agencies and studios run by design professionals. It is not created in schools or universities, organizations, or magazines; despite what those merchants would otherwise proclaim.
As professionals, designers then have obligations to society, to their clients, to their peers, and to the profession itself. These obligations are imperative and they require a culture that respects, upholds, and reinforces them with a frequency and pattern not dependent on individual-member whim. Ultimately, professionals are defined by how they meet and uphold the fullness of these obligations in the conduct of their work, and by no other measure (as great design quality must be one’s baseline assumption).
Though this is not the primary thrust of my article, I’m compelled to suggest here that few are well served and a great many ill served by the existence of a design profession in name only. With the character and concept of “professional” so greatly varied throughout our industry, designers’ self-described professional efforts often undermine the ideal. Far too many potential clients have rightly developed a cynical view of the design profession. Designers of all sorts fight this view and sadly have to shape their approach and process to mitigate it. This is a failure, as our practices should not be shaped by cynicism.
This is what you get when truly professional practice is represented and perpetuated not by thriving, consistent culture inside agencies and studios as a rule, but by disparate examples that are often refuted by the most common case. So while an actual design profession exists, it doesn’t in any cultural sense in the industry. This must change if our profession is to have any articulate and objective meaning in society.
As I referenced at the start of this article, it requires no great leap of faith or perceived gamble for a client of a legal, surgical, or aviation professional to invest requisite trust and confer full contextual authority in their dealings. These investments are assumed and required if a professional is to cultivate a positive or successful outcome for his clients. The cultures and traditions of those professions facilitate that permission. The cultural tradition of design is inconsistent on this point and that must change if designers are to be widely allowed to deliver the fullness of their expertise.
Technical service in a commodity market can work and can produce positive results. Designers can find profit and many customers can find satisfaction there. I submit to you, though, that the design profession as a distinct and conspicuous segment of the design industry is not just a commercial imperative, but a cultural and moral imperative. Professional should be not some vague, inarticulate idea or an exclusive and elite qualification beyond the reach of the average designer. It should be an expected compulsory station for most designers, fueled and perpetuated by the mainstream culture of our industry. ~ Special Thank to Andy Rutledge by Spotty Web
We tend to think of navigating a website as clicking from page-to-page via some kind of global navigation that’s always visible. When it comes to a single page, we often think scrolling is the one and only way to move from one end to the next.
Sometimes global navigation and scrolling are the best, most appropriate ways to move about, (however, they aren’t the only ways). SPOTTY WEB
The websites in this article let you scroll, but they also provide alternative ways of finding cues and means for getting around. In several cases the designs encourage exploration, which is both more engaging and also teaches you how to navigate at the same time.
TheJess and Russ’s websiteis a wedding invitation, though it’s also something more. As it says at the top of the page, it is the story of Jess and Russ leading up to this moment. It’s a narrative that begins with a few details before they had met, leads to their meeting and falling in love, and culminates with the invitation (complete with RSVP form).Jess and Russ
How do you navigate a story that’s told linearly through time? Sure, there are flashbacks and other narrative devices, but for the most part you tell the story from beginning to end. You move through it in a straight line and so here the navigation is simply scrolling through the page. Nothing more is needed.
I started this post suggesting we could provide more than scrolling. This example shows that, at times, scrolling is the most appropriate way to navigate. Jess and Russ’s website could easily have been broken up into several pages (navigated through the “next” and “previous” links at the bottom and top of each page). That would still keep things moving linearly, though each click would momentarily disrupt the narrative. In this case scrolling was the better choice.
Fortunately the website makes us want to scroll. Along the way we get an engaging story, filled with wonderful artwork and with interesting parallax effects. With this website you won’t get bored scrolling — instead, you’ll be looking forward to the next part of the story and how it will be told.
The story your design is telling may not be as linear as this one, though it’s likely parts of it will be. The lesson from Jess and Russ is that when you’redesigning the linear parts of a website and you want people to move through it in a single direction, scrolling is possibly the best option. You also may want to consider a single, longer page as opposed to several shorter ones that are connected by links.
Ballantyne
Ballantyne creates luxury knitwear from cashmere. The website itself contains different types of information. There is the standard “About Us” and “Contact” information, as a start. Beyond that there are product images and chunks of text to go along with the images. It’s easy to imagine yourself thumbing through the pages of a catalog when browsing through this website.
As with Jess and Russ, this website is entirely on a single page, and as such, scrolling is once again a predominant way to navigate. It’s not the only way this time, though it’s perhaps the more interesting method.
On the landing section for the domain there are links that read “Established 1921″ and “Contacts”. Clicking the former scrolls the page up to see the “Who We Are” section (the “About Us” info) above. The latter scrolls you through all the images and text to the bottom of the page as well as the contact information.
When arriving at either of these ends of the website you’re also presented withadditional ways to navigate. The “Who We Are” part of the page contains an “X” to close it, though this information doesn’t actually open or close — it just scrolls you back to the main landing section for the page, which you can also do yourself.
At the top of the contact section of the page a header drops down containing the company name and the links for “Who We Are” and “Contacts”. Unfortunately, the company name isn’t clickable, which is conventional for navigating back to a home location.
You can equally scroll through these two end sections of the page. As you do, there’s a nice parallax effect. The outer two columns scroll as you’d expect, while the middle column scrolls in the opposite direction. The effect creates additional interest beyond simple scrolling as more information and imagery pass through your view. The two header links along with the company name are also present as soon as you scroll below the root landing spot.
As with Jess and Russ, the Ballantyne website is more enjoyable to scroll than most. Here we’re also given an alternative means of navigation in addition to scrolling. There are a few problems, though:
No link is provided to navigate back to the original landing location. You have to scroll to get there, or first go to the Who We Are section and close it. This seems odd.
Clicking to either “Who We Are” or “Contacts” isn’t quite a smooth experience.
There’s no way to scroll up to the “Who We Are” section.
The link at the landing location to “Who We Are” reads “Established 1921″ and isn’t clear where it leads.
Another minor complaint is while scrolling, the images don’t always align where you’d like them to — you see a full image in one column, but not the others. This might have been done on purpose to get you to scroll slowly through the website, but I kept wanting things to align better. While it won’t affect your experience of the website, it can be a little jarring.
Even though the above items could be improved, they hardly cause problems when navigating the website. We’re talking about a limited amount of content, and within a moment or two, you’ve figured out where everything is. While clicking to the end locations isn’t the smoothest experience, seeing everything scroll from one end to the other does show you quickly how to navigate the entire website. In fact, it’s this behavior that cues you in if you didn’t immediately realize to scroll.
The lesson here is that even if your page will most likely be scrolled, you can still provide alternate options to navigate and help people understand what’s located on the page.
Cadillac ATS vs The World
Unlike the two websites above, Cadillac is a website with a couple of separate pages. Here we’ll look at one section of the website, specifically one page within that section. One of the ways Cadillac is promoting the ATS is as a vehicle that can take you anywhere and exhilarate you as it does.
The designers have set up a section of the website where you can explore four interesting locations around the world that you might not ordinarily get to see. It’s these location pages that we will consider here.
A navigation bar remains fixed at the top of each of these pages making it easy to get back to the main section page, or switch to one of the other three locations. If you hover over the Cadillac logo, the global navigation appears and allows you to get to any part of the website.
We’re here to explore though, and there’s an immediate cue for how to go about it. An animation of a series of arrows pointing down suggest that’s where we look. They direct your eye to another downward pointing shape with the words “watch the video”. Shape and words are a link.
Clicking scrolls a video from below into place. Below the video is another now familiar downward pointing shape with the words “ATS vs The Wind”. Clicking once again scrolls content from below, this time complete with a change of background image and parallax effect.
Each subsequent click scrolls to a new part of the page. You can navigate the entire page by clicking one shape after another until you reach the end, where you can check in (share on FaceBook, Twitter, or Google+) or visit one of the other three locations.
You could, of course, scroll through the entire page instead of clicking at each stop — you’ll experience the parallax effect a little more, but otherwise navigating the page will be the same until you want to move back up the page (as there are no upward pointing shapes to click).
There are two additional ways to navigate, both located along the right edge of the page. At the very edge is a scroll bar, though not the default one that comes with the browser. It works exactly as you would expect and provides an immediate cue that there’s more on the page than on the screen.
Just inside this scrollbar is a long thin column with a series of lighter and darker dots. Clicking on any dot will take you to a specific section within the page. The dots also offer additional clues about the page.
Lighter dots mark the start of a section. Darker dots take you to a location within each section. Each section is further reinforced by a line separator.
Clicking any dot scrolls the page to the given section or sub-section. Hovering brings up a tool tip pointing to the light dot and containing the heading for each section.
As with the websites above, everything here works well — the content is limited, and it won’t take long to work out the organization. You’re also encouraged to explore each location in each section, and cues are provided to help in your exploration.
The downward pointing shapes invite you to click and get started.
Content scrolling into place after a click suggests you can scroll the page on your own.
The scroll bar along the right edge further suggests scrolling and provides another mechanism to do so
The chapter/timeline feature might be the last thing you discover, but it’s ultimately the quickest way to navigate the page.
Each location is a new destination to explore — both literally (as a new page) and figuratively (with the content each contains). It’s part of the fun, and puts you in discovery mode from the start.
Aside: The main Cadillac website has more conventional navigation (a horizontal navigation bar with drop-downs), though it’s very nicely done and worth a look. The drop-downs present quite a bit of useful information.
The lesson here is that you can provide several ways to navigate for different types of visitors. You should provide immediate cues for how to begin navigation and let more advanced users discover other means to navigate as they explore.
Bleep Radio
Bleep Radio also encourages you to explore their single-page website. Unlike the websites above, there’s less of a directional nature to the scrolling. What you want to do could be located on any part of the page. As with the Cadillac ATS pages, there are visual cues in the form of triangles that suggest they are clickable for navigation.
Any browser open to at least 1200×900 will see most of the main menu, which is inside a large triangle showing the word Discover (again, encouraging exploration). The program link takes you to a section above the page (like Who We Are on Ballantyne). Again, there is an X to get back.
Aside from the Program link, most of the other links are located in the main Discover triangle. And of course, you can scroll up and down the page to find different content.
While the layout is certainly original and interesting, I don’t think the navigation here works as well as with the other websites, for a few reasons:
Unless you navigate to a section toward the top or bottom of the page, you’re left without navigation back besides scrolling. The discover triangle is only present at the top and bottom.
Some triangles are clickable, while others aren’t, creating a bit of confusion as to what is and isn’t navigation.
The page is always wider than the browser, no matter what size it’s opened to. Scrolling vertically will at times shift things to the right or left.
In all fairness to the website, it’s written in Greek (and I don’t speak Greek) so I could easily be missing some obvious cues.
On a more positive note, the website does have some qualities that are both nice and fun:
Clicking the Just Bleep triangle at the top clears away most of the content on the page so that you can focus on the task at hand. Nothing specifically happens for me after clicking Just Bleep (though I’m guessing it would, were I logged into the website).
The bleeper section is a grid of member images. There are a few triangles sitting atop the images, and hovering over them results in their shifting to the right or left. There’s no functional purpose, but it lends an interactive feel to the website.
One other thing to point out is the triangle along the right edge that remains fixed in place when scrolling. Clicking on it opens the current on-air Bleep, along with some social buttons. I can’t help but think navigating the website would be easier if the Discover menu was similarly fixed in place along the left edge.
The lesson here is that a unique and creative design can encourage exploration, however you should be consistent in your navigational cues. If a shape, color or specific style is a link in one place, it should be a link everywhere it occurs, or it risks confusing your visitors.
EVO Energy: The Interactive U.K. Energy Consumption Guide
The Interactive U.K. Energy Consumption Guide from EVO Energy is what information graphics on the Web should be. As with the Cadillac website, we’re looking at a single page within a larger website. And as with all the pages, the primary way to navigate is to scroll from top to bottom.
However, scrolling isn’t the only way to navigate the content here. You are expected to interact with the page in order to get most of the information it contains.
For example, the first interactive section on the page offers data about the total primary energy consumption from fuel used in the United Kingdom. The main graphic is a tree with circles of various colors representing leaves. Each color is associated with a different type of fuel…
Electricity
Biomass
Gas
Petroleum
Solid Fuel
The more colored circles are shown in the graphic, the greater that fuel contributes to the total. Each of the fuel types are listed in another graphic to the right, and hovering over them reveals the actual percentage of the fuel within the total.
To the left is another list allowing you to view the same data over different decades. With a couple of hovers and clicks, you will see that solid fuel accounted for 47% of the total in 1970 and only 15% of the total in 2010.
There’s little in the way of text on the page outside of a few basic bits of information and occasional instructions. It’s hardly needed (though it could enhance the graphics some).
These interactive infographics take advantage of what the Web can do and through interaction the information sinks in a lot more. You aren’t just being presented information — you’re actively selecting the information you want to see, making it more likely that you’ll pay attention and remember it.
The only issue I have with the page is that some panels aren’t interactive. After interacting with so many, I felt cheated when all of a sudden I couldn’t interact with one.
The lesson here is that navigation is more than moving about a website or Web page, it can also be a way to bring content to you in place. Instead of something that takes your visitors from one location on a page or website to another, navigation can be about replacing content in place — it’s a much more engaging way to interact with a website.
Summary
The five examples above naturally allow you to scroll up and down their pages — but they don’t stop there, as they provide additional cues and means for you to get around.
Some of the lessons these websites teach us about navigation:
Choose appropriate navigation based on the needs of the content.
Provide alternate forms of navigation when it benefits your visitor.
Provide immediate and obvious cues about how to navigate.
Offer advanced ways to navigate for advanced users.
Encourage exploration, but don’t require it for navigation to be usable.
You don’t always have to take people to the content — you can bring the content to them.
The web industry’s finest about the essential books you should be giving to that special designer or developer in your life, or devouring yourself while stuffed full of mince pies
Books made from dead trees, eh? Things from the past! Haven’t you heard we’ve got that spangly new internet thing now? But when you’ve been glued to a screen all day, it can be great to sit back in a comfy chair, armed with a beverage of your choice and a fantastic book that can educate and illuminate. Additionally, the finest examples provide advice and insight in a manner that few single-shot website articles can compete with. (Handily, for those who get the shakes when away from a screen for more than two minutes, many industry books are now also available in digital – hurrah!)
We asked leading designers, developers and web industry folk to reveal their favourite books. The resulting selection is a collection of the very best insight into cutting-edge design and development techniques, inspirational texts, and beautiful volumes to admire.
Gustafson’s book helps you understand the history, mechanisms and practical application of progressive enhancement. Jeffrey Zeldman, Happy Cog founder, heartily recommends the book: “Coined by Steven Champeon of the Web Standards Project in the early 2000s, ‘progressive enhancement’ is the key idea behind standards-based web design. Both a method and a philosophy, it yields experiences that are accessible to all. Through mastery of progressive enhancement, we stop designing for browsers and start designing for people. No one has done a better, clearer, or more thorough job of illuminating progressive enhancement in all its richness than Aaron Gustafson … nor is anyone likely to.”
Boulton’s well-known in the web community for his work with layout, and this no-nonsense guide teaches techniques for designing sites using the principles of strong graphic design. Balancing practical tips and inspirational insight, he explores typography, colour and layout from a web design perspective.
“This is a great introductory book that covers design fundamentals, rather than code, tools and techniques,” says developer and author Oliver Studholme.
The premise behind this book is that everything we know about solving problems is wrong, and we should instead learn to rapidly experiment and adapt. Although not directly related to the web industry, Adapt’s general themes are beneficial to all, thinks social software consultant and writer Suw Charman-Anderson: “Harford provides examples of how trial and error can be a more effective way to solve complex problems, and how trials can be structured to produce the best results. Illustrated with examples such as the development of the Spitfire, and the financial crisis, Harford explores what environments encourage innovation and how that innovation can then be adopted and expanded.”
This 448-page volume celebrates the legendary Herb Lubalin, one of the foremost graphic designers of the 20th century, who formed a trio of US graphic design greats along with Saul Bass and Paul Rand. “It’s a fantastic book that every designer should own, regardless of the medium they work in,” says graphic designer Tom Muller, adding: “Aside from Lubalin’s stunning design work, this monograph offers great insight into what graphic design can be. Even if you work purely in digital, there’s a treasure trove of ideas on innovative and elegant design here.”
Two lines of thinking that this book attempts to eradicate are that you get to decide what platform or device your customers use and that mobile means ‘smartphones’. The reality, says McGrane, is mobile is a proliferation of devices, platforms and screen sizes, and content strategy needs to be addressed and adapted accordingly. Mobile strategist Jason Grigsbyrecommended the book on his blog, stating it did a great job “showing you how to change the way you think about content and your content management system” for mobile, and outlining why such changes are important.
One of the things so regularly drummed into web designers and developers is that content is king. Get that right and everything else should more easily fall into line, but mess up your content and you’ve no hope. Halvorson’s book provides the means to understand your content and its value, along with learning better processes and techniques. Bluegg studio manager Robert Mills says: “This book is the perfect primer for anyone getting involved in projects where content is finally being taken seriously. It also acts as a good refresher for those that are more experienced. The light-hearted tone makes it an enjoyable read and easy to digest the practical and insightful information which is in abundance.”
Cederholm’s book aims to show how CSS3 is a “universe of creative possibilities”, providing insight into web fonts, advanced selectors and the many visual enhancements the technology can bring to web pages.
Eric Meyer, An Event Apart partner and co-founder, says: “With Dan you know you’re getting great visual design with a fun theme, wrapped around great technical information. This book delivers big time.” Meyer also recommends Jeremy Keith’s HTML5 for Web Designers as a companion volume, saying it will “get you up to speed with HTML5 in no time”.
Not so much a web-design tome as a handbook for dealing with an entire industry, Designing for the Digital Age explores how to succeed through a multi-disciplinary approach. Freelance user experience consultant Leisa Reichelt considers it an essential read: “It’s not exactly ‘holiday’ as in ‘take to the beach’ reading, but if you’ve got some time off at home, it’s worth getting stuck into this design bible.”
Design isn’t all about visuals, aesthetics, usability and crafting something beautiful. It’s also about all the things that surround that, enabling you to build a business. Monteiro’s aim in this volume is to help you do that part of your job better, learning how to deal with clients and contracts.
“After Mike’s brilliant ‘Fuck You. Pay Me’ talk at Creative Mornings, it was a no-brainer to buy his book on the topics of contracts, selling design and dealing with clients – this is a must read,” says creative director Mark Collins.
It’s increasingly common for websites to be rich in functionality provided by JavaScript. Keith’s book is intended to offer designers – rather than programmers – a guiding hand, showing them how to add stylish, usable enhancements to websites. Author and speakerJonathan Snook told us: “Jeremy Keith’s book has been out for a while now but I still believe that it provides a great foundation for anybody wanting to get into JavaScript development.”
11. Double Your Freelancing Rate in 14 Days
By Brennan Dunn $49 (book, worksheets and interviews) Buy now
“If you’re a freelancer or consultant, one of the hardest things is pricing. You’ve got to learn it’s all about the value you provide to a client, not what you need to make a living. You’re not an employee anymore. I made the same mistake when I was freelancing,” says author and developer Thomas Fuchs. He wishes he’d had Brennan’s book to hand back then, because it “makes excellent points and you can apply the actionable advice in it immediately”, adding to your revenue. (Special offer for .net readers: enter NETMAG as the coupon code and you’ll get a $10 discount.)
Krug’s tight, focused book, subtitled ‘A common-sense approach to web usability’, remains as relevant today as when it first appeared, back in 2000. “Anyone who designs, codes, writes, owns, or directs websites should read and memorise this book,” argues Zeldman. “Whereas earlier usability books are scolding, parental, and anti-creative in tone, Steve makes the case for web usability compelling, friendly, and fun. I naively saw usability as the enemy of design until I read this book. It will work equal wonders for the marketers, developers, project managers, and content folks on your team … or for anyone who wants their website to delight its users.”
“One of the greatest problems faced by web design freelancers is stress. Running your own business and dealing with demanding clients leaves many freelancers lying in bed worrying and feeling completely overwhelmed,” thinks Paul Boag, co-founder ofHeadscape.
“Allen’s book proposes a way of organising one’s life to strike the balance between work and home. Although not for everybody, it certainly made an enormous difference for me, enabling me to feel in control of my ever-growing workload.”
Rumelt’s book on management and strategy aims to differentiate itself from its rivals by not stretching an essay-like argument to hundreds of pages. Instead, says the author, it “presents views on a range of issues that are fundamental, but which have not been given much daylight”. This gelled with Reichelt: “It’s not exactly a web book, but I wish more web-industry people would read it so that we could spend more time making better things”.
15. Graphic Design for Non-Profit Organizations
By Peter Laundy and Massimo Vignelli, in partnership with AIGA Free
This book was published back in 1980, but still provides plenty of relevant advice regarding its subject matter – and more. Muller is a big fan: “Like the book’s title says, it offers advice on best practices for structural design applied to non-profit organisations, but the information on grids, font usage, type hierarchy, layout and presentation are applicable to all, especially when it comes to designing well-structured digital design.”
Web layout is becoming increasingly complex, and although it’s moving away from print-oriented fixed canvases, print-like grids and a strong sense of typography are required now more than ever. “Grid Systems is my number one go-to book for practical advice on typographic hierarchy and grid systems beyond the web,” says web designer and front-end developer Dan Eden. “Every page is chock-a-block with examples and reasoning for decisions made, and while the book presents a strong focus on print design, you’ll find huge crossovers into the digital realm.”
17. Handcrafted CSS: More Bulletproof Web Design
By Dan Cederholm and Ethan Marcotte £17.10 Buy now
“If my own Designing With Web Standards was catnip to web designers, Handcrafted CSS is heroin,” jokes Zeldman. “Master sophisticated CSS layout methods powered by a philosophy of ‘progressive enrichment’. Create fluid designs that support today’s plethora of connected devices, and learn techniques that create a living, textural look and feel without killing your user’s bandwidth. Dare to innovate fearlessly and gain tips on persuading your clients to accept your innovations!”
18. HTML5 & CSS3 For The Real World
By Estelle Weyl, Louis Lazaris and Alexis Goldstein £31.49/[£24.56] Buy now
One of a number of books concentrating on the core of new web technologies, HTML5 & CSS3 is all about creating dynamic websites with new toys. Instead of fluff and hype, it concentrates on fun, effective techniques that you can start using immediately. According to Studholme: “This book manages the impressive task of covering a massive amount of content without being a tome. It’s full of useful insights and real-world advice.”
According to Grigsby, Kadlec’s book essentially “picks up where Ethan Marcotte’s 'Responsive Web Design' leaves off, and provides practical tools for designers”. Like Marcotte’s title, Implementing Responsive Designdeals with creating sites that work with today’s volatile landscape regarding viewports and devices. Kadlec believes RWD isn’t just another technique, but “the beginning of the maturation of a medium and a fundamental shift in the way we think about the web,” and this line of thinking forms the foundation of his teaching on layout, workflow and content.
20. Insites: The Book
By Keir Whitaker £23/£9 (paperback/digital) Buy now
Eschewing code and even typical design tips, Insites is nonetheless a volume that lives and breathes the web industry, owing to it featuring in-depth and deeply personal conversations with the biggest names in the web community. User interface designer Sarah Parmenter is one such name, and says: “If you’ve ever wondered how some of your favourite designers and developers got involved in the web industry – the twists, turns, failures and successes that made them who they are today – all wrapped up in a personable, dip-in-and-out read that’ll have you hooked from the start, Insites: The Book is for you.”
21. Introducing HTML5
By Bruce Lawson and Remy Sharp £22.99/[£11.50] Buy now
Lawson and Sharp’s Introducing HTML5, now in its second edition, helps you get acquainted with the possibilities of HTML5; it also explores the good and the bad within the spec, along with discussing aspects not yet fully implemented in browsers. “It is the most down-to-earth, just-the-facts book about HTML5,” reckons Mozilla developer evangelist Christian Heilmann. “If you use the demos, they work. No dazzle. And the book works both as a teaching aid and a reference guide when something slips your mind.”
On his website, Lindley says a lot about what his book is not: a complete reference; targeted at those new to programming and JavaScript; a cookbook of recipes. But what he says it is makes it a must-buy: a book that might transform you from a JavaScript library user into a JavaScript developer. Gustafson is a huge fan: “Most of us old-timers learned JavaScript by reading other people’s code and through blind experimentation, so we missed out on a lot of the fundamentals. In this book, Cody does an amazing job walking through the ECMA spec, detailing the intricacies of the JavaScript language. It made me love JavaScript even more than I already did.”
Although libraries such as jQuery provide the means to work with JavaScript without really knowing a great deal about the language, savvy web developers delve deeper. Developer Remy Sharp says “everyone should have read Douglas Crockford’s Good Parts by now,” and he considers “JavaScript Patterns an excellent next step towards writing better JavaScript”. Along with boasting plenty of hands-on examples, the book also tells you what to avoid, so you don’t hamstring your own creations.
Product designer and developer Faruk Ateş recognises that Kaizen “may seem like a strange recommendation for web designers and developers,” given that it focuses on management and operation in the context of Japan’s return to industrial success in the decades after World War II. But he explains: “The Kaizen principles encompass many of the pillars we design and build our modern product on: constant iteration, customer-centric focus, continuous improvement. It is a completely different look at industry than what we’re used to seeing in our field, but it contains numerous valuable ideas that are readily applicable for us.”
25. Mobile First
By Luke Wroblewski $18/$9 (paperback/ebook) Buy now
A strategic guide to mobile web design, which asks and answers why you should go mobile first, and how to achieve such goals. “Read in tandem with Responsive Web Design and you’ll know the shape of web design for the next five years,” says web designer, author ofHardboiled Web Design, and speaker Andy Clarke.
Gustafson agrees: “When you want solid research and statistics on any web-related topic, Luke is your guy. His recent treatise on mobile is packed with incredibly valuable – and sometimes surprising – information that will help you better understand the mobile landscape and better sell its promise to your clients.”
26. Nudge: Improving Decisions About Health, Wealth and Happiness
By Richard H Thaler and Cass R Sunstein £13.52 Buy now
“Nudge is not strictly a web design book. However, I believe it should be essential reading for any web designer,” says Boag: “The premise of the book is that psychology can be used to ‘nudge’ people into making certain choices. While the book focuses on how this could be used to encourage things like more organ donation or saving for a pension, the lessons learned can also be applied to designing a website.”
27. Ordering Disorder: Grid Principles for Web Design
Khoi Vinh was one of the pioneers of working with typographic grids online, showcasing his talents at NYTimes.com and on his popular blog, Subtraction. His book delivers plenty of insight into the power of grids online. “It single handedly introduced me to the world of grids in web design,” enthuses Eden. “Khoi presents ideas and practical knowledge that can be applied to a vast array of design projects, while not getting bogged down in code. It’s ideal for anyone looking to expand their theoretical knowledge of design with a specific aim on the web.”
28. Responsive Web Design
By Ethan Marcotte $18/$9 (paperback/ebook) Buy now
Marcotte’s book assists you in catering for mobile browsers, tablets, netbooks and also massive widescreen displays, creating sites that anticipate and respond to your users’ needs. The book details techniques and principles behind fluid grids, flexible images and media queries. “Just like web standards, responsive design isn’t something you should sit on the fence about, until being asked by a client. Instead, good designers and developers should be thinking responsively about every new project that comes their way,” explains Andy Budd, Clearleft managing director. “So if you haven’t jumped on the responsive-design freight train yet, do so now, with this book to guide you, before you get left behind.”
Hi-res displays are causing all sorts of headaches for designers, and that’s only going to get worse as hardware manufacturers follow Apple’s lead. Fuchs told .net he wrote Retinafy Me after discovering useful information on high-res was “spread out in a gazillion blog posts and forum entries, or hidden deep in Apple’s or Google’s documentation”.
His writing is focused and informative, and 37signalsdesigner Jason Zimdars matter-of-factly says: “If you are considering making your site or app Retina-ready, it would be silly not to own this book.”
30. Rework: Change the Way You Work Forever
By Jason Fried and David Heinemeier Hansson £10.99/[£6.12] Buy now
It’s safe to say 37signals is not a typical company, but its success shows there can be a better way to work, without meetings, spending your entire life savings, or working insane hours. Rework provides a glimpse inside the minds of the company’s co-founders, and UI designer Maykel Loomans finds it invaluable: “The book’s a staple when anyone asks me about designing, developing or wanting to create just about anything software-related. The power of Rework lies in how clear-cut all the statements are. It’s not a book that contains information that should be taken at face value, but it does give a lot of empowerment and it’s a breeze to get through.”
Although Krug is better known for Don’t Make Me Think(listed earlier), Boag considers Rocket Surgery Made Easy more useful for the majority of web designers: “Where the original book focused on the importance of usability testing, the second one talks about the practicalities of setting up regular test sessions. Most of us are already aware of the importance of usability testing and yet find it hard to make it happen. This book will show you how.”
In this website-cum-book, Snook outlines the methodology behind SMACSS (pronounced ‘smacks’), a means to examine your design process and fit rigid frameworks into a flexible thought process, thereby resulting in a consistent approach to site development when using CSS. “Jon has created a free, organic, online book with discussion, and it has great thoughts on architecting maintainable CSS for larger sites,” says developer Stephanie Sullivan Rewis.
Most designers at some point will have crafted something amazing and beautiful, but found that no one cares. This book delves into the reasoning behind why people stick around, with an approach to designing sites and interactions based on the stages of seduction. “I love this book because it explains how to design websites to help invoke behaviour, with lots of emphasis on the psychology behind them as well,” says Parmenter.
Loomans says that, much like Rework, Kleon’s book is about process: “The book is centred around the lessons that the author learned during his career as a designer. There are many lessons here that are so stupidly obvious, but when they’re written down they bring a lot of empowerment to the reader.” The book began life as a list, and then a slide presentation, before becoming a lively, engaging and entertaining book for improving your creative life.
Steve Jobs was a private man, and so while many authors have delved inside his thought process, they’ve done so via assumption, guesswork and through third-parties. Isaacson’s book is different, drawn from three years of exclusive interviews with the Apple founder.
Clarke recommends it because “as web professionals, we need to remember to keep doing the work we love and never settle”.
Far too many CSS books are little more than elaborate reference guides, but Gillenwater takes a different approach, helping you learn the power of CSS3 through practical, eye-catching examples. “I don’t think this book has got the promotion and attention it deserves,” says Rewis. “It is sincerely one of the most practical, informative and lovely CSS3 books out there, due to Zoe using a project-based approach throughout to illustrate the concepts.”
Another alternative and highly useful take on management, The Designful Company argues that while most managers rely on a two-step process to make decisions – ‘knowing’ and ‘doing’ – today’s innovation-driven marketplace requires a middle step, ‘making’, where “assumptions are questioned, futures are imagined and prototypes are tested”.
According to Budd, it’s a book folks at Clearleft constantly refer to: “And combined with his other books,Zag and The Brand Gap, it provides plenty of quotes and animation when having tough design conversations with clients.”
If you’re wondering where the idea of ‘content strategy’ arrived from, what it means and why it matters, you should begrabbing yourself a copy of Kissane’s book right now. “I thoroughly enjoyed reading it,” enthuses Snook. “And its succinctness should not be mistaken for lack of content – this is a dense read that’s chock full of great content, as one might expect from a book on content strategy!”
Designer Laura Kalbag states online typography has “finally got to the point where we can have real control over the way our text is displayed,” and that means designers need to be more aware of the possibilities. “The Elements of Typographic Style goes into incredible depth and detail, making it indispensable for anyone wanting to make their web typography both legible and beautiful,” she says. Studholme agrees: “As my bossOliver Reichenstein says, web design is 95 per cent typography, and this is t/ typography book!”
Plenty of web design books age quickly, but that’s not always true, according to Kalbag: “I can’t believe thatThe Elements of User Experience is 10 years old when so many of its guiding principles still hold true. It’s the first book I read when I was learning about user experience and it completely shaped the way I think about design projects.” The updated edition goes beyond the desktop, showcasing Garrett’s insights into the mobile web and applications.
Are you happy? Rubin one rainy afternoon realised she could be happier and embarked on her project, setting resolutions and figuring out what worked for her. The result is a thoughtful, practical and humorous story that could inspire you to your own paths to happiness. Parmenter elaborates on why it’s an important inclusion in our list: “It reminded me that there’s more to life than sitting in front of a Mac. Work/life balance is incredibly important in what we do, and this book can be read as a quick pick-me-up at any time.”
42. The Hidden Agenda: A Proven Way to Win Business & Create a Following
Digital technology strategist James Gardnerrecommends Allen’s book for those needing to improve their business skills: “He’s the man behind the MasterCard Priceless campaign, and in this book he takes you through his techniques for understanding how to create the perfect pitch – one that appeals to the hidden agenda within the client (or potential client). You might not take every element on board, but it makes you think again about the way you present and engage with customers.”
The Nature of Code is centred around Processing and looks at programming strategies and techniques behind computer simulations of natural systems. Creative coderSeb Lee-Delisle is a big fan: “It’s a fantastic self-published Kickstarter project that provides a comprehensive look at creative coding techniques.” The book’s also available using a ‘name your price’ model, and if you’re unsure, the entire thing’s online, for free.
44. The Shape of Design
By Frank Chimero $29.99/$9.99 (hardback/ebook) Buy now
Chimero’s book is about making you think, as should be evident from its chapter headings, which include ‘form and magic’, ‘stories and voices’ and ‘delight and accommodation’. The aim is to “produce a field guide for the emerging skillset” and enable everyone to “dream big, apply the lessons to our processes, then go get our hands dirty to shape this world”. According to Eden, it’s one of the few books he reads again and again: “The author speaks in a relatable and passionate way about our process as designers, in a series of truly inspirational stories that are sure to get the creative juices flowing.”
As designer and developer Sebastian Green points out, the title of this book shows this is a rather different take on HTML5: “It highlights the myths currently in circulation about the spec and also gives some information about the procedures behind creating it.” Green says the book details how people are using new tags but also shows they may have interpreted the spec incorrectly and headed in the wrong direction. It also explores a groundbreaking semantics initiative, what happens when Flash dies, and how HTML5 alters fundamental components of the web.
Another book exploring thought processes, Kahneman’s Thinking, Fast and Slow is concerned with how we make decisions: why we’re more likely to believe something that’s in a bold typeface; why we assume someone who’s good-looking will be more competent; and so on. Green says: “As competition on the web increases, we are all looking for ways to create better sites. Going down the psychology route is the next step, and this book provides insight into how we are influenced, and how we interpret and respond to questions.”
According to Meyer, this book is a “compact, fascinating examination of how the internet parallels the telegraph system very closely, and how the world was even more technologically disrupted and future-shocked by the telegraph than we could ever aspire to be”. Standage himself is proud of the book’s longevity, noting on his website that he got to “make fun of the internet, by showing that even such a quintessentially modern technology actually has roots going back a long way – in this case, to a bunch of electrified monks in 1746”.
48. Universal principles of design
By William Lidwell, Kritina Holden and Jill Butler £18.99/[£13.29] Buy now
An ambitious book that aims to provide something of an overview of design across a variety of disciplines,Universal Principles of Design is an essential purchase for anyone involved in the creative side of the web, thinks Studholme: “The book gives names to essential design principles you probably instinctively know, prompting you to consciously consider them. With one concept per page spread, these descriptions are great to dip into.”
This book is an account of how the web came to be, direct from the source. Berners-Lee crafts an engaging story, also detailing the creation of the World Wide Web Consortium. The book is long out of print, but readily available second-hand.
Open web evangelist, designer and author Molly Holzschlag says: “This is a key work by the inventor of the World Wide Web, and a core, essential read for anyone working in the industry.”
Web forms are commonplace, to say the least. They also happen to make or break the most crucial online interactions – checkout, registration, and tasks requiring data entry – rightly argues this book’s blurb. But the fact remains that lots of online forms are dreadful, hampering usability.
“Bad web forms hurt us all. Luke shows why and how to fix them,” says Meyer on why you should buy this book.
