Index link

This is my link to the in class-assignment from class on 2/9/17 putting Victor Hugo on the internet


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 8

The goals of project 8 were to re-create our web design from project 7, with the same specifications on each page. Focusing on changing color, type faces, and color to create an enjoyable user experience.

I worked on this project as much as I could in the time I had to complete it. I reworked all the pages with the 960 design grid divs. Then I tried adding in the content I had already worked on but that was a long process of trial and error, however I found a way to make the header a picture which I wasn’t able to do before, and I was able to have the same design on all three pages and link each one back to the other and open in separate tabs. I kept the same google fonts for the titles and the content.

Some things I wish I could’ve figured out were the sizes of the boxes, I was having trouble getting the header picture to stretch all the way across the page and then I couldn’t get it to even fill the top of my container. I also wish I could’ve added for boxes and content boxes but every time I kept trying to add more pictures and content something would give me a problem and I ran out of time to keep fiddling with it.

I think my most successful thing is my contact page and the picture background I put into my box I really had fun playing around with the colors and pictures. I Just wish I could’ve added more with less complications.

Project 8 Link:

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: