Time for the Project:
4 weeks
Adobe Photoshop, Adobe Illustrator, Adobe Experience Design, Adobe Dreamweaver
Program Language:
HTML, CSS, Javascript, JQuery
1. Idea
I get this idea when I see people like to do grocery shopping with a paper list on hand. I was thinking if they lost their list or they may need help to do the shopping. They they may need my web site. After I made decision to do the website, I told my thought to my coworker. He told me google has the same idea and made an App already. Then I took a look of the App. I thought I might do something different. Then I listed about 12 categories about how people like to shop with list. 
After a basic idea came into my mind, I start to code my website.
2. Sitemap
I made a simple sitemap for the website. I separate the web page by categories.
3. The Icon design
I designed icons for categories. Usually the website navigation is links of the texts. I decided to use icons for navigation.
4. Layout Design (First Draft)
I tried several times of the design. From color to the layout. The very first show like the below.
I changed a little bit of my sitemap and add a page for whole list. It means all the list the users pick will be together in one page. 
5. prototype for website
This is the first prototype for Shopping List website
First prototype for Shopping List
Second prototype for Shopping List website
I made several changes when I did the second time of the prototype of the website. I was thinking how to make a good color for the website and how to make users using the website comfortable.
6. Programming
I use the HTML5, CSS3, jQuery and JavaScript to code this webpage.
Sample of HTML
Sample of CSS
Sample of jQuery and JavaScript
7. Website Icon Design
I used the same color of the background and special font for the Shopping List the first letters.
8. Final Design and Website
I did several change of final website. 
I. I removed the "whole List" page to be in the product page. Because When the user click the product they want, It will automatically add into the list showing below. The "whole List" page is a repeat page and very useless. 
II. I added the download PDF file button in case the user really want to take the notes to do shopping. But the list is more detail from the categories to the product they want to buy.
III. I removed the "add" part. Because I was thinking to use a date base to build with every product in the feature. Then add part will be optional but can be a research part. 
IV. I added a delivery service part. It will ask the user to write down their name, phone number and address for shopping delivery. Because more and more people is working with their work. They want to find a convenience life style. After they submit the file. I will get the email and a list on excel.
Click here or the image to using the website

You may also like

Back to Top