1. PROJECT B: Web site design using CSS
DIGITAL STUDIO 1 (GRDS-720-OL)
Professor Sarah Adams
Amanda Kern
Winter 2010

2. PROJECT B OVERVIEW TABLE OF CONTENTS
The goal of this assignment was to create two web sites for
a company, however, we were to do so in a manner that could
PROJECT OVERVIEW......................................................................2
later be used by any company. The primary objective of the
assignment beyond designing a web site was to build technical OVERVIEW OF ORIGINAL SITE .......................................................3
skills with html & css that would help us see how css could help
us easily change the look and feel of a web site and give us SITE MAP .......................................................................................4
much more power as web designers.
ROUGH DRAFTS .............................................................................5
INSPIRATION ..................................................................................6
IMAGERY & GRAPHICS .................................................................7
COLOR & TYPOGRAPHY .................................................................8
WIREFRAMES ................................................................................9
WEB DESIGN COMPS .............................................................10-11
BROWSER TESTING ................................................................12-13
VALIDATION .................................................................................14

3. BODEGAS TERRAS GAUDA
http://www.terrasgauda.com/ing/labodega.html
SITE GENRE
I’ve chosen to take on a wine distributor’s web site. Though
I will be using Bodegas Terras Gauda, it could be used as a
“generic” themed web site that could help any winery see
how their site could look at and feel.
CURRENT SITE
The current site is very informational. It is definitely
reflective of a web 1.0 web site. You are able to find
out about the history of the company, the winery, wines
distributed, the location and more. The site is text
heavy and has minimal interactivity. The site also has a
competition web site that is hosted every year to designers.
Designers are able to send in poster designs to promote
the wine and the winners are awarded every year. The
competition web site looks nothing like the winery web
site - and by nothing, I mean the branding does not seem to
relate in any way whatsoever.
WEB 2.0 FEATURES
I would include links for twitter/facebook and show the
company how both could be a useful way in promoting the
company. Google maps would also be incorporated to allow
for a more interactive way to explore the location’s map.
Project B - Part 1: Proposal | DIGITAL STUDIO 1 (GRDS-720-OL) | Professor Sarah Adams | Amanda Kern | March 1, 2010

4. SITE MAP
HOME COMPETITION
OUR STORY WINERY WINES WINE TASTING R&D PROJECTS NEWS CONTACT
Project B - Part 1: Proposal | DIGITAL STUDIO 1 (GRDS-720-OL) | Professor Sarah Adams | Amanda Kern | March 1, 2010

5. ROUGH DRAFTS
Project B - Part 1: Proposal | DIGITAL STUDIO 1 (GRDS-720-OL) | Professor Sarah Adams | Amanda Kern | March 1, 2010

6. INSPIRATION
WEB SITES THAT INSPIRED ME
I usually look for inspiration early in a project. In this case
I did so in hopes to see not only how I could be inspired
but to think about how creating a web page layout could
easily be used between various companies. Rather than
looking at the fine details of the design I focused more
on seeing how the page was positioned and sectioned
in a grid. I looked closely at the hierarchy on each page
and how typography was handled between headings,
subheadings, and body copy. I also noticed how color
was applied to each page and before long I began getting
ideas of how any of these sites could easily be used by
another organization by changing some of these core
aspects of a web site.
Project B - Part 1: Proposal | DIGITAL STUDIO 1 (GRDS-720-OL) | Professor Sarah Adams | Amanda Kern | March 1, 2010

7. MOOD BOARD
Imagery & graphics
BRANDING
Initial branding elements are available to use for this
project. This includes the logo and wine imagery.
Project B - Part 1: Proposal | DIGITAL STUDIO 1 (GRDS-720-OL) | Professor Sarah Adams | Amanda Kern | March 1, 2010

