Final Project

For our final project we were asked to create whatever we wanted using the skills aquired from the semester, including a list of specific techniques we were to apply to our webpage consisting of 3 or more pages that could once again navigate between eachother.

My idea was to create a virtual garden where you can navigate through the different things that make up the garden. I made a home page with an experimental navigation, in which you click the icon strip of the characters and it takes you to an overlay window. Here I made the titles for the pages extra large to create a new type of navigational layout.

Furthermore, each page consisted of high def photos, which is something I really loved putting on my websites because I have a great passion for photography. The page of plants I decided to color code the plants and create a scroll down rainbow archive. If i had more time I would’ve added slideshows in each of the color bars. For the animals page I wish I could’ve added information that would overlay the photos but I had trouble with that and had to scrap the idea at the end and just organized the photos neatly on that page. Finally the page named Edibles was to show the places that I would say are some of the best to live if you want to grow your own food and eat seasonally. I included maps and under each map, some of the current foods that are available right now locally that are in season. For this page I wanted SO badly to make a giant map which you could click on each location and brought you to a different page but in the end also had to scrap that idea and go back to my original idea which I successfully executed.

For this project and the last project I wasn’t able to load my files on to Fetch at all. I tried everything, so they are in my final portfolio of work as well as my card sorting I put on here –


Project 10 Final Website

In my final web design I included the following:

  • slideshow
  • navigation bar
  • scroll menu features
  • fonts/different typefaces
  • gallery page
  • background images
  • embedded links

For my home page, I wanted it to be a full page picture slideshow, and I used only me own photos.

My nav bar consisted of a link to each page as well as separate typefaces from the rest of my pages.

My interests page included boxes that linked to each of my separate interests and the paragraphs I wrote about how they each relate to my life. Note these actually link to the specific paragraph on my life page not just the page itself.

Finally, My portfolio page consists of a gallery of photos of just some of my work I have done recently.

I would’ve liked to added numbers on my slideshow so that you could click between the pictures. I also would’ve liked to add a page about the shows I’ve been in on my portfolio page somewhere as well as add captions and titles to each of my pieces but I couldn’t figure out how to do that.

Overall, I worked pretty hard on not making my site look like a basic 960 grid. But I wish I could’ve accomplished more, this is just a basic representation of what I could figure out how to do.


Research Presentation

My innovative design project was called Owlet and in the project page I described its major functions, gave credits to who designed it and created it. I embedded two videos, one from vimeo and the other from youtube. I added source information from both the main cite and the ixda awards page. I color coded the site to coordinate with what the product is advertised with and added 3 pictures of the main elements of the invention.


Link to page:

Project 10.1

For project 10.1 we made a list of the things we would put in our website about ourselves. I started with making cards of list items and eventually combined some and crossed others out and arranged them into categories.

For the table I separated them into sections of what will be on each page and what information will go on each page by categories. I added some color and type that I will include in my design.



Pictures of process with index card sorting:

Project 9

For project 9 we were to recreate the 3 page website mockup and actually add information and pictures to it. I chose to go with the Vegan Alcohol store,  I named it”Liquid-V” just so it had a company name. I met all the specifications including the <nav>, <footer>, <header>, etc. I added a sprite button in the search section and main menu buttons at the top to navigate through my site. I also linked a FAQ page from the about home page for curious consumers that want to know more.

I added an article on the home page and linked it to the actual article from a different webpage. I also added several pictures to my products page in the table and a brief information sidebar. I included all resource links at the bottom of each page.

I wish I could’ve figured out how to make a textured background, and make a working search bar, as well as fix the bold versus non bold captions in my products page but I couldn’t figure out what was causing that problem. If I had more time I also would’ve tried to figure out how to make my heading picture go across the whole top instead of having those white margins on the left and right of it, as well as make the <hr> under my main menu go across the whole heading.


Link to Project9:

Project 7

The goal of Project 7 was to make three pages that linked to eachother that represented a product webpage. One being a home page with at least one image and a paragraph, etc. the second being a contact page with a box to submit contact info, and a third page with a table using min width or max width, etc.

I made a site mostly with lorem ipsum to fill in boxes but illustrated that if they were to be on the real site I was trying to make I indicated what the boxes would actually have in them- I made a title on the top right of each page indicating what page it was. On the left side of each page I placed the link tabs to get back to the other pages so it was easy to navigate. As well as putting pictures as a top border on each of the pages. I included all the elements, I also added color and fonts, and borders.

The one thing I would say I had trouble with was the table, I struggled getting it to line up the way I wanted. I also would say I don’t think the placement or design of the boxes on each page is necessarily great but I was just trying to make sure I included them in there and showed as much as I could present on the page.

Project Link:

Project 6

The goal of project 6 was to create a page including a portion of an already existing page like the news articles on The Onion. At minimum we were to utilize the font-family, font-size, font-weight, font-style, font-height, and line-height. It was also important to recreate the article composition using a header, horizontal line, section, date, volume, issue, headline, image, and the article text.

I started off with filling the requirements and it took me a while per usual just to set up the container, and the divs and the size of all the texts and then after I did that all I could start adjusting fonts and adding the image. I also made the text of the article stand out by giving the first letter of the sentence starting it off emphasis and making it bigger than the rest and bold in css. In order to just meet the requirements I utilized text indent, made a couple different classes to put the section, date, volume and issue in.

In addition I wanted to add a header to illustrate that it was an adaptation of the onion so I added an image as a header with the title “the Onion” and adjusted the font and color on that as well. I also made a link to another article from the same volume my article was published in the onion because thats what it had the link to when you clicked it on the website. (Vol/Issue) I felt the right side of the page was fairly empty so to add some more things that weren’t required I made another box to the right of the article adaptation in which I added a gradient background and a couple gifs that illustrate the digestive tract just to complete the page overall.

I still can’t figure out how to provide a source link when you scroll over a picture to cite it, and so I had to put the reference link at the bottom again-I also couldn’t get the second <hr> to be bolder than the first one.


Project 6 link: