Filipus Bramantyo Meirdivitanto

Zunder Zifflin

Includes HTML, CSS, JS, JQuery

Introduction

This project case is about Zunder Zifflin (fiction), a growing paper company based in Alexandra, Virginia. Zunder Zifflin has been known to be one of the companies in the US to be on the lookout as their numbers are off the charts, even without the help of online shopping/e-commerce. Our aim here is to create logo as well as a website for online shopping matters so that Zunder Zifflin can be revived and compete with the big chains. The requirements for the website is it must provide information regarding their company, registration as a member, products that they sell, promos, and a way to contact Zunder Zifflin.

Basic Requirements

First of all, there are some requirements from Zunder Zifflin that needs to be fulfilled. The first one is about the logo. It has to represents the image of their company that has professional principles and consider the customer segment, shape and colors when designing the logo. The second one is about creating a blueprint of the website and must have header, navigation, content, and footer as its structure. The last one is about the contents, the website should provide information regarding their company, registration as a member, and products that they sell. Since I didn't work alone, I was helped by my team for the creation of logo design and blueprints and I handled the implementation of the blueprint in the code.

Blueprint

For such a professional company, my team thought that it would be better to make a website that looks clean, neat, and spacious. In order to implement that look, on the home page we put promos banner in image carousel, a few new collection showcase, a 'why us' section, and a footer that contains their social media hyperlinks. Other pages will be hyperlinked into buttons in a menu button on the right side of home page. We also make the web page responsive so no matter what device the user use, they can access and see the website with no problem at all.

Implementation

For the web part, there are a few conditions that I have to follow in each pages. On the home page, they wants to give an image-slider (using jQuery) showing promos that are available right now. Optionally we can add several images to show what kind of products available. And they want to convince the customer that Zunder Zifflin is the best choice for them by showing them a list of advantages they have over their competition.

On the product page, they want informations such as product name, price, rating, and brief description is provided.

On the company profile page, the information that needs to be provided is company description and company's moto.

On the contact page it should provides information about the companies headquarter and all their branches from all over the place and also other information auch as email addresses and phone numbers.

And for the registration page it should help customer to register and become a member by filling some personal information such as name, email, gender, address, city, and agreement to company terms and services. 5 kinds of validation using JavaScript is needed to validate the given personal information.

Source code Click here