Assignment 3: Phase 3 Final Site

Final Site

Phase 2 Design Comps

Attached are comps for phase 2 of the design process. Style Guides are also included in the PDF.

Layout 1

Layout 2

Body content on pages is minimal and will be replaced/styled when transferred to web design. 

Blog Post 4 - Phase 1

Attached is my Information Architecture Documentation for Phase I of the Children In Need website Redesign. Click Here to View

Week 7 Challenge

Google Fonts

Font Squirrel

CSS Zen Garden Redesign

Click here to View

I decided to scrap my previous concepts as I felt they lacked a personal touch. Above is my final layout in which I used a photograph of a rhino I took at the zoo and edited. The rhino is a strong graphic image against a black background, and the colors of gray, bright orange, and purple all work to add contrast to the layout. There is also a subtle texture in the background of the layout.

Blog Post 3: CSS Zen Garden Comps.

For this comp, I wanted to focus heavily on imagery. In this layout, the background image is of a forest which is what I think of when I think of "Zen". The typeface is Montserrat and it's bold and clean san-serif appearance helps keep this layout looking modern. In the image, I have pictured the first section of body text, after this section, the text will flow freely. 

My concept for this comp was to keep it simple once again. I wanted to find an image that directly contrasted the forest, so I replaced it with a city. The layout is comprised of several elements that keep this modern appearance. The bright yellow contrasted against the black is eye-catching. I used Montserrat for the typeface in this piece.

This layout proved to be the bigger challenge as I worked to fill up an awkward amount of space. My concept behind this was to use unusual, graphically strong images. I used bright orange to capture attention. I used historical anatomy drawings because I appreciate the historical appearance and interest they contribute to pieces. Finally, the typeface I used was Yanone Kaffeesatz.

Galapagos Island Website

Finished Galapagos Island Website

Blog Post 2

Galapagos Islands Comps


Set 1: Galapagos is most known for it's tortoise. I wanted to capture this iconic image in the logo, and the color green seemed fitting to carry through the tortoise theme. I chose a soft green palette so that the blocks of color would not be harsh when brought together. I included a sidebar to make this into a two column layout, and my navigation is across the top. I've included social icons as an extra decorative element, and I designed my layout with a google font, "Raleway" that I intend to implement into my final layout. I rounded the corners of all of my elements because I feel this gives the layout a softer appearance which matches with the color scheme and logo.

To see the images larger, please click HERE & HERE

Set 2: I carried the same tortoise imagery through to this variation. Here, I focused on my logo and the navigation elements as the focal point. The icons break up the layout and give a nice contrast to the bodies of text. The navigation will have a rollover effect as well. 

To see the images larger please click HERE & HERE

Blog Post 1

1) What is the most recent version of HTML being used today?

HTML 5 is the latest version in use today. It is more powerful than it's predecessors, with enhanced features and versatility. It offers options that were not offered in previous versions.

2) What are the differences between a CSS class and an ID?

Id's are unique, meaning they can only be used once. They are often used more frequently for the bigger elements on a page. Classes can be used multiple times and can be applied to multiple elements within the page. They are used often for smaller elements, especially when used for styling purposes.

3) Why is it important to separate content (HTML) from presentation (CSS)?

Separating html and css is important for overall styling ease and page load time. Having CSS separate from HTML allows you to make one change on the css file and it will be applied to all of your pages at once. This is both time-saving, efficient and convenient. It would be painstaking to change the color of one element across all the pages of a site. Another benefit of separating the two is page load time. Less information on the page ensures that the page will load faster and keeps the browser from having to load the same information each time you access a new page of the same website.