Bodegas multiple version CSS web design
- 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