When building a website or mobile application , content is king. You might be able to convince people to visit your site once or download your app, but without engaging, relevant content, they arent going to come back to your site, or will likely quickly uninstall your app.
But how you present that content matters as well. And the presentation of that content is your design. A well-designed site or app is going to be easier and more enjoyable to use than a poorly designed site or app.
Design matters. But design is also hard. It takes years of study to master the intricacies of layout, typography, color theory, and the rest. It also takes practice. Lots and lots of practice. As with all artists, most of what designers produce is not great. But its only by working through those bad designs that we can discover the great ones.
While this book focuses on a single design tool, Adobe XD, understanding the process of designing for the web and for mobile is an important first step. In this chapter, we will examine the basics of designing websites and apps, focusing on the challenges and potential solutions designers face.
The Challenges of Designing for the Web
From its earliest days, the web has presented designers with some unique challenges . Many of these have been solved in the roughly quarter century that designers have been working on the web, but many are potentially unsolvable.
The Web Wasnt Designed for Design
The first challenge: design wasnt a consideration when the web was built. Tim Berners-Lee, the man who invented the web, was a physicist who created the web primarily as a way for scientists to be able to better collaborate on the internet. The web wasnt really intended as a way to sell books or connect with long-lost high school friends or see lots and lots of pictures of cats.
Because of this, solutions for designing for the web had to be added on later. First, there were attempts to handle this with new, mostly horrible HTML tags and attributes like and bgcolor . And there were attempts to create complex layouts by forcing HTML tags that were never intended for layouttablesto (badly) service that need. Later, all of that awfulness was replaced by Cascading Style Sheets, or CSS. Finally, we had a language specifically created to allow designers to make web pages pretty (and more usable).
But even CSS has a major flaw (well, to be honest, it has a lot of flaws, but lets just focus on one for the moment): its code. To be clear, I have nothing against code. I consider myself to be much more of a programmer than a designer. But designing in code is tough. It takes a lot of work, its hard to make quick changes, and it requires that you think about what something will look like without being able to directly see what it will look like until a bit later.
There are certainly folks who have mastered this skill and do what the web community refers to as designing in the browser , but they are the exception.
Adobe XD is specifically designed to help fill this need, by allowing you to create designs in a more traditional design environment, and without ever requiring that you touch any code at all.
Designing for Screens
When print designers create flyers for clients, they have total control over what those flyers will look like. They know that every time a flyer is printed, it will be a particular size. They know that every time it is printed, it will use specific colors (often printed with specific inks). They know it will be printed on an exact weight of paper with a specific brightness.
This kind of control is pretty great, and its the first, and often hardest, thing that print designers have to learn to give up when they begin designing for the web, because for the most part, the way our web pages will look on our users screens is out of our control.
We cannot know what size screen each user may have. When I began designing for the web in the mid-1990s, designers had to worry about a few screen resolutions on maybe a dozen or so screen sizes. The web was confined to desktop and laptop computers. We had to worry about two operating systems and basically two browsers.
But today, there are not only dozens and dozens of screen resolutions, but literally hundreds of screen sizes. Today, we cant know if a user is going to view a web page on their 65-inch television or their 27-inch computer monitor or their 4-inch smartphone. (Although we can know that more people in the world access the web on mobile devices than on desktop and laptop screens).
We cannot know how big our page will be. We cannot know how the screen is going to handle color. Our users may be on a desktop running one of four or five versions of Windows, or a laptop using one of several versions of macOS/OSX. They might be on an iPhone using iOS 8, or an iPad using iOS 6, or on an Android phone running Jelly Bean, Kit-Kit, Lollipop, Marshmallow, Nougat, or Oreo. That phone might have a 3-inch screen with barely 400 pixels of resolution or a high-density 5-inch screen with thousands of pixels.
The monitor might be color corrected to render bright, beautiful colors, but odds are good it isnt. The user might have the brightness turned down on their monitor to reduce glare and eye strain, making the colors on our site dull and boring, or they might be on their phone late at night with the brightness turned all the way up (hopefully not disturbing anyone else in the room).
And they might be viewing our site on Internet Explorer, or Microsoft Edge, or Google Chrome, or Mozilla Firefox, or Apple Safari. They might be on Androids slightly different version of Chrome, or they might have gone into the Google Play Store and downloaded some other browser youve never even heard of.
The point of all of this is that we have absolutely no control over how our web page is seen by our users. This presents, without any question, the biggest design challenge for the web: how do you create something that is beautiful and usable with all of these unknown factors at play?
As we will see in Chapter , Adobe XD allows you to create your designs on any screen size you want, allowing you to think through this toughest of design challenges .
Designing for Interaction
Another thing that separates web design from print design is interaction. While it can be argued that people do interact with printa good designer is certainly going to take into account how a customer might move from one page to the next in a cataloginteraction design did not really become a thing until the web and mobile apps came along.
Interaction design is thinking not just about how a particular page of a site looks and feels, but also about what happens when a user clicks a link to get from one page to the next. Interaction designers think and plan for what happens when a user clicks something on a page, or hovers their mouse over an element. They think about how drop-down menus should work.
All of this requires designing in an interface that allows you to see these interactions take place. While you can sort of simulate some of these things in traditional design tools, Adobe XDs prototyping tools, which we will explore in Part III of this book, are designed to allow you to work through interaction design issues and visualize potential solutions.
Mobile App Design
Just as Tim Berners-Lee didnt envision the cat-obsessed environment he was creating with the web, Steve Jobs didnt think he was creating an entirely new industry when he released the first iPhone in 1997. Although smartphones had been around for a while, and the idea of running apps on those phones that were built just for that environment was likewise nothing new, the iPhone and the massive explosion of the use of smartphones created unexpected and unprecedented demand for apps.