In Friday’s class we looked at some examples of structures for websites.

Many websites utilize a grid as an underlying structure. Just as in print design, a grid is a useful way to create an adaptable, well-formed structure for content. Several web developers have come up with grid systems, which provide pre-built frameworks for quickly creating and prototyping grid-based layouts. A good resource for all things grid-related is thegridsystem.org (try clicking the “Show Grid” button at the top of that page). The 960 Grid System is a popular framework, which you can read more about here. Khoi Vinh has also written about developing a grid system on her website subtraction.com.

For some more examples of grid-based sites, check out Typeneu and Space Collective. I used a non-rectangular grid when developing the ACADIA 2007 website for an architectural conference at Dalhousie University.

In Tuesday’s class we took another look at CSS (Cascading Stylesheets), which provides web designers with precise control over the visual style of websites. One thing that makes CSS especially useful is that you can create multiple stylesheets to display your website in different contexts. For example, you might want your website to be formatted differently when viewed on a small cellphone screen, or to include only certain information when it is printed. Instead of creating a whole new version of your website for each of these contexts, you can simply create a stylesheet file designed specifically for each display medium. A List Apart has some good articles about print stylesheets and mobile stylesheets.

I’ve created a print stylesheet for this class website, which you can see here. The usual stylesheet is here. The print stylesheet is designed to only print the content of the site, not the navigational elements, which are not very useful on paper. It also appends the URL after each link, so that the link information is not lost when someone prints something from the site.

There are many advantages to separating a website’s style from its content. For a fantastic example of the power of stylesheets, check out CSS Zen Garden. It’s an interesting project where web designers are invited to redesign the Zen Garden website – but without altering the main website code, just the CSS file. The resulting gallery of redesigns really showcases the power and flexibility of CSS. Check out Under the Sea, Urban, or Pixelisation for some examples of different approaches.

Handzahm was a project by some students of my home university at mannheim, germany…

handzahm first test

ping pong

the blog of the project

http://www.worldometers.info/

This site continually updates with the number of people born, deaths, and all kinds of other info.

Here are some things to consider as your group prepares to present Project 1.

Presentation parameters:

• Aim for about 15 minutes (per group).
• Everyone in your group should participate in the presentation.
• The digital projector will be available, though you are welcome to present non-digital materials as well.
• Be organized! Put all your group’s files on one computer before you start. If there are websites you plan to show, have the URLs easily accessible so you don’t have to search for them.
• There will be time for questions and comments after each presentation. You should participate in other presentations by paying attention, asking questions, and offering constructive criticism.

Each group should submit:

• Final designs (you can submit digital or paper files).
• Documentation of research (field notes, sketches, source materials or inspirations, concept notes, and other information gathered or generated during the design process). Please make it clear which materials are part of the final design and which are research.
• A final written rationale — you can think of this as a follow-up to your design brief. Explain what your group did, and why, with details about the research and design process. This should be a well-formatted academic document (point form is not appropriate).

Suggested topics to cover during your presentation:

• The community or issue your group chose to address: what did you work on, and why is is interesting?
• Your project’s target audience or market, and how your design addresses their expectations and requirements.
• Your group’s working process: how you organized yourselves, examples of your research.
• Challenges you encountered, and how your project has evolved over the past few weeks.
• The forms or structures your designs have taken, and why they are appropriate for your project.
• The content of your work.
• How the project could be expanded or further developed.

One Laptop Per Child is an ambitious project which aims to “create educational opportunities for the world’s poorest children by providing technology & connectivity for self-empowered learning.” A large part of the success of the project has been the innovative design of the XO Laptop and the Sugar user interface (here’s a gallery of screenshots). Among the technological innovations in the XO laptop are the use of flash memory (less volatile than a traditional hard drive), an open source operating system (Linux), and mobile ad-hoc networking. The Sugar user interface was designed to engage children in hands-on learning, with its highly visual interface and collaborative applications.

The inexpensive, web-focussed design of the XO laptop led to surprising demand for the machines in the developed world, leading to the Give One, Get One campaign, and inadvertently sparking the development of netbooks.

While the project has had its share of troubles and criticism, it has also met with considerable success, and is currently developing a new incarnation of the XO laptop, called XO-2.

In class, we watched the TED talk by Yves Behar, who has worked on OLPC as well as other innovative design projects such as the Jawbone bluetooth headset and Y Water.

Graffiti Research Lab is “dedicated to outfitting graffiti writers, artists and protesters with open source technologies for urban communication.” With this group in mind, they have developed a series of experimental tools which fuse innovative technology with graffiti methods and aesthetics. In class, we looked at LED Throwies, Night Writer, and L.A.S.E.R. Tag.

