May 5, 2010

Noise Toys Site Map

Posted in Uncategorized at 7:49 pm by priyasheth


April 23, 2010

Midterm (Competitive Analysis)

Posted in Uncategorized at 1:22 am by priyasheth

I took various competitive sites for this company and did a quick survey of their basic features and pros/cons.  One main thing I noticed was most of the sites use Flash and the client for this project does not want Flash to be used on the site.  One of the tasks for this project will be figuring out how to achieve a dynamic, fun and interactive feel to the site without using Flash.

Midterm (Client Survey)

Posted in Uncategorized at 1:17 am by priyasheth

For my midterm, I will be doing a site design for NoiseToys which is a company specializing in making applications that combine gaming and music.

Client Survey

I surveyed one of the founders of the company that this website is for to gain a basic understanding of what the motivation and components of the site should be.

General Information

1. What is the name of your company and your current URL? NoiseToys and

Audience/Desired Action

1. Basic Demographics :
– Young adults (18-30) who are musically oriented.
– Non-typical gamers who are interested in music discovery
-Tech savvy
-Those who use iphones and iphone applications

2. Primary “action” on site
-If the user is on the site for the first time, the primary objective would be to become a player of the game.
-If the user is already playing the game, the primary objective would be social participation with the game and others who play it via the website (forums, leader boards, etc)

3. Key reasons why the target audience chooses the company’s products and/or services?


1. Few adjectives to describe how your site visitor should perceive the site?
– Fun, inviting (but not too cartoony)
– Music undertones
– Clean look (focus on functionality and game artwork than site having its own personality)

2. How does your company differentiate itself from competitors?
– The games are more music focused and the company provides a gaming and music experience into a single application (sits somewhere between its competitors)

3. Competitor URLs


1. Basic Structure of the Content
-Leader board
-User Dashboard (this will be a personalized dashboard for the user which will incorporate music news, application information/leader boards, music/gaming statistics, song ratings, trending, etc as related to the various applications available from the company).

3. The logo will be used from the current site


1. Target platform and browser?
– Mac and PC. Safari, Internet Explorer and mobile devices.

2. Specific technologies that you would like to use on the site?
– Do NOT want to use Flash since the website should be compatible with iPad and iPod considering the application itself is for the iPhone.

3. Will you have database functionality?
– Yes. Music statistics and user information will be stored on a database.


1. How will most people find out about the site?
– Via playing the game on the iPhone
– Social networks (Facebook, etc)
– Word of mouth
– twitter status updates

Assignment 5- CSS Box Model Exercises

Posted in Uncategorized at 12:48 am by priyasheth

For these exercises, I completed option 1 and have posted my files to the class web server :

Assignment 4- MoMA ReDesign

Posted in Uncategorized at 12:39 am by priyasheth

Coming Soon!

April 9, 2010

Assignment 3 – 2 column divs

Posted in Uncategorized at 1:53 am by priyasheth

For my 2 columns CSS/HTML divs assignment I chose to as my inspiration.  Digg fits the two column structure well – it has a header, footer, main content area, and a right column.  Changes I made to the original CSS given in the class notes included:

1) Changing font styles for header and paragraph text

2) Changed the position of the navigation from left to right

3) Height of header

I grabbed images from the website and used text from pre-existed articles for the content.  Here is a screenshot of the final product:

April 1, 2010

Assignment 2 – Wireframe for Monday May Design

Posted in Uncategorized at 7:16 pm by priyasheth

In order to design the wireframe, I used the template Illustrator template provided.  It initially took some effort to get used to using it, but after some practice I became more efficient.   I found that sketching the layouts on paper first and them translating it into the Illustrator wireframe was much more efficient than playing around in Illustrator first.  I started by drawing various sketch layouts and then chose the ones that I liked best to turn into the wireframe.


Who We Are

Assignment 2 – MoMA Redesign

Posted in Uncategorized at 3:03 pm by priyasheth

The redesign of the MoMA webpage included incorporating the following suggestions :

1) The original design put focus on the twitter feed box instead of the main content due to placement and color of the box.  The twitter feed box was moved to the bottom left to help mitigate this and put more focus back on the main content of the page.

