Hyundai

1
Hyundai

• By Justin Rosecrans

2
Homepage

• I designed the layout of the webpage with the
  floating boxes and the navigation bar on the top.
• The images I received from the manufacturer
  agency at Hyundai
• Throughout the presentation there will be a same
  layout to keep the website consistent.

3
Homepage Bottom

• This image shows the bottom of the homepage in
  better detail.

4
Homepage Top

• This image shows the top of the homepage in
  better detail.

5
Order History

• After the checkout of buying a product, the user
  can look up their Order Number and then it will
  display all their orders.
• I designed the look and layout of the boxes on
  this page and developed the functionality of the
  menu.

6
Product Detail

• After selecting the model and year of the car it
  will bring you to this page or a list of products
  on the next slide and then you can click Add To
  Basket to put the product in the checkout cart.
• I designed the layout of this as well.
• It pretty much is consistent with the rest of the
  pages.

7
Product List

• After selecting the model and year in the
  navigational menu it will take you to the product
  detail page in the before slide or the product
  list page. It all depends on how many products
  are available for the model and year selected in
  the navigational menu.
• I put the hover functionality as seen above in
  this page as well as the layout of the big box in
  the middle.

8
Basket

• This is the Basket page, it shows all your orders
  in a java cart.
• I designed the buttons on this page, the
  functionality was designed by the back-side of
  the team.

9
Shipping Payment

• This page the user enters his/her address and
  fills out the credit card information.
• To get to this page the user clicks the checkout
  button in the Basket on the previous slide.
• This template I did not design, but thought it
  would be good to mention how the process works.

10
Verify Page

• After going through the Shipping and Payment Page
  the user comes here to the verify page and
  verifies that all their information is correct.
• This template I did not design, but thought it
  would be good to mention how the process works.

11
Order Confirmation

• This is the last page of the webstore after
  completing the full checkout.
• The design is pretty simple yet effective in
  displaying the order number, receipt link, and
  Instructions on how to install the software.

12
END of Hyundai

• This is the end of the Hyundai store, which was
  one of the few stores that I was assigned to
  design at Nokia and it is still up today.
• The rest of the stores we received templates for
  and used that to create the design structure.

13
My Portfolio Site

• This is the Homepage of my Portfolio, it is
  currently still under development though.
• I designed and coded this myself.

14
PetCareQueen.com

• This is a website I created myself and Designed
  in HTML and CSS for my sister.
• I used Photoshop for the Logo of the sun on top
  and Illustrator for the box in the middle.