4. Web Design Basics
Lesson overview
In this lesson, you’ll learn the following:
• The basics of webpage design
• How to create page thumbnails and wireframes
• How to use Photoshop to generate site image assets automatically
This lesson will take about 45 minutes to complete. If you have not already done so, download the project files for this lesson from the Lesson & Update Files tab on your Account page at www.peachpit.com, store them on your computer in a convenient location, and define a new site in Dreamweaver based on this folder, as described in the “Getting Started” section of this book. Your Account page is also where you’ll find any updates to the chapters or to the lesson files. Look on the Lesson & Update Files tab to access the most current content.
Whether you use thumbnails and wireframes, Photoshop, or just a vivid imagination, Dreamweaver can quickly turn your design concepts into complete, standards-based CSS layouts.
Developing a new website
Before you begin any web design project for yourself or for a client, you need to answer three important questions:
• What is the purpose of the website?
• Who is the audience?
• How do they get here?
What is the purpose of the website?
Will the website sell or support a product or service? Is your site for entertainment or games? Will you provide information or news? Will you need a shopping cart or database? Do you need to accept credit card payments or electronic transfers? Knowing the purpose of the website tells you what type of content you’ll be developing and working with and what types of technologies you’ll need to incorporate.
Who is the audience?
Is the audience adults, children, seniors, professionals, hobbyists, men, women, everyone? Knowing who your audience will be is vital to the overall design and functionality of your site. A site intended for children probably needs more animation, interactivity, and bright, engaging colors. Adults will want serious content and in-depth analysis. Seniors may need larger type and other accessibility enhancements.
A good first step is to check out the competition. Is there an existing website performing the same service or selling the same product? Are they successful? You don’t have to mimic others just because they’re doing the same thing. Look at Google and Yahoo—they perform the same basic service, but their site designs couldn’t be more different from one another.
How do they get here?
This sounds like an odd question when speaking of the Internet. But just as with a brick-and-mortar business, your online customers can come to you in a variety of ways. For example, are they accessing your site on a desktop computer, laptop, tablet, or cellphone? Are they using high-speed Internet, wireless, or dial-up service? What browser are they most likely to use, and what is the size and resolution of the display? These answers will tell you a lot about what kind of experience your customers will expect. Dial-up and cellphone users may not want to see a lot of graphics or video, whereas users with large flat-panel displays and high-speed connections may demand as much bang and sizzle as you can send at them.
So where do you get this information? Some you’ll have to get through painstaking research and demographic analysis. Some you’ll get from educated guesses based on your own tastes and understanding of your market. But a lot of it is actually available on the Internet itself. W3Schools, for one, keeps track of tons of statistics regarding access and usage, all updated regularly:
• w3schools.com/browsers/browsers_stats.asp provides information about browser statistics.
• w3schools.com/browsers/browsers_os.asp gives the breakdown on operating systems. In 2011, they started to track the usage of mobile devices on the Internet.
• w3schools.com/browsers/browsers_display.asp lets you find out the latest information on the resolution, or size, of screens using the Internet.
If you are redesigning an existing site, your web-hosting service itself may provide valuable statistics on historical traffic patterns and even the visitors themselves. If you host your own site, you can incorporate third-party tools, such as Google Analytics and Adobe Omniture, into your code to do the tracking for you for free or for a small fee.
Analytics provides comprehensive statistics on the visitors to your site. Google Analytics, pictured here, is a popular choice.
As of the fall of 2015, Windows still dominates the Internet (80 to 85 percent), with most users favoring Google Chrome (60 percent), followed by Firefox (21 percent), with various versions of Internet Explorer (7 percent) a distant third. The vast majority of browsers (99 percent) are set to a resolution higher than 1024 pixels by 768 pixels. If it weren’t for the rapid growth in usage of tablets and smartphones for accessing the Internet, these statistics would be great news for most web designers and developers. But designing a website that can look good and work effectively for both flat-panel displays and cellphones is a tall order.
Scenario
For the purposes of this book, you’ll be working to develop a website for Meridien GreenStart, a fictitious community-based organization dedicated to green investment and action. This website will offer a variety of products and services and require a broad range of webpage types, including dynamic pages using technologies such as jQuery, which is a form of JavaScript.
Your customers come from a wide demographic that includes all ages and education levels. They are people who are concerned about environmental conditions and who are dedicated to conservation, recycling, and the reuse of natural and human resources.
Your marketing research indicates that most of your customers use desktop computers or laptops, connecting via high-speed Internet services. You can expect to get 20 to 30 percent of your visitors exclusively via cellphone and other mobile devices, and much of the rest will be using mobile from time to time.
To simplify the process of learning Dreamweaver, we’ll focus on creating a fixed-width site design first. In Lesson 7, “Designing for Mobile Devices,” you’ll learn how to adapt your fixed-width design to work with smartphones and tablets.
Working with thumbnails and wireframes
After you have nailed down the answers to the three questions about your website purpose, customer demographic, and access model, the next step is to determine how many pages you’ll need, what those pages will do, and finally, what they will look like.
Creating thumbnails
Many web designers start by drawing thumbnails with pencil and paper. Think of thumbnails as a graphical shopping list of the pages you’ll need to create for the website. Thumbnails can also help you work out the basic navigation structure for the site. Draw lines between the thumbnails showing how your navigation will connect them.
Most sites are divided into levels. Typically, the first level includes all the pages in your main navigation menu—the ones a visitor can reach directly from the home page. The second level includes pages you can reach only through specific actions or from specific locations, say from a shopping cart or product detail page.
Thumbnails list the pages that need to be built and how they are connected to each other.
Creating a page design
Once you’ve figured out what your site needs in terms of pages, products, and services, you can then turn to what those pages will look like. Make a list of components you want or need on each page, such as headers and footers, navigation, and areas for the main content and the sidebars (if any). Put aside any items that won’t be needed on every page. What other factors do you need to consider? If mobile devices are going to be an important consideration of your design identity, will any of the components be required or optional for these devices? Although many components can be simply resized for mobile screens, some will have to be completely redesigned or reimagined.
Identifying the essential components for each page helps you create a page design and structure that will meet your needs.
Do you have a company logo, business identity, graphic imagery, or color scheme you want to match or complement? Do you have publications, brochures, or current advertising campaigns you want to emulate? It helps to gather them all in one place so you can see everything all at once on a desk or conference table. If you’re lucky, a theme will rise organically from this collection.
Desktop or mobile
Once you’ve created your checklist of the components that you’ll need on each page, sketch out several rough layouts that work for these components. Depending on your target visitor demographics, you may decide to focus on a design that’s optimized for desktop computers or one that works best on tablets and smartphones.
Most designers settle on one basic page design that is a compromise between flexibility and sizzle. Some site designs may naturally lean toward using more than one basic layout. But resist the urge to design each page separately. Minimizing the number of page designs may sound like a major limitation, but it’s key to producing a professional-looking site that’s easy to manage. It’s the reason why some professionals, like doctors and airline pilots, wear uniforms. Using a consistent page design, or template, conveys a sense of professionalism and confidence to your visitor. While you’re figuring out what your pages will look like, you’ll have to address the size and placement of the basic components. Where you put a component can drastically affect its impact and usefulness.
In print, designers know that the upper-left corner of a layout is considered one of the “power positions,” a place where you want to locate important aspects of a design, such as a logo or title. This is because in western culture we read from left to right, top to bottom. The second power position is the lower-right corner, because this is the last thing your eyes will see when you’re finished reading.
Unfortunately, in web design this theory doesn’t hold up for one simple reason: You can never be certain how the user is seeing your design. Are they on a 20-inch flat panel or a 2-inch cellphone?
In most instances, the only thing you can be certain of is that the user can see the upper-left corner of any page. Do you want to waste this position by slapping the company logo here? Or make the site more useful by slipping in a navigation menu? This is one of the key predicaments of the web designer. Do you go for design sizzle, workable utility, or something in between?
Creating wireframes
After you pick the winning design, wireframing is a fast way to work out the structure of each page in the site. A wireframe is like a thumbnail, but bigger, that sketches out each page and fills in more details about the components, such as actual link names and main headings, but with minimal design or styling. This step helps to catch or anticipate problems before you smack into them when working in the code.
Wireframes allow you to experiment with page designs quickly and easily without wasting time with code.
The wireframe for the final design should identify all components and include specific information about content, color, and dimensions.
Once the basic concepts are worked out, many designers take an extra step and create a full-size mockup or “proof of concept” using a program like Adobe Photoshop or even Illustrator. It’s a handy thing to do because you’ll find that some clients just aren’t comfortable giving an approval based only on pencil sketches. The advantage here is that all these programs allow you to export the results to full-size images (JPEG, GIF, or PNG) that can be viewed in a browser as if they were finished webpages. Such mockups are as good as seeing the real thing but may take only a fraction of the time to produce.
In some cases, creating a mockup in Adobe Photoshop, Adobe Fireworks, or Adobe Illustrator can save hours of tedious coding to receive a needed approval.
In addition to creating graphical mockups, Photoshop has tricks geared specifically for web designers, like the Adobe Generator feature.
Creating web assets using Adobe Generator (optional)
Adobe Generator is one of the web-oriented tools that allow you to export web assets from a Photoshop file in a variety of sizes, resolutions, and even file types. Best of all, this feature works in real time, exporting image assets from your file based on user-specified attributes added to the layer name. Let’s take a closer look at this great tool.
Working with Adobe Generator
In this exercise, you’ll work with an Adobe Photoshop document to prepare assets for your web project.
1. Launch Photoshop CC 2015 or higher.
Note
This exercise requires the installation of Photoshop CC 2015 or higher and the lesson04 lesson files.
2. Open GreenStart_mockup.psd from the lesson04/resources folder.
The Photoshop file contains a complete mockup of the GreenStart site design, which is composed of various vector-based design components as well as image assets stored in separate layers. Note the use of colors and gradients in the design.
Note
The sample file used in this exercise requires the font Bree Serif, which you can download and install for free from Adobe Typekit. To access this font, and the entire Typekit library, choose Type > Add Fonts from Typekit in Photoshop CC 2015 or higher.
3. Choose File > Save As.
Name the file resources/myGreenStart_mockup.psd.
4. If necessary, choose Window > Layers to display the Layers panel. Observe the names and contents of the layers and layer groups.
The layers and layer groups are named for the webpage components.
5. Open the header layer group, and observe the contents.
The header group contains two text elements and four graphical elements. Often, it’s difficult to understand how a graphic component is built or for what purpose it is intended by looking at the layer names alone.
Tip
It’s a good idea to save the file under a different name so you can refer back to the original assets should you make an error.
6. In the GreenStart layer, click the eye icon 
to toggle the layer visibility off.
The text “greenstart” disappears from the layer.
7. In the fern layer, click the eye icon to toggle the layer visibility off.
The image of the fern disappears. Using this method, you can identify each element of the header and see what role it plays in the creation of the overall design. The number and type of layers and the level of detail used here aren’t necessary for a mockup that you merely want to use for a client approval. This file was set up specifically to create many of the final assets for the page design.
8. Click the eye icon to toggle the GreenStart and fern layers back on.
Exporting assets from Photoshop
The fern layer will be used to create one component of the header background. Photoshop generates a web asset automatically if you add a file extension to the layer name.
1. Double-click the name of the fern layer, type fern.png and press Enter/Return to complete the name.
When activated, Generator works in the background exporting assets in real time.
2. Choose File > Generate > Image Assets.
The next time you look at the Generate menu option, a checkmark will appear beside Image Assets, indicating that Generator is active.
3. Choose File > Open.
Navigate to the lesson04 > resources folder.
A new folder has been created and named myGreenStart_mockup-assets by Generator. Whenever you add file extensions to the layer names and enable Generator, it creates a folder and fills it with assets automatically, based on the layer names and settings.
4. Navigate to the myGreenStart_mockup-assets folder created by Photoshop.
The folder contains a single image: fern.png.
The file contains the fern with a transparent background. Note that the image displays a drop shadow. The shadow is a permanent part of the image, no longer created by a Photoshop effect.
6. Choose Image > Image Size.
Note the dimensions and resolution of the image.
The image is 468 pixels by 157 pixels, at 72 pixels per inch (ppi).
7. Click OK to close the Image Size dialog.
Close fern.png.
Creating multiple assets using Generator
Generator can also modify the default export specifications and even create multiple assets at multiple resolutions.
1. Change the layer name fern.png to 200% fern.png+fern.jpg and press Enter/Return to complete the name.
Note
If you do not see the images created as described, check to make sure that the command File > Generate > Image Assets is enabled as described in the previous exercise.
2. Choose File > Open. If necessary, navigate to the myGreenStart_mockup-assets folder.
The folder contains two images: fern.png and fern.jpg, both created by Generator. Older files with the same names are replaced automatically.
3. Select fern.png and open the file.
The file contains the fern, but it appears twice as large as the previous image.
4. Open fern.jpg.
The file contains the same fern image, but at the original size. JPEGs do not support transparency, so the background is white. There’s no need for the JPEG version of the image. Generator can remove assets automatically too.
5. Change the layer name 200% fern.png+fern.jpg to 150% fern.png and press Enter/Return to complete the name.
The specification creates a larger, higher-quality image that will display well in regular browsers and on new higher-resolution devices. By removing “fern.jpg” from the layer name, Generator automatically deletes the JPEG version of the file.
6. Choose File > Open. Navigate to the myGreenStart_mockup-assets folder.
The JPEG version of the file is no longer visible in the folder. As you can see, Photoshop generates assets based on the name of the layer. You can create an entire set of images for your site design from the layers in this file.
7. In the Layers panel, open the header layer group. Change the name of the stripe layer group to stripe.png.
Note
In Photoshop, the background is mocked up using two layers: stripe and stripes-group. You are exporting the web background from the smaller stripe layer group, which looks like a folder icon in the Layers panel.
8. Open the sidebar2 layer group.
Change the layer shopping to shopping.jpg. Change the layer biking to biking.jpg.
9. Choose File > Open. Navigate to the myGreenStart_mockup-assets folder.
The myGreenStart_mockup-assets folder now contains four image files. These files are identical to the ones you will use to build the site template and populate articles in upcoming lessons. As you can see, Generator offers some handy tools for turning this mockup into real web design assets, but the tricks don’t stop there. Photoshop and Dreamweaver have even more collaboration tools to offer, as you will see later.
Check out http://helpx.adobe.com/photoshop/using/generate-assets-layers.html to see a complete explanation of Adobe Generator and how to use it.
Review questions
1. What three questions should you ask before starting any web design project?
2. What is the purpose of using thumbnails and wireframes?
3. Why is it important to create a design that takes into account smartphones and tablets?
4. Why would you use Adobe Photoshop, Illustrator, or Fireworks to design a website?
5. How does Adobe Generator assist in the creation of a website design?
Review answers
1. What is the purpose of the website? Who is the audience? How did they get here? These questions, and their answers, are essential in helping you develop the design, content, and strategy of your site.
2. Thumbnails and wireframes are quick techniques for roughing out the design and structure of your site without having to waste lots of time coding sample pages.
3. Mobile device users are one of the fastest-growing demographics on the web. Many visitors will use a mobile device to access your website on a regular basis or exclusively. Webpages designed for desktop computers often display poorly on mobile devices, making the websites difficult or impossible to use for these mobile visitors.
4. Using Photoshop, Illustrator, or Fireworks, you can produce page designs and mockups much faster than when designing in code with Dreamweaver. Designs can even be exported as web-compatible graphics that can be viewed in a browser to get client approval.
5. Adobe Generator allows you to export site image assets quickly from Photoshop mockups, allowing you to produce multiple sizes and versions of each asset.