Project 12 – Final

My Site

The goal for this project was to create a website to showcase most of my previous projects (excluding the first). This site includes screenshots of the main home-page as well as the reflections from my blog posts about them.

I feel that my site is well formatted to accommodate this type of content. I made the main content div a scrolling div while the header and link menu on the left are stationary. This way the user has access to all of the links regardless of which project description they’re scrolled to. The ‘Back to Top’ button is also always available for convenience.

This Course Overall

I came into this class knowing next to noting about formal coding of webpages, the most I could do was make text italic or underlined in message boxes. I’ve learned how to understand the syntax of html coding and it’s basic rules, which is an important skill to apply when trying out new code.

Project 10 – Portfolio

Content Wireframes Design

The goal for these projects was to design a site while considering the content that will inhabit it. At each step the site design was being developed as the content was. Using all that we’ve discussed regarding composition, layout, and function, our site must have a pleasant visitor experience.

I feel the composition of my site is solid, even a little too solid. While the composition of each page is consistant and easy to navigate, a little more scrolling room would help to open up the space. I kept the main navigation simple, with a div color to indicate which page the user was on. The secondary navigation on the home page could benefit from a rollover title or some other indication that each column of text or images leads to their respective pages. On the About and Bio pages, there’s a slight inconsistency of the space above the text due to the altered First Letter. For the portfolio page, I looked up the code for dropdown-images so that when one hovers their mouse over the thumbnail, the full-size image would appear and not be restricted to the size of the column. However when I added in other images near the first one, the dropdown-image appeared behind the rest of the content, so i was unable to include that feature.

Research Presentation – Owlet

My Page

For my research project I was assigned the Owlet baby monitoring system. This project was interesting to work on as I got to take an in-depth look at the technology behind this product, especially since it’s target users are infants and their families. Because the goal of this device is a monitor system for young babies, there is a lot of expectation on the app and sock to be as user-friendly and systematically sound as possible. For the webpage itself I would have liked to have less white space in the “header” and “links” divs.

Project 9 – Layout: Final

My Site

The goal of this project was to take the website layout we designed in the last two projects and add content and a few more features, such as a rollover animation to the navigation, a footer, and <article> tags that link to other pages.

My site layout is successful because I refined my design and added more features (aside from the required ones) to simplify the user’s experience. For instance, in the “Price” field on the Products page, I added a drop-down menu so that a user must select a size before they can see the price associated with it. This makes it easier to understand which size they are adding to their cart. I chose the content based around the idea from the previous layout, as if I were to set up a site where I could sell my art and take commissions. All of the photos used on the site are my own, as well as the site banner on the home page and the site background. The only drawback to my design is that I couldn’t get the code to work where each individual navigation menu item has its own rollover animation, instead the entire navigation bar is effected.

Project 8 – Layout Grid

My Site

The goal of this project was to recreate the site we designed for Project 7 using the 960.cs grid system to organize the layout.

I picked up the concept of the grid system pretty easily and applied it to my code with few hurdles. However, there are a few things that don’t line up exactly the same, such as the text box on the Contact page. While they look fine on a Mac computer, it’s not quite the same on a Windows computer.

Project 7 – Layout

My Site

The goal of this project was to design a website layout that is well-composed, easy to navigate, and professional. While using minimal content, primarily the “Lorem ipsum” text, we should be able to understand the layout and fill in content at a later date should we wish to.

I feel as though my website is successful in that the appearance is clean and pleasant to look at, easy to navigate, and designed so that the text is easy to read. My Products page has an organized table of 3 example items with their details and a short description, whose titles lead to a separate page with a fuller description and more images. Listed after each item is a shopping cart button which, when clicked, will hypothetically add that item to “Your cart” shown on the right. My Contact page has a simple feedback form where visitors can submit questions, comments, or other feedback. On each page I have a form where visitors can sign up for regular newsletters.