briefs
brief: Let’s start designing!
Due: September 3rd
Now that you’ve learned a bit about grid based design you’re going to build your first grid:
- Go over the Grids Are Good pdf again.
- Choose two pages from your site structure - the main page and one of the internal pages.
- Build a grid that is flexible enough to accommodate both (you can use the grid calculator here as a tool)
- Design both pages in Photoshop using the grid layout.
- Use either real text for what requires it. Remember words are important tools for interaction, use them carefully.
- In some cases it does make sense to use dummy text but never something like:
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.
As you can see it creates a pattern that doesn’t serve as a text block representation. Some Lorem Ipsum tools here and here. - Post to the class blog 4 PNG images - 2 of each page. One with the design “as is” and the other with the grid layout viewable on top of the design (like this)
Obviously the design should represent the look and feel you choose for your site. You should build hierarchy and consistency between the pages and make sure the design communicates the content and makes for an interesting and friendly browsing experience. Here is a little something for inspiration.
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.
Brief: So Much Fun @ The Internet
From week #3 we will also start a series of presentations under the title “So Much Fun @ The Internet” in which you guys will be presenting to class a specific topic in online culture, it can be an interesting website, a phenomenon, an online game you’re playing, your dating site, your grandma’s blog or whatever. Each such presentation will take 15 mins + 5 mins for Q&A. These presentations will be obviously accompanied by a post on our blog, which will include the key ideas, some links and the opportunity to all of us to continue the discussion after class in the comments column.
In the coming week, please send me the topics for your presentations, so we I might help you with your research and give you some tips. The order of presentations would be:
Feb 8th - Alec Timerman
Feb 15th - Alexandra Zsigmond
Feb 22nd - Anuranjan Pegu
Feb 29th - Ariel Lapidus
March 7th - Justin Jones
March 14th - Khurram Bajwa
March 28th -Lady Tanmantiong
March 28th - Lan
April 4th - Leonie
April 11th - Liam Thidemann
April 18th - Yoko Ishibashi
Brief#2: Local Practice
Due: Week#3 Feb 8th.
Final presentation due: March 3rd
For your second assignment you will be designing a website for a local business in your neighborhood. We will be taking this one step at a time so no need to feel too intimidated at this point. The first step will be as follows:
- Choose the your client (you would miss the days of getting the chance to choose your clients…)
- The clients have to have their business located not more than 8 blocks away from your home.
- The client must be an independent business (no Macdonald’s or Urban Outfitters allowed).
- The client must not have an existing website or has one which is bad enough that you can make a case for it being the same as not having one at all (or worse).
- If you’re not sure if your choice is Kosher, email me…
- Make a research on the client. What is their product/service? What is their client base? What is special about them? How do they present themselves? Do they have a distinct graphic identity? How do they run their business? How many workers? Is it a family owned/run business? Why did you choose this business?
- Make a Google Map of your neighborhood and mark your apartment location and your client’s business location. Embed it in a blog post by copying the embed tag from Google Maps and pasting it in a post while in ‘code’ mode (rather than the default ‘visual’).
- Make a concept post to be presented in class through a post with multiple items on the blog. The Concept post can include images, things you collected, ideas, sounds, videos, links, quotes, references and whatever you might be able to collect and present to the class to tell us exactly why you chose what you chose and what is it about it that you would want to communicate in this process.
Brief#1: The 10,000px Trap
Due: Week #2 - Feb 1st.
- Register to the blog (through the register button above). I will add you to the authors list and you can post on the blog.
- Watch The Trap - the Adam Curtis / BBC’s 3 episode documentary about the ideas of freedom, control, ideology, game theory, technology… (if for some reason these videos become unavailable, you can download them from my server)
- As you can see this is a pretty dense series, try to pick one issue that appealed to you, made you angry, confused you, or just stood out as something you kept thinking about long after you finished watching. Design a short review about it (this can also be free musing). The review, should be handed as a digital image with an overall size of 10,000 pixels. This means this can a 100×100 pixels proportion, 125×80px (landscape or portrait), 200×50, 25×400 and so on. You decide. The image should then be saved as
a high quality JPG filein a file format of your choosing, and uploaded to the blog. - Post two examples of ‘good interface’. One should be digital, the other, not. Write what makes you define it as a good interface.
If you have any questions, do not hesitate to e-mail me at mushon [at] shual [.] com or even better, write a comment to this blog post so I can answer you online to the benefit of all the other students.Good luck, and see you on Wednesday.
on 
