Thursday, September 22, 2011

Site Mapping / Home Page Wire Frame

Couple of timely announcements to supplement our Site Mapping Lecture:

Please do your wire frames as 11 X 17 vs 8.5 X 11. These can be B&W and the reason for the larger size is so we can all see them during critique vs. having to use binoculars...

Erin will be emailing several of you and giving you the opportunity to tweak your competitive analysis documents. The tweaks include making sure the screen shots are large enough, have the key-line around them, having the numbers in the right place and just general tightening up so they look fantastic.

Please email me your domain name and address by next week or this will be considered late.

Erin will also be giving a pop quiz in the next couple of weeks so make sure you're doing al the required reading, etc.

-------------

Welcome to the Site Mapping.

This week is all about Information Architecture, Site Mapping, Wireframing and Page Schematics. As we migrate from "Discovery" to "Design", we are learning essential practices, tools and deliverables that are invaluable while also ensuring you have a solid structure and flow to your site prior to applying graphics or "pixel-pushing."


COUPLE OF ANNOUNCEMENTS:

1. Make sure you read all your required reading. There might be a quiz in the next week or two...Erin will be administering the quiz.

2. When you're downloading MindManager to your account/computer in the lab, you're going to need one of the teach guys to type in a password so you can install it. I've spoken with them and they're fine with doing it. You can also download it to your personal computer. You won't need it for more than this one assignment.

Assignment 3:

Create a site map of the current taxonomy for the site you're about to redesign AND a home page paper wireframe/schematic of what you think your revised (home page) structure will end up looking like prior to comping.

For the site map:

Just follow the navigation. Don't worry about mapping promos or other links that live outside the navigation. Only follow this down to quaternary levels. Ensure you differentiate main nav from global/footer nav as well as any pages that go off the site or are orphan pages (pages that live outside the nav).

Take advantage of Mindjet's MindManager 9 30 day trial download. It's fairly new for the Mac platform and pretty intuitive. Don't forget to take the tutorial as well as check out the map gallery. **Also, for our presentation next week, if you're using MindManager, don't forget to save as PDF for projection presentation.

**LASTLY, DON'T PRESENT SOMETHING THAT IS UNREADABLE, SLOPPY OR TOO SMALL. THIS IS A PORTFOLIO PIECE FOR MOST OF YOU, SO PUT THE TIME IN. ** Your site map should be the size it NEEDS to be....more on that later...and in color.

Here's how to tell the actual size you should print this out at:

1. Do your thing in MindManager
2. Export as a PDF
3. Open in Acrobat (not preview)
4. Under "file", select "properties." That will tell you the size of the paper.
5. For most of you, this will be larger than 11X17 so you'll have to submit that PDF to the lab crew for printing


For the wire frame:

Just use gray boxes and simple type to describe what's going to be in that box or section - a rotating flash brand piece, news, updates, etc. ** Your wire frame should be 11 X 17 (Landscape) B&W (no color needed). Use PPT, InDesign or Illustrator to do this. No template provided.

Remember...just think structure & flow, not design.

Print both out and pin up for critique. Ensure both are in PDF format in your folder as well.

Both assignments due NEXT WEEK! Refer to syllabus.

Class Lecture Slides
Wk 2 Required Reading - Site Mapping
Wire Framing PPT - An Example

----------

Some Resources:

Information Architecture: Blueprints for the Web - If you want to learn how to structure and organise websites, then this is the book for you. From data chunking and card sorting to scenarios and task analysis, this book contains everything you ever wanted to know about information architecture for the web, and then some.

The Art and Science of Web Design: When it comes to Web design, style guides are often too boring and predictable to capture the attention of caffeine-riddled Web developers. But not The Art & Science of Web Design; this book strategically equips readers to design sites effectively.

Thursday, September 8, 2011

Erin

Erin Wilkey

email: ewilkey@bu.edu
phone: 401-829-3857 - feel free to text or call with any questions

Wednesday, September 7, 2011

