Developing two independent styles for a website can be a daunting task. I wanted to create sites that targeted different audiences. The suggestion that we create one ugly site and one attractive site did not feel right. Instead, I wanted to focus on creating one website targeted at women. It would be bright, simply, elegant with easy to read text. It would be inviting. The second design is much more masculine. It would offer a small business, professional, tech savvy design. The use of space would be more constrained and balanced. For simplicity, I chose to use tools I’m accustomed to using to create sites.
The first design was created using a text editor called BBEdit, Adobe Illustrator and Adobe Photoshop. I wanted to create a springtime effect with a bright flower in the left hand corner. I chose a white background to improve legibility and keep the website friendly. White is easier to read and avoids a busy appearance that is often distracting. Spring colors were selected with pink, light green, and a tan color often found in a flowerpot. The use of different colors was limited so that the site would not feel too busy. Adobe Illustrator provides built in clip art templates. I used an existing flower template,; it was enlarged, stretched out and then saved to a file. I then imported the image into Adobe Photoshop, cropped it and then added the grass using a special brush included with the program. The color palate of the image was already limited as I exported the file intentionally in PNG format. I used one of the green tones present in the original to maintain some consistency with the grass. The text uses 1.5 spacing between lines to improve legibility on screens and also uses a sans-serif font. Hyperlinks offer a bright purple tone, which is often associated with Easter. The visitor will see a bright, colorful website free of distractions. The reader should walk away with a warm feeling from the text. The net result should be a warm, positive, personal feel sharing the emotions of the spring that many people share.
The second design was an attempt to move away from an open, warm feeling. I wanted to create a site that felt cold and professional. I chose to use blue and gray which are often associated with business. I was inspired by the old “Big Blue” ads that IBM ran in the 80s. I also wanted to create a site that felt like a typical small business website. They often use background images instead of sticking to a traditional white or off white background. Professional designers rarely use other colors for general purpose websites unless there is a very special effect with little text. As we have a good deal of text, a dark background would be a bad choice. The background image was created in Adobe Photoshop as a 600 pixel across by 10 pixel down image. A generic gray background was chosen to offset the use of blues and to keep a darker feel. I then used cascading stylesheet background-image properties to create a repeat of the image down the page only. On small displays, the reader will only see the blue background, but many will see at least a small offset of gray. The result was a very dark website. I felt that it was too dark for the male professional. I then created a light heading using a white background with a thin blue border. The title stands out and creates a repetition of the white lines present on the left hand side. This creates an intentional box appearance while leaving the text free to flow down the page. I was still concerned about darkness, so I used a bright yellow h2 heading which stood out and brightened up the page a bit. Text remained white and blended with the lines present on both sides of the text. I used a double spaced, sans-serif typeface to improve legibility. The double spacing also reinforced the use of the lines on the left side. Hyperlinks use a yellow hover that ties in with the headings and offsets nicely on the blue links. The use of lines also offers an artificial notebook paper feeling. It brings in a concrete feeling to the virtual document and offers a sense of familiarity. Traditionally, women are more active on the web. The color and familiarity of this design should ease men who visit the site.
The two target demographics are quite different. The first design emphasizes bright colors and freedom to explore. The second design reinforces concrete elements just as well as the first design, but in a professional, boring way. Both designs try to attract attention from visitors. I would expect more traffic to the first design based on its target audience, and general appearance. I do not consider either design ugly, but I prefer the first design. Compared to the drab black on white text in the original document, both designs improve the impression of the information and the readability of the text. The content does not change, but the impressions vary greatly with simple style changes. Both designs assume the reader will be using a traditional computer screen. The first design would be easier to read on a projector, television set or portable device such as a PDA or cellular telephone. The white background is much easier to distinguish on such devices. Conversely, white text on a blue background is very difficult to read on small screens or very large projections.
Certainly, the use of different styles has a profound impact on the intended audience of a website. Using different colors can impact the legibility of the site on different devices as well as the interest of visitors to return to the website.