Now that you’ve seen through a couple of projects, you should have a pretty good idea of what the process is and what it takes to get through it. So for the final project, I want you all to decide what your schedule is going to be. For next class, I want you to put together a Production Schedule. From now on, you are going to present your progress each week in class, following the schedule you have set for yourself. Remember the steps in the Web development process, I’ll expect you all to fully explore each phase:
Discovery
Definition
Design
Development
Deployment
Presentation Groups
From now on, half the class will present their project progress on Tuesdays and half on Thursdays. We’ll draw lots today to see who will be in which group going forward.
If you haven’t already, visit a museum that you have never been to, paying particular attention to the exhibit design. Post about your experience at the museum on your blog, and comment on any inspiration you found for your own projects. If at all possible, include pictures!
We are not going to have class this Thursday to give you time to do your museum visit
Be prepared to present next week according to your production schedule. Everyone is required to present something.
an institution devoted to the procurement, care, study, and display of objects of lasting interest or value; also: a place where objects are exhibited
With that definition in mind, craft a virtual museum with the following criteria
Choose a theme that represents your personal interests or style, something that you are passionate about, even obsessed by
The museum’s “collection” should compiled by you from real world subject matter that you have access to. You should not just pull from online sources, and ideally you will do your own photography.
The museum will take the form of an HTML/CSS Web site. The HTML must validate, and render consistently across target browsers.
Your design should use JavaScript / Jquery to display the collection in a creative and inventive manner. Create an interactive experience that engages the user in the subject matter and supports your thesis of why it is interesting and important.
Homework
By Tuesday, create a Project Brief for your museum, and post it to your blog. Be prepared to discuss it in class.
Include the following:
Name of the museum
Description of the collection
Explanation of why the collection is of “lasting interest or value”
There are some Illustrator templates out there (for iPhone in particular) that can help you get started on your designs. Here’s a few!
Homework
1. User Testing your prototype: Create 3 tasks for your users to perform with your prototype. Then test those tasks with 3-4 people. Note where they have problems or questions. Revise your prototype to address the issues that come up.
2.Create Design Comps for your prototype: Create interface design for each screen of your App. Keep in mind the interface conventions for your platform. There are design templates for the iPhone and IPad out there that will save you creating elements from scratch. You want your designs to be as close to the actual experience of an App on that platform as possible. The number of screens you need to design will vary depending on the needs of your app, but should be around 5-7.
Cheap, uses materials you may already have sitting around
Allows for user testing earlier in the development process and more often
I think also, it allows you to be more creative and experimental because you are free to make the paper do want you want it to, without worrying about the technical feats required to pull it off.
Ok, I’m convinced, how do I do it?
Get out the craft and office supplies! Poster board, matte board, foam core, graph paper, index cards, post-its, repositionable glue sticks (these are the best!) stickers, correction tape, markers, crayons, scissors, all useful for making the prototypes. Be creative in what you use, unexpected materials can stand in for digital interfaces. Here’s some general guidelines:
Be clear and thorough. This isn’t a test of your drawing skill, but text should be readable and you should make clickable or other active elements obvious and inviting.
Make the prototype a little bigger than actual size. This makes it easier for the user to find things and for you to see what they do
Use printed text if you have messy writing or a lot of copy. It’s also ok to use screenshots or computer created print outs of interface elements, but you may find that doing it by hand is quicker and actually translates better
The reading this week has a lot of great specific suggestions for how to make your paper prototypes, we’re also going to look at a few videos:
Chapter 4 – Paper Prototyping: The Fast and Easy Way to Define and Refine User Interfaces by Carolyn Snyder (it’s in the Books 24×7 library, through Library tab on My New School)
Homework
On your blog, post the following:
The Name of Your App
What Platform it is for (iPhone, iPad, both)
Who is it for?
Why do they need it?
How will it work?
Make a paper prototype of your concept and post a few photos of that on your blog too
Bring the paper prototype to class on Thursday and be prepared to demo it for the class.
Search Engine Optimization and Marketing your new site
There are a lot of companies out there that sell “Search Engine Optimization” (or SEO) services to help you increase your rankings in search engines. I have no doubt that they get results, but it seems like their main business is to try and “game” the search engines, to trick them into thinking the site is more important or relevant than it actually is. And the search engines are constantly changing their methods to try and defeat the SEO companies and make their results more accurate and relevant.
Instead of playing into this cold war, the better practice for Web designers is to build their sites in such a way that they have organic SEO. There are a few simple principles to doing this:
Use the <title> tag. This is what search engines use as the hyperlinked “name” of your site.
Use meta tags – description and keywords. The description will show up in the search results, the keywords help to contextualize it, although abuse of the keyword meta tag has reduced it’s usefulness
Put title attributes in your links
Use semantic markup – Make the site logo / title an H1, subtitles H2 (this is going to change a bit in HTML5)
Avoid the use of an image where live text will do, or use the image replacement technique.
Designing for accessibility is designing for SEO, as told in this ALA article
Once your site is ready for primetime, market it by:
Submitting it to search engines
Getting other, related sites to link to it
Promoting it on Facebook and other Social Media networks
Prototype Project
Our next big project will be to prototype an iPhone or iPad application. This time we are going to do a quick turnaround, just two weeks. We’ll be doing a paper prototype (we’ll talk about what that is next time) and design comps, but no building for this project.
By Tuesday, I would like you to come up with three concepts for your prototype. We’ll discuss these ideas next week. The ideas should represent an application that doesn’t currently exist, or a great improvement on what does. In addition, I’d like you to design an application that has some kind of “social good” aspect. Here’s some inspiration:
Be creative! These are individual projects, so now is your chance to really shine. Choose something that you yourself would use on a daily basis, something that you see a real need for.
Homework
Complete the Collaborative Project Post-mortem
Write a short (1 paragraph) description of each of your prototype concepts, and post it to YOUR blog. Be ready to discuss them at the next class.
If you haven’t already, change the theme of your WordPress blog to something that reflects your personal style. Then, further customize theme by changing the CSS and installing at least one plugin that you think is useful or cool. Post the link to the them you chose on your blog so we can see what you started with.
Download this form and fill it out as you are testing. Once you are finished put it in the designated folder in the Dropbox.
Redesign Project Presentations
You will be presenting your midterms next Tuesday (this is a change from the calendar)
Here are guidelines for the Collaborative Redesign presentations.
Each person in the group should take a portion of the presentation. Everyone is required to speak.
The presentations should take around 15 minutes, with 10 minutes afterwards for critiques
Come to class early so you can load any files onto the classroom computer that you need and make sure your links are working
The presentation should include:
A quick walkthrough of the site that you are redesigning
The strengths and weaknesses of the current site
A quick overview of the sites that you used for competitive analysis, and their strengths and weaknesses
A breakdown of the target audiences of the site
The main findings (a few bullet points) from your user surveys
A summary of your objectives for the redesign
A walk-through of the redesigned pages. Your pages should be fully coded HTML and include all the links that you need to click through all the pages. You should not need to open multiple windows or type in multiple URLs.
Today we’re going to review your homepage HTML/CSS and discuss strategies for completing your site.
Homework
Build the HTML/CSS for the rest of the pages of your site, post it all, link to it from your blogs. Next Tuesday we will test each other’s sites in class.