2) The gradient along the edges of the page was unnecessary and actually took away from the modern style of the page.  This was removed.

3) Typically, it is best to leave a really recognizable logo just the way it is.  I replaced the re-created logo with the original logo.

4) The social networking buttons on the page were in different locations (some on the left and the twitter box on the right).  All social networking icons were moved to be in the same area on the page.

5) The address in the original had type that was too large.  The font size was lowered and the information placed on the bottom right.

Here is the redesign :

March 5, 2010

Assignment 1 Process

Posted in Uncategorized at 1:58 am by priyasheth

Step 1 : Took the user profiles and compiled all the information into a single table for more effective comparison.  The main themes throughout the different profiles were :

  1. Ease of use
  2. Relevant content that is easy to find
  3. Aesthetically pleasing

Step 2: Competitive Evaluation

Took several other museum websites and analyzed them for content and effectiveness.  Given the features requested by the users and the business objectives provided I specifically focused on the following:

  1. Navigation placement
  2. Navigation rollovers
  3. Flash Content
  4. Membership information
  5. Kids activity area
  6. Aesthetic quality
    1. Images/Content
    2. Typography
    3. Dynamic Content
  7. Pros/Cons of website

Step 3 : Re-design of MOMA page

Based on the user profiles and the pros/cons of the competitive websites, the following aspects of the website could use re-design.

  1. Move navigation to the top of the page or to the side
  2. Have only one frame of the main site changing via Flash
  3. Make membership an obvious separate box on the main page
  4. Add navigation button called “Kids corner”
  5. Create more hierarchy on the main page
  6. Add access to social networking elements on main page
  7. Add more aesthetic elements to the page through new logo design and more variation in typography.
  8. HTML text and images that can be copied

February 25, 2010

Week 1 Q & A

Posted in Uncategorized at 6:55 am by priyasheth

Core Design Process

1) How many phases are part of the Core Process and what are they?

There are five phases to the Core Process.  They are as follows :

  1. Define the Project
  2. Develop site structure
  3. Design visual interface
  4. Build and integrate
  5. Launch and beyond
2) What is “Scope Creep” and how can you prepare for it?
  • Scope creep is when the project moves in a direction from the initial definition of the project to something larger.  This is a process that may not be recognizable in the beginning, but may slowly build up as clients start requesting small changes.
3) What are the two ways to combat content delay?
  1. Hire a content manager
  2. Create a content delivery plan (schedule with delivery dates)
4) What does the “QA” in QA testing stand for?
  • QA : Quality Assurance
5) What do the authors mean when they refer to “Smart Design?”
  • Smart design refers to a website design where the focus is on the audience’s user experience.

Gathering Information

6) What does the word “Discovery” refer to?
Give me a couple examples of “good client” attributes and “red flag client” warning signs.
Please download the Client Survey andMaintenance Survey and come prepared to discuss.
  • The word “Discovery” refers to the initial phase of the project where team members try to understand the end user’s of the site along with the company, site requirements, and the redesign as a whole.  Surveys can help begin the process of gather information.
  • Good client attributes :
  1. “Is goal-oriented: focused on the big picture and how the site fits into the business as as whole.”
  2. “Answers the client survey in a clear and detailed manner.”
  3. “Is in agreement on deliverables, schedule, and budget.”
  • Red flag client attributes
  1. “Has a ‘get-it-up-quick’ attitude with unrealistic schedule requests”
  2. “Doesn’t know what the content should be but wants it to ‘look cool’ “
  3. “Doesn’t have time to fill out the survey.”

Understanding your Audience

7) What is an audience profile? What is another name for it?
Name some of the things you need to analyze when determining an audience’s capabilities?
Download the Expanded Tech-Check and be prepared to discuss in class.
  • An audience profile consists a short description of each visitor type to the site, who they are and what they do.  A detailed profile would have more information about a specific person, the type of hardware and internet connection S/he has access to, and what S/he uses the web for.
  • Another name for an audience profile is a “persona”.

Next page