Brief: [Re]design[S]
For next week you are all going to work on two main pages, each with her own direction and bring it up to class. The design proposals should be different from one another (!) and you should present together your opinion on the proposals.
I am not pacing your mid-week schedule as I know coordinating might make it complicated for you but I expect you to do yourselves per group. Here is the way you’re going to go about this step by step:
- Post your group’s mid-week schedule as a comment to this post, keeping in mind you will need to:
- Individually post comments to your infoarch docs, based on the feedback you got in class
- Meet up and brainstorming, preferably in person, if not - online. (I found Skype is pretty good for these things)
- Choose a page to start the redesign from
- As a group - post a new information architecture document (wireframe) based on the feedbacks you got and your brainstorming
- Individually design that same page (I expect to see a substantially different design approach from each one of you)
- Give feedback to each other through the week (doesn’t have to be in person)
- Post your designs to the blog by Thursday, don’t wait for the last moment.
- See you next week, same time, same place…
Happy Passover!
Brief: The Great Redesign - InfoArchs
That’s it, the semester is nearing its end and we now embark on our final assignment. Here’s a proper brief post to introduce it:
What’s different about this assignment?
- It’s a redesign, meaning it is based on existing sites.
- It’s our final, meaning we now have higher standards.
- It’s a group project, so you’re working in groups.
In the coming few weeks you will:
- Choose an existing (average-big) website (which you all already did)
- Define its weaknesses and strengths (this week)
- Propose information-architectural improvements (this week)
- Propose several design directions (the week after)
- Choose an approach (the next week after)
- Split the work between you, designing several screens out of the overall website (the next week after)
- Finish this course and become kick-ass interface designers (final class)
*This schedule is based on the idea that we are going to have another make-up class (which might be the final class).
In the meanwhile in the coming week you will have several assignments and deadlines:
By Tuesday Apr 15th - Post to the site your assessments about the site’s weaknesses and strengths and try to lay out (in words) what treatment will you do to advance the design of 6 main features in the site. (it does not have to be 6 pages, it might be just features that are parts of pages). I want you to write user scenarios - how does a user go about trying to achieve this goal in the current site (make a list of steps), and how do you think this should be different. Split it between you guys so each of you posts about two features.
By Thursday Apr 17th - Post as a group (one post per group) a joint strategy statement for the redesign of the site, referring to InfoArch, user experience and general look and feel guidelines (you can post the infoarch as PDF or images, your call).
By Friday Apr 18th (next class) - Each student comment on each of the four groups strategy statements, try to be critical and constructive.
F.A.Q:
Can we redesign any site?
No. The site has to be interactive and dynamic - meaning it is based on information that changes regularly, on a daily basis or heavily based on user contribution.
Do we need to redesign the whole site?
No, just a couple of pages, we will decide on that through the assignment, and dependent on the subject of your redesign.
Do we get grades as a team?
Yes and No. You get both a grade as a team but each week will have individual assignments, so slacking will be impossible.
Can you offer some inspiration?
Sure, I’ll give you some non real ones. 37 Signal’s 37Better Project, lays out several redesign ideas with a usability focus. Here’s some imaginary conceptual redesigns of Google search, another one for Craig’s List (which one group already mentioned), and we all remember the Yahoo grid based redesign. Here are some behind the scenes of The NYTimes redesign and the redesign of the Expression Engine site. Some reading about Redesign vs. Realign. Please post some more to del.icio.us.
*I will answer more questions you might have in the comments for this post.
Good luck
Brief: Widget Design Bonanza!
For next week design your widget to the last bit, we will be concluding this assignment the week after and already start our final, so I would like you to get your widget as close to final stage as possible. To do that, you are going to have a two tier assignment next week (claps):
By Tomorrow, March 29th, noon:
- Write comments on your wireframe and first designs posts summing the feedback you got in class. (please write comments, not individual posts so we keep things in context)
- Post at least three more comments to two of your fellow students.
By Tuesday, April 1st, noon:
- Submit a fixed wireframe for your widget based on the feedback you got in class.
- Submit the fixed design for the default state of your widget - i.e. before any user interaction. Again, the design should have a specific size (pixel ration, like 300×250px for ex.) based on the environment it’s in (mobile phone, dashboard, Facebook…). Present the design in context - meaning on a screenshot or an image of the environment it’s designed for.
By Wednesday, April 2nd, noon:
- Post at least 4 comments to your fellow students on the design they posted.
- And drop by to see my § presentation at Dorkbot that night.
By Thursday, April 3rd, 8pm:
- Post a fixed default state + the rest of the design interaction for your widget. (by Friday next week your widget should be ready for pre-final critique).
Enjoy.
Brief: Widgets!
What Are widgets? If you are on OS X, press F12 you’ll see a bunch of them… or check netvibes again, it’s all widgets… or go to Facebook, all these “applications” they are sorts of widgets themselves, Google maps can appear as an ‘embedable widget’ like we used it in our blog, so is the case with embeded video from YouTube and the likes…As far as we are concerned the type of widgets we will be interested in are little self contained applications that provide specific sort of data, interface or functionality. They are built as add-ons to existing environments, whether it is a webpage, a desktop or sometimes a mobile phone.
Your assignment to be uploaded by next week (March 21st) is:
- Come up with an idea for a widget and answer the following questions about it:
- Define your widget in one sentence.
- What is the problem the widget is trying to solve?
- What is the context this widget is built for? (a certain site, iPhone, whatever…)
- Post to the blog screenshot(s) (MAC:command+shift+3, PC:alt+print screen) of the environment(s) you are designing your widget for. If it is intended to fit in more than one type of environment, present multiple screenshots.
- If existing, present up to three examples (screenshots) of other widgets designed for the same environment.
The second part of the assignment is due for our next class, in two weeks (March 28th):
- (late addition:) Choose one of the contexts you would want to work with.
- Along the lines of the previous project build a wireframe (InfoArch) for your widget in its multiple states. Upload the wireframe as a PDF.
- Present a draft for the design of your widget’s default state (the way it would normally look before being interacted with or it’s ‘main page’)
- The draft should appear in context - meaning if it’s an iPhone we want to see the iPhone and we want you to work in the exact pixels dimension of the iPhone screen (google it).
This is a short assignment (3 presentations only).
Tip: It is your opportunity to be very very creative. Surprise us, or even yourselves… 
Here’s some more inspiration for you…
I encourage you to post some of your findings and references to del.icio.us with our class tag ‘catmode’ and maybe also with the tag ‘widget’
See you in class in two weeks and online constantly…
cheers,
Mushon
Final - Local Project (not so soon)
OK,
thank you Renda!
Over the next two weeks we are going to conclude the Local Project. On the class of March 14th you will be giving presentations of your sites in front of your (imaginary) clients (us). Before then, we will have another online deadline for next week, to which you will be presenting all of your pages as a pre-final.
By Sunday - March 2nd:
- Write the feedbacks you got in class as comments to your post.
- Write at least two more feedbacks to other students work.
By Wednesday March 5th:
- Post the changes to the pages you brought to class today to the blog with the feedback you got implemented and with substantial design progress.
By Friday March 7th:
- Post all the remaining pages of your site to the blog
- Write at least 3 final comments to fellow students on their posts
By Wednesday March 12th:
- Implement the final comments and have the pages ready by Wednesday
For March 14th:
- Devote the last two days of the assignment to preparing your presentation.
- PRACTICE! (we will easily see if you haven’t)
- Make sure you’re ready with bullet points you want to talk about concerning the role of the chosen business in it’s local context and the possible impact of the site to the benefit of the business and hopefully the community around it.
Enjoy!
See you in two weeks,
Mushon
* and thank you again, Renda!
2nd Round of Design +
I will not be here the next two weeks and since next week you’ll get a substitute professor (Renda Morton) we’ll have to make sure we impress her!
So it’s going to be a busy week… This assignment has three tiers and I intend to enforce the deadlines on you, so you better move your asses (and make sure we can see that online).
Comments:
Due: Tomorrow, Feb 23rd
Write the feedbacks you got in class as comments to your post. Write at least two more feedbacks to other students work.
2nd Round Design:
Due: Tuesday, Feb 26th
Post the two pages you brought to class today to the blog with the feedback you got implemented and with substantial design progress.
2nd Comments Round:
Due: Thursday, Feb 28th
Comment on at least 3 students works with constructive feedback, referring to their second round design.
3rd Round Design:
Due: 2pm Friday, Feb 29th (don’t post 5 minutes before the beginning of class)
Post designs for 5 of your site pages (the initial two + three more), show us how the grid is used on the new templates. (post the three new templates both clean and with the grid overlay)
* all posts should be posted as png files, not pdf. (please)
I will post your next brief next Friday and through the class that you’ll be missing (on March 7th) I will do my best to make sure you’re not left bored
Brief: Local Practice#2 - Information-Architecture
For next week I would like you to build the information architecture for your site. What this means is a document defining out the structure of the site per page but not yet the presentation. You will present the infoarch in the form of a PDF file presenting each template in your page for its structure. You may present it as a layout but we will not judge the design and the grid but the structural decisions themselves.
This is a very important stage in the development of the site. This is where a lot of creative decisions are being made and when you present it you will be able to imagine the complete navigation of your site. Since it is our first assignment I would like you to limit your structure to not more than 8 pages and not less than 4.
The main thing to keep in mind is the idea of semantic categorization of your structure elements. Meaning, a title can be the title for the site, the title for the page, a subtitle or a title for a sidebar element, you need to specify the type of content and its inheritance. That is the way websites are developed, that is the way the browser reads the website and that is also the way the user understands the content on the page.
I do not want you to use more than two colors + grays for this stage. This document should be readable by you and by your client and by the developer who will be programming the site, but should not look like the website itself, otherwise you might get both your client and yourself confused and block your creative process. Think of it as the bones structure, by looking at the skeleton we can already know a lot about what the body can do and what is connected to what, but not how it would look. We will get to the skin in the following weeks.
Example: For an InfoArch document looking like this (play with the PDF layers to reveal the different pages) the site was designed to look like this (it’s almost done). You may use illustrator to create this document (it is often easier). Sketches on paper are legible as well. For next class please post the PDF for us to review in class.
For any questions please email me. Please do not wait for Tuesday, this is an assignment you’d better start even today as it requires a lot of thought and would affect your whole project.
Next Week’s So Much Fun @ The Internet by: Alexandra Zsigmond
Enjoy.
on 