Domain Name and Hosting space is REQUIRED - DUE Sep 22.

Hey guys,


As discussed, I'm going to do things a bit different this year…with our Flash lecture coming up in the near future, it will be great to learn how to host it online so you can start sending people to your very own domain name/site. To prep for this, you have a bit of work to do. I've outlined the steps and a couple of choices below for hosting and domain names. Lets discuss next class.


1. First, you have think up a name to use for your site. This is called a Domain Name. You can go to godaddy.com or register.com and type in a potential name to see if it's available. There are numerous suffix choices - .com, .net, .biz, etc...I only register .com. Call me old fashion. I usually only register ".com" names but if it's not available as a .com, you can use a .net or a .info.


2. Second, if your name is available, you have to purchase it. Prices vary depending on the site you're at. Godaddy is pretty cheap, Register.com is a little more…go for the cheaper site for purchasing your domain name. They're usually between $5-$15/yr for use of a domain name.


3. Once you purchase, you have to have the name hosted somewhere AND have hosting storage for your files and site.…typically, the place where you purchase it will also offer to host the name.


4. You also need to purchase a hosting package for your site as mentioned above. Godaddy, Register and MediaTemple all offer hosting packages. Godaddy is pretty cheap but not sure how good their customer service is…Register and MediaTemple both have reps that answer phones and help people out..


5. Once you purchase a domain name and hosting package (be good to do it all with one provider), they will send you access information for uploading your files, etc…I usually don't use the web based tools for uploading files. I use a free program called Fetch for uploading and downloading files to my hosting space


6. Go and download Fetch for using to access your hosing space and files. They have a trial that you can start out with. We can configure in class if you have issues.


7. Don't get suckered into purchasing any design tools, templates, SEO services or anything else from them….all you want is a domain name and hosting package.


8. Get going on this right away…that way, we can start uploading your Flash files to your domain address and having fun bringing it to life.


9 You won't get much out of this unless you get this in advance…otherwise, you're just going to watch me doing in on the projector and it won't mean anything…


Here's some providers of both domain names and hosting solutions. Many of them have package deals…Just purchase the domain and hosting for a year….


http://www.register.com/index.rcmx


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


http://mediatemple.net/


http://fetchsoftworks.com/


--------

s

Week 1 - Competitive Analysis & Creative Strategy

Welcome to the Class. Following are the assignments, handouts, required reading and templates for the first week. Please contact me with any questions.

Here is a
PDF of the syllabus as well.

Class Lecture Notes
Required Reading - One Process fits all
Required Reading-Analyzing the Competition

NOT REQUIRED BUT GOOD BOOK TO HAVE

Web ReDesign 2.0: Workflow that Works


Assignment 1:

Get your feet wet...pick an industry from the list below and do an analysis of 6 competitive sites within that industry. Once you pick one, you will be playing designer/client and picking one of the six to redesign within our process:

Zoo/Aquarium
Automaker
Museum/Art gallery
Amusement Park/Recreation
Airline
Charity/Fund Raising

“Analysis Criteria”
What’s the mood of the site?
Site aesthetics (visuals)/on brand with messaging?
Any cool features/fuctionality/other?

A real Example
Analysis Illustrator template provided


Always save your assignments in both the native file format (the program you created it in) as well as a PDF or JPG and upload to class folder. Refer to syllabus for details on presenting formats and dates. Also, keep all your screen shots together for your competitive analysis or Illustrator won't be able to find them and open properly.

Assignment #2

Author a creative brief for your newly proposed site. A creative brief is a summary of the overall visual and conceptual goals for the site, identifying the target audience, proposed visual and brand styles as well as any executional considerations.

Weekly reading and
Creative strategy template provided
A real Example

Save in both assignments in both native format and as a PDF and upload to class folder with your last name on the folder. Also, give your files a name that makes sense such as "stevenson_cs.pdf" (for creative strategy) and "stevenson_CompAnaly.pdf" for your competitive analysis...

---------------