bodegas multiple version css web design

PROJECT B: Web site design using CSSDIGITAL STUDIO 1 (GRDS-720-OL)

Professor Sarah AdamsAmanda KernWinter 2010

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 later be used by any company. The primary objective of the assignment beyond designing a web site was to build technical 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 much more power as web designers.

PROJECT B OVERVIEW TABLE OF CONTENTS

PROJECT OVERVIEW......................................................................2

OVERVIEW OF ORIGINAL SITE .......................................................3

SITE MAP .......................................................................................4

ROUGH DRAFTS .............................................................................5

INSPIRATION ..................................................................................6

IMAGERY & GRAPHICS .................................................................7

COLOR & TYPOGRAPHY .................................................................8

WIREFRAMES ................................................................................9

WEB DESIGN COMPS .............................................................10-11

BROWSER TESTING ................................................................12-13

VALIDATION .................................................................................14

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

SITE GENREI’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 SITEThe 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 FEATURESI 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.

http://www.terrasgauda.com/ing/labodega.htmlBODEGAS TERRAS GAUDA


SITE MAP

HOME

OUR STORY WINERY WINES WINE TASTING R&D PROJECTS NEWS CONTACT

COMPETITION


ROUGH DRAFTS


INSPIRATION

WEB SITES THAT INSPIRED MEI 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.


BRANDINGInitial branding elements are available to use for this project. This includes the logo and wine imagery.

Imagery & graphicsMOOD BOARD


COLORI’ve explored a few color schemes that may help give the web site and upscale “winery” feel to it.

TYPOGRAPHYThe 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.

Color & TypographyMOOD BOARD

Heading fonts - GeorgiaHEADING 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 2: HTML Wireframes | DIGITAL STUDIO 1 (GRDS-720-OL) | Professor Sarah Adams | Amanda Kern

BEGINNING TO CODE POTENTIAL LAYOUTSThe 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.

HTML Wireframes

Project B - Part 3: Design Comps | DIGITAL STUDIO 1 (GRDS-720-OL) | Professor Sarah Adams | Amanda Kern

BODEGAS TERRAS GAUDA COMPS

DESIGNING POTENTIAL LAYOUTSBecause 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.

BODEGAS TERRAS GAUDA COMPS

Project B - Part 3: Design Comps | DIGITAL STUDIO 1 (GRDS-720-OL) | Professor Sarah Adams | Amanda Kern

DESIGNING POTENTIAL LAYOUTSThe 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 4: External CSS & validation | DIGITAL STUDIO 1 (GRDS-720-OL) | Professor Sarah Adams | Amanda Kern | March 7, 2010

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.

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.

TESTING IN MULTIPLE WEB BROWSERS


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.

VALIDATION

bodegas multiple version css web design

Documents

winery web site

web site design

competition web site

wine distributors web

current site

web designers

generic themed web site

site genre ive