P2 Creative Brief

P2 Creative Brief

Micheal Russell and Tony Nguyen

J-SPEC Auto

Background:  

The goal of this project is the redesign of J-Spec Autos e-commerce web site. The site is currently a very "vanilla" looking site whose homepage is a hodge-podge of mismatched information. The site check out page is currently non-functioning and needs to be operational.

Target Audience:

The primary audiences for this project are street car and tuner enthusiasts looking for a cost effective alternative for major end item replacement parts.

Objectives:

Potential customers should be able to quickly navigate the site from homepage to checkout without delays or broken links. The shopping experience should keep the customer on the company's site and encourage their frequent return.

The Message/ Tone:

Edgy, this site is for performance enthusiasts.

Media:

Web

Creative Considerations:

While the feel of this site should be edgy, we must remember that above all else this is an e-commerce site.

The Deadline and/or Other Requirements:

Case study deadline November 14, 2012. Go live deadline November 21, 2012.

Unit 4 Reading

In chapter 7 "The first step in recovery is admitting that the home page is beyond your control" begins talking about how he's relating the chapter to a old TV gameshow "Beat the Clock" where contestants do tricky but doable stunts and the host would add one more rule such as doing it blindfolded. SO his analogy of the gameshow to the homepage is by doing site identity, hierarchy, search, deals, registrations, shortcuts, etc blindfolded. The homepage would need a tagline where is a phrase that visually connects to the ID (personal, lively and clever), and the welcome blurb that is the description of the site for audiences who scans and unable to figure out what the site is about. Homepage navigation can be unique at times by including section description, different orientation, and space for identity. Pulldowns can be troublesome because they're hard to scan and twitchy plus you have to seek them out. I find it annoying when the pulldowns are rollovers and when you move off the pulldown for a little bit it disappears and you have to go back to it again. After reading this chapter, it points out small important topics that I would never consider but when appointed to it makes great sense and I greatly agree with.


One of the topics it talks about are the tagline.
http://www.smashingmagazine.com/2009/02/26/10-steps-to-the-perfect-portfolio-website/

 Displays some witty taglines.
http://www.smashingmagazine.com/2009/12/29/ten-clever-effective-series-advertisements/

Showing how to use taglines effectively.
http://www.smashingmagazine.com/2010/10/28/billboard-web-design-how-to-win-your-audience-s-attention/

P2 Research

http://www.importpartspro.com/

http://www.jspecauto.com/default.aspx

http://www.hellocosplay.com/

Unit 3 Reading

In the unit 3 reading "Street Signs and Bread Crumbs" the author talks about the relations of cyberspace and the physical world. The example he used was a scene at  Sears. He refers that different from the real world where you have physical memory of where the item your looking for on certain aisles by physically remembering where it was by like the refrigerators but in web theres no sense of scale, direction or location, its like teleporting to a different area, which is why it's important to have a logo to let the user know that your still at the same site and a  page title to that is prominent for users to know where exactly they are. Another analogy was how the LA street signs are prominent and how its important that it is input in the website to help it make for easy navigation. I would of never thought of it that way however that does make a lot of sense to me. He also said there were two  type of people, one was the "search-dominant" user who will always go straight to the search box first and the "link-dominant" user who will always try to browse first. I believe I am a link-dominant person however if I was trying to find something specific right away like store hours I would use the search box first.

http://www.smashingmagazine.com/2011/04/19/showcase-of-creative-navigation-menus-good-and-bad-examples/

http://wlion.com/blog/2007/11/12/who-really-has-time-to-go-back-to-the-top%E2%80%9D/

http://www.smashingmagazine.com/2008/12/04/designing-the-holy-search-box-examples-and-best-practices/

Unit 2 Reading

In chapter 3, it talks about billboard design. First topic is a clearer visual hierarchy and the three traits that portrays that is the more important the item is the more prominent it is, visually related is the same as a logical one, and finally the nesting trait. Next topic is the two important traits of web conventions first being that they are useful so when they do work they don't require as much thinking and that it should be taken advantage of, sometimes if something still works you dont need to fix it. Other topics discussed were breaking up pages to clearly define certain areas no matter how complex the content maybe and making the obvious clickable things obvious and lastly keeping the noise down by making it less chaotic and not have too of a distracting background.

Chapter 4 is "Animals, vegetable, or mineral?" titled after a classic word game of twenty questions. Where the game didn't require too much thinking, it's like instantaneous mindless answers. The author wanted to make it clear that it doesn't matter as much of how many clicks to get there but how much brain power we use. Which I find does make sense to certain limits however.

In chapter 5 "Omit Needless Words", which he described in a definition style "vigorous writing is concise". Removing/taking half the words/fillers out is to help improve it to be more concise and make it less distracting with too much complex content , to better reel the audience from boredum.

http://www.smashingmagazine.com/2009/03/31/backgrounds-in-web-design-examples-and-best-practices-2/

this relates to the topic about not having too busy of a background.

