Monday, December 10, 2012







This is my bonus project for my company! I found a cardboard box from a friend and put the earring box inside. I took extra pattern and cut, placed, and pasted it on the inside of the box. The earrings are actually mine that my mother gave me. Next I printed the pattern document on two sheets of tracing paper to act as tissue paper for my package.

Originally I was going to add the ribbon I had bought earlier for this idea and put the logo on top of the small jewelry box with said ribbon but when I explain the idea to many classmates they felt that it was logo overload and to leave it subtle like this. I felt that their suggestion was valid so I left the tissue paper and inside of the jewelry box speak for the company instead of hitting the consumer over the head with the logo.

Final print

This is the cover of my new folder. It took multiple tries to get the cutout to work. The blue is a ban of watercolor paper that i printed on both sides of.
The entire folder is made up of white watercolor paper attached to poster board attached to printed on watercolor paper. The flap is the same composition. The pattern that is throughout my piece is my logo inverted and repeated.

All of the documents now have the pattern seen on the inside of the folder on their backs, and for the envelope on the inside. These are the documents that had text changes to them, the mailing label and the business card. I enlarged the name on the business card to draw emphasis to it. The mailing label had copy taken from it with the exception of the company name and street address. The customers address was added to this mailing label. The copy of the letterheads did not change.

Final Wireframes/tablet aspect

 The changes I made to my wireframe since my last post includes the addition of the social media buttons under the search bar. I found photos of them online and recreated them in illustrator, put the logos blue into them all and placed them into my design. To all of the buttons I added a cursor to show where to click. I also added a shopping cart button using the same steps as the media buttons.  I have included pictures of all stage changes in my design. I removed the dashes in all of my lists because I was told they were unnecessary.
 Finally, the major addition was the quickview menu I added to the Inspired? Go Design! button. It includes pictures that a person could click on for each step of the process. The arrows show that their could be more inventory a customer could look through. The menu mimics the smaller menu above in color scheme.





Saturday, December 8, 2012

Wireframes in progress 2


 After the two critiques I received in class from my classmates I changed a few things on my wireframes. This includes the footer, I got rid of the contact us line of text, changed the format and added terms & conditions and the private policy. The buttons seems very flat so I added a light gradient to the top toolbar, the side bar on the catalog page and to the Go Design button. I also, by suggestion, made that button larger since that is the focus of my site/brand.  I was told my up and down state were too similar, so to the left is the change I made. The gradient changes to the logo's blue to a darker gray and the text is white when a button is clicked. This applies to the Look Around button, Go Design Button and the Design! button. I changed the drop down menu for that button also. I added a gradient to it, made it a darker gray. I also changed the menu or the side bar and drop down menu's text to the same typeface as the catalog to increase readability.

I am going to add quick view type of menus to the Go Design! button and the side bar to show an example of the actual design process.


Tuesday, December 4, 2012

Wireframes in progress

 This is what my wireframes look like in progress. Since the last post I have added the Contact us bar to the bottom of both pages and added the second have of content to the home page, which explains how designing everything works. I also added the content to the drop down Design! menu. I added the final catalog photo and typed up the descriptions.



< This photo displays the Design! drop down menu.


Below shows what the links on the Design By menu would look like if you clicked on it.

Monday, December 3, 2012

Wireframes


 These are the wireframes I had for class today. I started adding the actual text to sections like the tool bar. Overall my layout is very simple to create an atmosphere where the costumers feel comfortable and not overwhelmed when designing their earrings.
 I have started adding in more text and images including my brand's logo, a main image on the home page, and almost all of my catalog images.
This is what the Look Around button looks like when rolled over or clicked.
This is what the Design! button looks like when rolled over or clicked. It brings up a menu of choices.




I am trying to stick within the color scheme of blues and greys for the overall feel of my website.






This are my original sketches for my home and catalog pages. I used the templates given to us to figure out generally where i was going to put everything

All printed Stationary pieces

These are the scans of all of my stationary pieces I had for the last critique before finals. The folder, which had the logo cutout so the blue would show through and on the inside was a rounded pocket with a place to put the business card. I constructed this folder using the given template. The blue sheet within the actual paper is watercolor with the blue of my logo printed on both sides. Below is everything that was inside it, the stationary with and without copy, the envelope, business card, and shipping label. I tired to stay with an overall vertical design for most of my pieces, including my envelope. On the backs of all of the printed pieces is the blue of the logo. I scanned in the backs of the envelope and business card to show this.

After the critique I decided to add the pattern of the logo to the inside of the folder and to the back of all of my documents. I am also currently redesigning the folder so the cutout does not have to be done on the thicker of the papers.