... loading ...

#04 Assignment for 12/07

Posted: December 1st, 2011 | Author: | Filed under: #04 - Redesign Project, Assignments | No Comments »

Hi all. We’re getting close to the end of class! Only 3 more to go. For next Wednesday the 7th of December:

1. Please have revisions to your wireframes based on in-class feedback. - ALL PAGES THAT YOU WILL EVENTUALLY DESIGN (4-6). Your wires should look close to this fidelity: http://sugarcomastudios.com/web1_spring11/?p=2184 with annotations like this: http://tinyurl.com/6wxoa44

2. Provide 2-3 visual design directions for your main or home page.


11/9 Class

Posted: November 9th, 2011 | Author: | Filed under: #04 - Redesign Project, Assignments | No Comments »

Hey Everyone. Bad news, I have had a very very last-minute work trip to the West Coast come up and I will not be able to attend tonight’s class.

I do recommend that you take the opportunity to still meet and work collaboratively on the redesign project. Take the time tonight to:

1. Review your chosen (a)core web site (b)analogous web sites and (c)disruptor site with the group.

2. Work in with your partner to identify what is the concept for your redesigned core site – for instance, in the example that I gave last week Amazon was the core and Facebook was the disruptor – The new concept would be to bring real-time newsfeed-like conversations about books and products to the home page. Essentially, making Amazon a personalized live review site – where i’m only getting reviews from people I know and trust. WRITE THIS UP ON THE BLOG!

3. Identify the pieces of each site that you’d use to make your core better – cut up your printouts and make a collage of (a)home page (b)2 other key pages

4. Sketch out what the new navigation and site map should be (at a high level) I know that many of your sites are really big, so only show the top 2-3 levels.

- – - -

Before next class:
A. Post your ‘design brief’ – what sites you are using and what your concept is for making a redesign.

B. Post scans of your collages

C. Post the first iteration of your site map – digitized, not in pencil sketches.
Look@ an example here.

 

We’ll review these in class next week.

Thanks for your understanding and I’ll be open for feedback all this week.

Jay


#04 – Redesign Project / Assignment for 11/9 Class

Posted: November 6th, 2011 | Author: | Filed under: #04 - Redesign Project, Assignments | No Comments »
  1. Choose your sites – the primary (eg Amazon), the similar (B&N), and the different (Facebook) / Post your choices and rationale online before 11/9 class
  2. Perform a heuristic evaluation on all sites and identify what is best and worst about each / Post your evaluation of the sites on the blog before 11/9 class
    • Overall Look & Feel
    • Branding
    • Messaging
    • Layout
    • Palette / Color use
    • Typography
    • Navigation / Wayfinding
    • Functionality / Features
    • Overall Experience
  3. Bring to class printouts of all relevant pages (3-5) of your sites / you will be creating cut-up wires in class with your team / Don’t forget to bring scissors and tape!
  4. Scan your new 3-5 pages after class and post on blog by 11/16

#03 iPhone App Assignment: First Designs

Posted: October 19th, 2011 | Author: | Filed under: #03 - iPhone App, Assignments | No Comments »

For next week 10/26 we will review the first iteration of your HERO FLOW through the application – it might be the start screen, landing page, detail pages, etc. Show us the main features and functionality of your application.

I’m assuming that you are doing wires and workflows in order to get to this state. I will want to talk about your process to getting to the ideas and screens, but what I want to see is the DESIGNED SCREENS. Since we only have two more classes in this project we will just iterate on your designs and not the wires or workflows.

Great ideas everyone.


#03 iPhone App Assignment: Concept, Poster & Sketches

Posted: October 12th, 2011 | Author: | Filed under: #03 - iPhone App, Assignments | No Comments »

We kick of our next project with a bang! This project will last only 3 classes – so, we need get going quickly. The assignment is to develop an iPhone app for an essential service in NYC. Something that you can’t live in this city without. Food, taxis, music, etc. We will use REAL DATA from NYC.GOV to make this an even more compelling design and user experience.

10/19  Part 1: Concept
Write up a short concept brief for your iPhone application. Include:

  • What is its name? / Name & Tagline
  • What will it do? / Features & Functionality
  • Who will buy it? / Audience types & Rationale
  • What data will you use? / Choose from NYC Open Data Site

10/19 Part 2: Sales Poster
Create a quick & dirty poster for your app. This will act as your moodboard / show colors, icons, other apps on a 11”x17” poster @72dpi / post and/or print before class

10/19 Part 3: Workflow & Wires
Sketch a workflow of the main feature of your app. Show all screens in the flow in wires. Your workflow and wires should be on the same page as in the example. We will be working through these as a group in the next class.

As reference:

Printouts of mobile wireframes for sketching

Templates for mobile wireframes (omnigraffle, etc.)

PSD templates for visual mockups of iPhone apps

Common patterns of iPhone UI conventions

Official Apple iPhone developers site

 

Have fun. Jay