Concept Statement Project

.    Create a list of all users that may visit your site (not from the WWW but those you’d invite).
    Friends, family, relatives, clients, employers.

.    What will each of those users want to see in order to enjoy their visit to your site?
    My portfolio/art, the flashy interactivity yet clear and easy to navigate website design.

.    Name your intended audience (the person(s) you need to persuade.)
    Potential Clients, future employers, and fellow art enthusiasts.

.    Describe what you need to inform and persuade them of:
     Promote my: Designs and art works.
    Goals of the site are: To entice and spark interest with clients and employers to hire me.
    My ultimate message/philosophy (about who you are): There is nothing in this world that is perfect but that doesn't mean you can't stride for perfection.
    What is the story you are telling? Enthusiastically creative in designs that progressively evolves from the typical mainstream vision. Strives not only for positive growth in teamwork but determined solely in tactical initiatives where a conundrum arises, which appeal the idealistic embodiment of perfection.


.    List the assets you need to persuade the user: Which 7 (minimum) projects? scans of what?, photos of what objects? images from what computer graphics program? what descriptive text? list them.
    1- Video Game Concept- Designed a logo using Adobe Illustrator and Photoshop. The game cover for XBOX360 with InDesign.
    2- Photorealistic Vector Based Drawing- Took a photo of a firearm and used Adobe Illustrator to illustrate the image.
    3- Infographic- Used a Lamborghini image to illustrate with Adobe Illustrator to illustrate the image and used Acrobat to do apply the rollover effects.
    4- Magazine Spread- Used photographs of a friend's BMW M5 and Nissan GT-R and edited them with Adobe Photoshop and InDesign to layout the spreads and type.
    5- Eden Logo Design- Designed a client's logo with Adobe Illustrator for an EDM event flyer.
    6- Website Proposal Concept- Did a website proposal for Lamborghini using Adobe InDesign that included a creative brief, moodboard, user personas, site map, lo-fi/hi-fi wireframes, final design.
     7- Website Design- Designed a website for a client called PNW_INC (Pacific Northwest Infiniti and Nissan Club) Using Coda to code and Adobe Photoshop to edit the photos.

.    For the purpose of structuring your website portfolio pages, list the categories of work you will show. (for a Photographer, for example, it may be portrait, product, sports photography categories).
    -Logo Designs
    -Illustrations
    -Concept Designs
    -Website Designs

.  Concept Statement:
     The website will be bold yet classy at the same time, and the users who will venture through my portfolio website will find themselves feel welcome and feel like their at home with the ease of navigating through my website won't require them having any seconds of thought, yet its intuitive and instinctive to them as to where they would like to go to next, its so easy its like opening a door. As simple as navigating there will be some flare added to it such as the color scheme, to make it look enticing and welcoming. Also with CSS3 transition coding, there will be a good amount of interactivity like roll overs or image slideshows so the user wouldn't get so bored to stare at a still screen this especially applies to audiences with short attention span. As flashy as it sounds, it will be more subtle and not cause too much distraction from the content that will interrupt users from reading something. Hopefully presenting the assets I have within my art works and designs will not only impress the users but perhaps inspire them into this field/hobby/lifestyle.

P1 Moodboard

P1 Sketches

3 Inspiring/Influential Portfolio Websites

http://www.albertlo.com/

http://www.artworking.co.uk/index.htm

http://www.noedesign.com/2008/

http://www.iestudio.co.il/en/portfolio.html

http://www.serialcut.com/

http://www.pikaboo.be/

http://www.enila.fr/

http://chriswoods.ca/photographer/

http://www.deep.co.uk/

http://www.oneover.com/

Unit 1 Reading Response

In the first chapter of the first unit of reading "Don't Make Me Think", Steve Krug explains explains to us the importance of designing websites to that is clear and concise. His first law of usability is to make sure to design the website where the target audiences doesn't have to think when they need to navigate the page. There shouldn't be much thought into it and that the reaction should be fairly instantaneous. Some ways to enforce this is to not make it all cluttered up, make clickable obvious, have less options in a drop down menu bar by having the search enable to find the closest to your keywords.

The second chapter "How we really use the Web" goes over how web audiences really read and navigates through a website. Steve Krugs explains that we don't actually read every single word within the website and that we usually just scan them because web audiences are usually pressed for time and know what they are looking for. Web audiences do this by focusing on words and phrases that would match best to their target intent like in Ginger's example. He also believes that we "muddle through" because its just not important to us and that once we find something that works theres no need to change our way of doing things.

The last part of the reading in unit 1 is "Why Mood Boards matter", this article explains what a mood board is (can be a loose collage or a refined template) and the benefits of presenting a mood board to a client. The first benefit is a much quicker and efficient mock up production that can save misunderstandings of opinions later on. It gives a smoother relationship with the client by making them feel more involved and that you the designer are listening to their ideas and suggestions. Finally, mood boards are just more fun and allows for greater brainstorming.