Design is inseparable from the technology available to us. What we know about history from photos is dependent on the camera technology of the time. Modern typefaces could not be invented until printing presses were widely used. This week is about the connect between creativity and constraint, particularly as it relates to web design.
This chapter uses a text format rather than lecture videos.
Creativity & Constraint
All types of design are a balance between creativity and constraints. This is especially true in user-centered design, which puts people and their needs at the center of the process.
For example, even the most creative architecture is constrained by the size and strength of people. If a space doesn’t work for people, it’s less useful.
The Guggenheim Museum in New York has striking and unique architecture by renowned architect Frank Lloyd Wright, but it still needs to serve its primary purpose of being a functional museum open to the public. (Image sources: exterior, interior, interior looking down)
Fashion is another example. Some fashion designers create amazing and impractical designs that push the boundaries of fashion in exciting ways, but these are not user-centered designs that people could wear in everyday life. Designers who make functional everyday clothing have very different goals.
The Met Gala is known as an event for fashion designers to bring out their most inventive and over-the-top designs, even though many of them are barely wearable.
Visual design is the same. Both print and digital products can be creative, but they need to fit within certain constraints to be useful. Some of these constraints are technological, some are based on the user’s needs, and some are based on what users expect. New ideas can be exciting, but they are also intimidating. People like things that feel familiar.
When Gutenberg made his Bible on the new printing press, he made up a typeface that resembled the handwriting of monks, because that’s what people were used to.
When personal computers started becoming popular, the interfaces were designed to use skeuomorphisms like “folders” and a trash can icon to make an intimidating new technology feel more familiar.
When newspapers first created websites and published articles online, they tried to make it as much like the print product as possible. Stories were posted every morning, just once per day, and used exactly the same headlines and photos that were in the print paper for that day. But pretty soon editors and publishers realized those old constraints no longer existed — a newspaper could post breaking news anytime of day on a website, and a story could have a whole gallery of photos instead of choosing just one. Headlines could be written differently to make them easier to find in a web search.
This also applies to something as small and simple as a hyperlink on a webpage. Once upon a time, no one knew how to use links because they didn’t exist before the internet. But it quickly became a commonly used feature because it serves a user need. Whether you’ve ever thought about it or not, you’re familiar with the design conventions of hyperlinks. In a paragraph, we expect links to look slightly different from the rest of the surrounding non-link text. We expect a slight reaction when hovering on a link.
- A web designer could design a link to look no different and have no reaction when you hover, but this would be ineffective because most people would never see it.
- A web designer could do something zany like make the text enormous when you hover on it, but that would be unexpected and confusing.
Both of these choices would be unconventional, which is risky. Unconventional is often a good thing in art, because creativity and risk-taking is exciting in art. In design, however, confusing your users is not an effective way to communicate. You have to be very careful about going against expectations.
Creative vs. Conventional Health Messages
Brands and public health agencies took different approaches to visuals in their PSAs about coronavirus precautions. Here are five examples from early in the pandemic: three standard approaches from health departments in Hawaii, Minnesota and Pennsylvania, and two less conventional approaches from Coca-Cola and the Oregon Health Authority.
🗨 Overall, do you think the standard or less conventional messages work better for communicating with the public, and why?
✓ Review:The Coca-Cola advertisement makes use of spacing between letters to visually correspond with the public health concept of social distancing. What is the typography term for spacing adjustment between letters?
Designing Flexible Websites
Do you recognize these different web browser icons?
Web browsers are software programs that show us websites visually, and we use them so often that you may not think about your web browser much at all. But they’re made by different companies and work in slightly different ways, which means the same website may look slightly different in two different web browsers.
Cross-Browser Compatibility
- Web browsers interpret HTML and CSS differently, in ways that affect how websites display to users.
- Someone using Internet Explorer may see websites differently than someone using Chrome, even if their computers are identical.
- W3C (World Wide Web Consortium) is an international group that develops standards so standard HTML and CSS works across browsers. Most web browsers are fairly consistent now, but in the past this was a huge frustration and inconvenience for web designers!
Cross-browser compatibility issues became really frustrating with the arrival of smartphones. It also changed the way people used and browsed the internet. And that’s what forced designers to embrace responsive design.
Responsive Design
- Web design approach based on creating layouts that intentionally display differently on different screens to meet users' needs.
- Key principle is flexibility.
- Usually done with a responsive grid system.
- Prioritizes user experience by making the content display well on all devices.
- A related term is adaptive design, which has different layouts for selected screen sizes.
Designers like having control, so this transition was difficult for some people. Instead of being able to control every tiny detail of a user’s experience, designers had to accept flexibility and uncertainty. This can still be challenging to explain to clients or colleagues who wonder why a website or digital product doesn't look the same for all users.
Here’s a demonstration of responsive design in a few different websites:
Here are a few vocabulary terms related to responsive design:
- Breakpoint: The cutoff or point where a website’s layout or content will change to better fit the current conditions, like when three columns collapse to one for mobile devices.
- Media Queries: A filter within CSS that applies different styles based on the size of the browser window and device type.
Planning Website Design
It’s important to make a plan for a webpage before writing code. This should be based on the purpose of the website and the information it needs to contain, building the structure around the content. This is a downside of using web templates where you have to smoosh your content into an existing structure.
Wireframe
- This is the skeletal layout of a website page showing the structure and arrangement of different elements
- Can be sketched by hand or made with software
- This is the first step in designing a website, similar to blueprints for constructing a building
- Multiple wireframes showing how pages of a website are organized and connected to each other is often called a storyboard
Examples of wireframes:
A visual representation of how a website will appear to users before the actual site has been constructed is a mockup. This is used for internal feedback and sometimes for external research, and it shows the website as it will appear once it’s built. A mockup with functional elements is often called a prototype.
The Ever-Changing Web
The flexible, interactive nature of the internet transcends print design and opens up new possibilities. It also makes web design fragile and difficult to preserve. If you design a marvelous webpage today, changes in technology mean it likely won’t be marvelous a decade from now. It might not even work or exist.
“The web, as it appears at any one moment, is a phantasmagoria. It’s not a place in any reliable sense of the word. It is not a repository. It is not a library. It is a constantly changing patchwork of perpetual nowness.”
— Adrienne LaFrance, “Raiders of the Lost Web”
That quote is the beginning of a magazine story published in The Atlantic in 2015 about how innovative news forms published on the web can entirely disappear. It focuses on a 34-part feature story published in 2007 in The Rocky Mountain News in 2007, a daily newspaper in Colorado founded in 1859. The series included a custom website with multimedia and documents made public for the first time ever, and was a finalist for the Pulitzer Prize. And then, in 2009, The Rocky Mountain News closed. It was a highly respected paper and this was a huge blow at a time when newspapers were laying off thousands of reporters during the Great Recession.
Soon after the newspaper closed, the website fell apart. Their award-winning stories just didn’t exist online anymore. The multimedia reporters and web designers who’d abruptly lost their jobs suddenly had no record of their work. And this has happened many other times, too.
The Rocky Mountain News story was revived in a stroke of incredible luck, as the magazine article explains. The link sometimes works and sometimes doesn’t. Some other parts of the Rocky still exist online — a Pulitzer-winning photo essay by Todd Heisler was republished in part by The New York Times after he was hired there. (Heisler’s first major NYT project, “1 in 8 million,” no longer works, however.)
It’s not all bad — along with the Wayback Machine, there are other tools and archival systems for preserving your own digital work just in case it disappears. The Million Dollar Homepage is another zany story about the early internet.
🗨 What is a website or thing on the internet that you enjoyed or valued sometime in the past that no longer exists? (Or perhaps has changed so dramatically it’s not really the same.) If you can’t think of a personal example, ask a couple of friends or family members if they have one.
A Prescient Essay: "The Dao of Web Design"
“A Dao of Web Design,” is a philosophical essay considered a classic in the web design field. It was written in 2000, which is a very long time ago in the web design discipline. A companion reading is a collection of reactions from web designers 15 years later, which helps put the original essay in perspective and explain why it was so important at the time.
“The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility.”
— John Allsopp, “A Dao of Web Design”
Essentially, the essay is about the emerging field of web design at the time. Like with previous technologies, early web design was built on the foundation of print design since that’s what was familiar.
✓ Comprehension Check: In “A Dao of Web Design,” the author uses an example about how television programming developed from the conventions of radio programming. How is this related to developments in web design?