8. MOOD BOARD
Color & Typography
COLOR
I’ve explored a few color schemes that may help give the
web site and upscale “winery” feel to it.
TYPOGRAPHY
The main fonts for the web site would switch between
Georgia in italicized format and Arial in all caps. The body
copy would be Arial or a sans-serif alternative.
Heading fonts - Georgia
HEADING FONTS - ARIAL
Body copy - Arial
Following the wine-growing revolution in Galicia that was triggered by
the setting-up of the D.O. Rías Baixas designation of origin, José María
Fonseca, our current Chairman, began to see the wine world more
clearly and from his position on the Board managed and supported the
development of wine-growing and oenology courses, as well as a host of
partnerships related to the art of wine-amking.
From a private initiative and spurred by the setting-up of Viñedos do
Rosal, S.A. and Adegas das Eiras, S.A. the founding partners’ original
dream of making a firm commitment to O Rosal wines began to be
realised. He winery’s philosophy was that Albariño, being such a noble
variety, could benefit greatly from a union with other native strains to
provide it with subtle new qualities and so further enhance the already
strong reputation of O Rosal wines.
Project B - Part 1: Proposal | DIGITAL STUDIO 1 (GRDS-720-OL) | Professor Sarah Adams | Amanda Kern | March 1, 2010

9. HTML Wireframes
BEGINNING TO CODE POTENTIAL LAYOUTS
The next phase of our project involved us using HTML
Wireframes. We essentially began the basic coding of 2
potential web sites to help give a visual overview, much
like rough drafts. However, it allows us all to begin to use
new HTML techniques and learn the technical aspects of
building a web site. At this point in the project the technical
exploration was far more important than the design given
that many students were using html for the first time.
Project B - Part 2: HTML Wireframes | DIGITAL STUDIO 1 (GRDS-720-OL) | Professor Sarah Adams | Amanda Kern

10. BODEGAS TERRAS GAUDA COMPS
DESIGNING POTENTIAL LAYOUTS
Because we had to create two separate web sites for this
project we also pitched two potential design comps for
this assignment that would show a different web design
layout that could help us build our skills with CSS. The first
concept I elected to go with a black, white and green color
scheme. I went with a minimalistic approach which I felt
fitting for a wine company. Again the goal was to create
a web site that could in turn be potentially used for other
similar companies with minimal changes to the code so I
created the layout with this in mind.
I found using one strong image to help draw the user in. I
located a few potential images through stock photography
web sites and flickr that I felt fitting for this project.
Project B - Part 3: Design Comps | DIGITAL STUDIO 1 (GRDS-720-OL) | Professor Sarah Adams | Amanda Kern

11. BODEGAS TERRAS GAUDA COMPS
DESIGNING POTENTIAL LAYOUTS
The second design comp I chose more of a white
minimalistic approach with isolated use of a wine like
maroon color and yellow. In both layouts I strived to slightly
vary typography enough given the limitations of the web. I
found subtle changes such as changing headings, altering
link appearances, and giving structure to lists helped me
create enough variety between the two layouts.
In layout 2 I used a wine cork image I had take a few
months prior that I felt to be quite fitting for the assignment.
Project B - Part 3: Design Comps | DIGITAL STUDIO 1 (GRDS-720-OL) | Professor Sarah Adams | Amanda Kern

12. TESTING IN MULTIPLE WEB BROWSERS
After coding the web site we were to test our web site
in multiple internet browsers to ensure they viewed
consistently. One of the biggest problems in web design is
getting a web site to look the same in ever browser. Web
designers typically spend more than 25% of their time
working on a web site in the testing phase. These were
the final tests I had completed of the first version of the
web site. As you can see, it viewed similarly in 5 different
common internet browsers.
Project B - Part 4: External CSS & validation | DIGITAL STUDIO 1 (GRDS-720-OL) | Professor Sarah Adams | Amanda Kern | March 7, 2010

13. TESTING IN MULTIPLE WEB BROWSERS
Here are the screenshots to show the testing completed
for the second version of the web site. Again, it appears
to have no major viewing issues across five major internet
browsers.
Project B - Part 4: External CSS & validation | DIGITAL STUDIO 1 (GRDS-720-OL) | Professor Sarah Adams | Amanda Kern | March 7, 2010

14. VALIDATION
The final phase of the project was to validate the web
site to ensure all coding used was compliant with web
standards. It’s very common that web designers may build a
web site and it may look great but may not use appropriate
coding. It is pointless if the site is built in a way that isn’t
standards compliant so this process was a great way for us
to double check out work to ensure it met standards.
Project B - Part 4: External CSS & validation | DIGITAL STUDIO 1 (GRDS-720-OL) | Professor Sarah Adams | Amanda Kern | March 7, 2010