As part of their open source mandate, Graffiti Research Lab makes instructions available for each of their projects – here are the instructions for LED Throwies. Think about how the accessible instructions, mostly inexpensive components, and innovative, disruptive nature of these projects appeal to GRL’s audience of graffiti writers, artists and protesters.

In today’s class we looked at some examples of interaction design for specific communities. Think about how each of these projects are designed with a certain audience in mind. How can you approach your group’s project in a similar way?

The Reactable is an innovative musical instrument – here’s a video demonstrating how it works. Designed for professional musicians as well as casual players, it is an example of a tangible user interface. The Reactable’s table-like form encourages collaboration, while its components resemble building blocks, helping to make the interface intuitive and unintimidating. Kids are especially engaged by the Reactable, and it was a hugely popular exhibit in the Montreal Science Centre, where I first encountered it. Bjork recently incorporated a Reactable into her Volta tour.

For another example of a tangible user interface, check out Siftables.

Jonathan Harris believes that “the Internet is becoming a planetary meta-organism”. His work combines storytelling and art with innovative interface design. Projects such as We Feel Fine and The Whale Hunt provide users with the opportunity to explore vast collections of data, discovering stories by playing with visualization tools and options. You can see more of Harris’s projects on his website, number27.org.

Harris describes a few of his projects in his TED talk, including lots of details about his research and storytelling methods. His breakdown of the various elements of The Whale Hunt interface is also interesting.

Today’s class included an introduction to HTML and CSS code. HTML (Hypertext Markup Language) is the computer code that web pages are written with, while CSS (Cascading Style Sheets) separates your site’s style information from your content, making it easier to manage large sites. Understanding how HTML and CSS work is essential for anyone who designs websites. Even if you prefer to use WYSIWYG software such as Dreamweaver, or work with someone else who writes code based on your designs, knowing HTML and CSS will greatly contribute to your understanding of how a well-designed website is built. If you want a refresher of the presentation I did in class, there is a great tutorial from css-tricks.com that covers most of the same material.

When writing code, be sure to use a plain-text editor such as TextEdit for Mac, or Notepad for Windows. Rich text editors such as Word are not used for writing code. Of course, there are plenty of programs out there that are intended specifically for writing code, which provide more features such as syntax highlighting and file management. Try Smultron or TextWrangler for Mac, or Aedix Suite for Windows. Some of these programs are no longer updated by their authors, but they are still available to download.

If you would like to learn more about HTML and CSS, YourHTMLSource is a great place to start. The tutorials at Tizag and W3Schools are also very useful.

Students who are not native to Halifax are not aware of the shopping experience that Halifax Regional Municipality has to offer. ShopHalifax.ca will give students an opportunity to discover new and alternative places to shop.

The Halifax Metro Transit system is confusing to all members of the public to some degree. This includes the current residents of the city, new residents, and tourists who all may not be too familiar with the bus system and how it works. We plan to modernize, streamline, and improve/add to the Halifax Metro Transit services provided to the residents and guests of the city.

Our project will consist of designing and promoting an event to raise awareness for bike culture and environmentalism within the Halifax area. The event will be in the same style as the Bicycle Music Festival in San Francisco. We’ll be creating some promotional materials for the event and designing a web site.

Improve the user experience for metro transit users via design/redesign of online transit planner/website/mobile app

While we’re on the subject of paper prototyping, I thought you might enjoy the In Plain English series of educational videos. For example, try Computer Hardware, Computer Software, or Twitter In Plain English. They’re produced by a company called Common Craft. Here’s a time lapse of the making of the Computer Hardware video.

During Friday’s class we looked at paper prototyping, a way of experimenting with designs for interactive interfaces using paper instead of digital tools. Paper prototyping is useful because it can be done quickly and inexpensively, and is easily accessible to designers who have less experience writing code. A paper prototype can also be a great tool for conducting usability tests and getting feedback about website navigation and structure. Digital prototyping tools such as OmniGraffle are also available, but paper prototyping can encourage a more spontaneous, collaborative, “thinking outside the box” process that is hard to achieve on a computer screen.

A List Apart is an excellent resource for any web designer, and has a great article about Paper Prototyping. User Interface Engineering is another website with Paper Prototyping Tips.

Jan Chipchase travels the world researching mobile technology user experience for Nokia. For the past four years, he’s been posting notes and photos from his field research on his personal blog, Future Perfect. Here are a few sample entries: Hanami Camera Phone Watching, Notifications, The Freshness of Contact Information, Urban Interactions, The Etiquette of Spaces. Check out his TED talk: Jan Chipchase on our mobile phones.

The Canadian Design Resource blog is an ongoing gallery with hundreds of examples of products, logos, posters, clothing, architecture, and other materials designed by Canadians. A few of my favourites: The Canadian Press logo, Expo ‘67 Pavilion Postcards, Apollo 861 Stereo, French/English Market Sign.