#02 Local Projects Assignment: Final Presentation

Posted: October 6th, 2011 | Author: | Filed under: #02 - Local Projects, Assignments | No Comments »

Your assignment for next week (10/12)  is to finalize the presentation of your local project website. Refine your existing pages based on comments in class, and in addition to the pages you’ve already designed, create design comps for 2 additional pages of your site. In selecting the additional pages please focus on layouts and/or features that you have yet to present thus far.

What’s due in class:
High quality jpegs representing the home page design plus 4 inner pages of your site. If you have more elaborate rollover elements or Flash pieces please post additional images to indicate the various states of those features.

This is the final presentation of your design concept to the client, so be sure to closely re-examine each page for precision of layout (I’m talking about the alignment of images, content boxes and text elements to the grid!), the polish of photos and type treatments and fidelity to your overall design concept.

This is your mid-term – make it shiny!!!


Mark McLean Personal Chef- Revised Homepage + two pages

Posted: October 5th, 2011 | Author: | Filed under: #02 - Local Projects, Assignments | No Comments »

HOME PAGE Mock Up REVISED

 

 

 

 

 

 

 

 

Web Mock Up Sample Menus Page

 

 

 

 

 

 

 

 

Web Mock Up Services Page

 


#02 Local Projects Assignment: Refine Design Concept

Posted: September 29th, 2011 | Author: | Filed under: #02 - Local Projects, Assignments | No Comments »

Your assignment for next week, the 10/4, is to pick one of your design samples for the home page and refine it using our discussions on the blog as a starting point. Focus on including all of the information that your final home page will require and please consider how your design will be displayed at larger screen resolutions (background patterns or color, background image stretching, etc.). Also, it’s very important that you think through the interactive elements of the page and indicate how links, popups, forms, or Flash elements will work. We will discuss these in class.

Once you have finished working on your homepage, extend your design concept to 2 interior pages of the web site based on the pages from the wireframes assignment. As with the homepage, it’s very important to consider and then indicate how all of the functional elements of the page will work. And your navigation should reflect the current page in some way.

Remember also to use lorem ipsum for body copy and to make your content layout true to the type of information you are displaying… whether that is simple text headings and paragraphs; products with descriptions, images and prices; a calendar layout; or blog posts with headlines, dates and body copy.

What’s due in class on October 4th:
your new home page design
2 inner page samples
(all as 72dpi jpeg images that link to the full size image)

Email me if you have questions or want feedback on your work before class.


Wireframe Revisited and two homepage mockups.

Posted: September 29th, 2011 | Author: | Filed under: #02 - Local Projects, Assignments | 1 Comment »

Wire Frame revisited with grid

 

 

 

 

 

 

 

 

Mock up Website

 

 

 

 

 

 

 

 

Mock up website 2

 

 

 

 

 

 

 

 

  • What is the first read on the home page? What is the message(s) you are trying to convey?

I want people to see and feel Mark professionalism and expertise. First impressions are important and I want people to see Marks success as s sign of his high quality services.

  • What is the second read? How does a user orient herself? What do you want them to ultimately do?

I want the user to want to click on the images.  Visual appetizers if you will.  Great imagery will lead to helpful and important information.

  • What is the third read? How will this page change over time?

Over time there will be more images, and additional content added to the blog, the sample menus, the gallery and the client love notes.  Ideally this page would be updated as often as the blog, on a weekly basis, and them on a quarterly basis with new images and sample menus.

 

 

 

 

 

 

 

 

 

 


#02 Local Projects Assignment: Home Page Design

Posted: September 23rd, 2011 | Author: | Filed under: #02 - Local Projects, Assignments | 3 Comments »

Alright! Great last class everyone. I’m sorry we ran out of time to discuss this next assignment in great detail and clarity. You now have the ingredients to make a great home page (and sub pages) for your local business. Take inspiration from your mood boards through the color, image and type choices and apply those to the structure that you developed in the wireframes.

The exercise should be to first stay true to the structure of your wireframe and add the aesthetic layer and design one home page; the second attempt should be to break new ground and show us something completely different while retaining the content and general hierarchy of content you set forth in your wires.

DON”T COME TO CLASS ON WED THE 28st – you’ll be lonely if you do. You must still post your work by class time on WEDNESDAY and make comments on your classmates (no less than 3) by Wed end of day.

Your ‘official assignment’ is:
Part 1: Design in PhotoShop or Illustrator (2) Home Page mockups. 960pixels wide x any length @72dpi.
Part 2: Show me the grid. Either turn on your grid lines and take a screenshot OR create a new layer just with grid lines.
Part 3: Answer in the post 3 questions:

  • What is the first read on the home page? What is the message(s) you are trying to convey?
  • What is the second read? How does a user orient herself? What do you want them to ultimately do?
  • What is the third read? How will this page change over time?

Part4: Make 3 comments on your classmates posts.

Cheers, See you on the 5th!