The Mozilla Firefox logo.

In Tuesday’s class we looked at some web-based tools that you might find useful as you develop your web portfolio, or for future web design projects.

Firefox is a great web browser, and an indispensable tool for any web designer. Firefox is open source, and contains useful features such as the Error Console. It also complies with the standards developed by the World Wide Web Consortium (W3C), which helps you develop websites that are accessible and more likely to work in future web browsers. Firefox also allows you to install many useful plugins. An excellent plugin for web designers is the Web Developer Toolbar, which has tons of useful features. If you are working with Javascript, Firebug can also be helpful.

Validating your code is a good way to find any errors. You can validate your HTML code using the Web Developer Toolbar, or visit the W3C HTML Validation Service. There are also validators for CSS, Javascript, and web feeds.

Browsershots can be a useful tool for previewing your website in various browsers, though it is often very slow.

Working with fonts on the web can be tricky; tools such as Typetester and Font Browser can make things easier.

Favicons are the small icons that appear in the address bar, on tabs, and next to bookmarks in your web browser. You can make favicons using web-based tools such as Favicon From Pics. Background tile drawing tools such as BgMaker or BgPatterns can also be fun to experiment with. Adobe’s Kuler helps you choose colour schemes.

Once your site is up and running, services such as Google Analytics or Statcounter are useful ways to keep track of how many hits your site is getting, and how people are finding out about your website.

We also took a brief look at some tools that are useful for working with others, such as Pastebin (a “collaborative debugging tool” for sharing code snippets), Dropbox (for sharing project files), and Basecamp (for project management – this one isn’t free, though).

I’ve put together three different portfolio website templates that you can use to get started on Project 4:

• Long Portfolio – a column of large images on one page.
• Lightbox Portfolio – clicking the large thumbnails pops up a larger image. This uses Slimbox 2.
• Sidebar Portfolio – clicking the small thumbnails in the sidebar switches the main image.

Each website template consists of three files:

• index.html – this HTML file contains the content of the site (text, images, and overall structure)
• style.css – this CSS file contains information about the visual style of the site.
• scripts.js – this Javascript file contains scripts that add extra interaction. It is only really used in the Sidebar portfolio, to switch the image when a thumbnail is clicked.

Each website also has a folder called “images”, which contains some sample images. The Lightbox portfolio contains two other folders, as it uses jQuery and Slimbox 2 (a pop-up image script).

Working with the template files

We’ll take a look at each of the templates in class, and I’ll distribute the files so you can work with them. You can edit HTML and CSS files in a plain-text editor such as TextEdit (on Mac) or Notepad (on Windows). See my post about HTML and CSS for more about editing code.

Here is a list of some ways that you can customize the templates. I’ve included links to w3schools.com, a great website for learning more about HTML and CSS.

• To get started, open the HTML and CSS files and take a look at the code. Try editing text such as the title, tagline, and contact information in the HTML file.
• You can control the visual style of the site by editing the CSS file. For example, you can change the colour of the background, or use an image as a background. Each area of the site can have its own background.
• If you haven’t worked with HTML before, you will find working with colour codes a little odd. Here is a helpful page about HTML colour codes, including a colour picker.
• You can change the font used on the website, but keep in mind that only certain fonts work on the web. Here is a list of common web safe font combinations. If you want to use a different font, you can use images instead of text for the title, tagline, or other textual elements.
• You can also adjust font size. If you aren’t familiar with units of measurement such as px and em, here is a guide to CSS units.
• For more text adjustments, try changing the font colour, alignment, or other properties.
• To add your own slides, create JPG images and put them in the “images” folder. Then edit the HTML file img tags to point to your new images instead of the sample image. For the Lightbox and Sidebar portfolios, you will also have to create thumbnail images. Your images don’t all have to be the same size, although the templates are designed for slides that are 750 pixels wide. Your thumbnail images don’t have to be square. You can also change the image borders.
• You can change the width of the page, or of parts of the page. You can change how elements are positioned, control the spacing around elements using margin and padding, change the order of elements, and otherwise adjust the layout.
• For more ways you can use CSS to adjust the presentation of the website, here’s a CSS reference list.

Remember, you don’t have to use these template files at all – feel free to develop your own website from scratch if you’ve done it before, or are feeling adventurous. We’ll have time in class for troubleshooting and asking questions.

The portfolio of web designer Brian Murchison.

In today’s class we looked at some examples of portfolio websites:

• Jason Reed Web Design
• David Loop
• Shannon Moeller
• Jesse Willmon
• Toby Powell
• Brian Murchison Web Design
• Henry Jones
• Things That Are Brown
• Digital Mash (Rob Morris)
• the things we make
• Jamie Gregory
• Marius Roosendaal

Here are some more galleries of portfolio sites:

• Smashing Magazine: 50 Beautiful And Creative Portfolio Designs
• DesignM.ag: 50 Excellent Designer Portfolio Sites
• Graphic Design Blog: 38 Impressive Graphic Designer Portfolios
• Graphic Fetish: 33 Viciously Cool Graphic Designer Portfolios
• Folio Focus

We’ve been talking about Wordpress a lot in class. Here is an overview of it for your reference.

What is Wordpress? Why should I use it?

Wordpress is a content management system, which means that you can use it to build websites that are very easy to update. It is open source, so it’s free to use and is maintained by an active community of users. It is built with PHP (a web development language) and MySQL (a database system). Wordpress is designed to build blogs, but it can be customized to create more complex websites by editing PHP code. Even if you don’t know how to edit code, you can still work with Wordpress by using themes and plugins that others have developed.

The main advantage of building a website with Wordpress is that it provides a user-friendly interface that anyone can use to update the site. You can see an example of the Wordpress administrative interface by logging into this class website and visiting the Dashboard.

Wordpress.org is where you can download Wordpress and find out more about it. Don’t confuse it with Wordpress.com, which is a free blog hosting service (similar to Blogger or Livejournal). If you just want to set up a blog, Wordpress.com is an easy way to get started using Wordpress. If you are building a more professional website or want to customize Wordpress, you want Wordpress.org.

Installing Wordpress

Installing Wordpress can fairly complex, because it needs to be installed on a web server. If you already have a website, you can install Wordpress on your website’s server (with some web hosting companies, this can be done easily through your website’s control panel). However, if you plan to customize Wordpress, you will want to install it on your computer, so that you can test your code locally. To install Wordpress locally, you first have to install a web development platform. Wordpress is designed to work with LAMP, which is an open source web development platform consisting of Linux, Apache, MySQL, and PHP. If you aren’t using Linux, then you’ll want to install MAMP (for Macs) or WAMP (for Windows).

See the Wordpress website for more details about Installing Wordpress. I would be happy to help you with this in class – it can be tricky, especially if you haven’t done it before.

Themes control the visual design of your website

Websites built with Wordpress do not all look the same. Wordpress allows you to easily change the visual design of your website using Themes. You can download many excellent themes for free from the Wordpress website, or purchase themes from theme developers. If you are familiar with HTML, CSS and PHP, you can design your own theme.

Plugins extend what Wordpress can do

Wordpress includes basic features associated with blogs. For example, you can publish blog posts, allow visitors to comment on blog posts, organize posts using categories and tags, search post archives, create pages such as an About page, and so on. If you need additional features, you can extend Wordpress’s functionality by installing Plugins. For example, you could install a plugin to add your Twitter feed to your website, or connect your site to your Etsy store, or allow you to add podcasts.

Posts, Pages, and other content

Wordpress works with two main types of content: Posts and Pages. Posts can be any kind of content which is updated often, such as blog posts or news items – new posts appear at the top of the website, replacing old posts. Pages are used for permanent areas of the website that are always accessible, such as an About page. Your Wordpress theme defines how Posts and Pages are presented on your website, and how the website is navigated. Wordpress also allows you to manage other kinds of content, such as media files, links, and comments, and organize your posts and pages using categories and tags.

Getting Started

When you first install Wordpress and log in, you will see a page called the Dashboard. This is a hub where you can easily access the various Wordpress administration panels. From here, you can add or edit blog posts or pages, upload media files, manage links or comments, install new themes or plugins, and adjust various Wordpress settings.

If you are working with Wordpress for the first time, take a look at the Wordpress Settings to get an idea of the control you have over how your website works. From there, you should spend some time exploring the Wordpress Codex, which is the online documentation about how Wordpress works and what you can do with it. A good place to get started is New to Wordpress – Where to Start.

If you need help on something specific, try searching the Wordpress Codex. If you can’t find what you are looking for, sometimes searching Google is more effective. You can also search the Wordpress Support Forums, or sign up to ask a question. If you’d like to learn to build your own Wordpress theme, you can get started at Theme Development.

If you haven’t worked with a content management system before, Wordpress can be a little overwhelming at first, just like any new technology. However, once you get a sense of how it works and what it can do, you’ll find Wordpress to be an incredibly rich and useful platform for developing websites, and you’ll be surprised how quickly you can learn to do a lot of different things with it. Don’t hesitate to ask in class or e-mail me if you need help!

Augmented reality is the merging of live video with computer-generated data. You might think of watching sports on TV as a simple version of augmented reality, with information such as the current score overlaying live video of the game. However, when used on mobile devices such as cellphones or head-mounted displays, augmented reality can display location-sensitive information in a very powerful way. For example, a tourist could use an augmented reality device to display up-to-date information about the nearest subway station or restaurant over a live view of the city street before them. As the user moves the device around, the information displayed changes according to their location and orientation.

With the increasingly widespread use of devices such as iPhones, which are capable of displaying live video while also connected to GPS and the web, developers are quickly finding ways to deploy augmented reality technology to consumers. There are already numerous augmented reality applications available for the iPhone, such as Wikitude (video 1, video 2), Metro Paris, Layar Reality Browser, and Car Finder.

A screenshot from the Metro Paris iPhone app.

Augmented reality has great potential not only for wayfinding and tourism, but for astronomy, architectural studies, entertainment and gaming, and translation. Imagine an augmented reality walking tour of a city, which might overlay live video of a city block with 3D models of historical buildings which no longer exist. Augmented reality games might involve players locating virtual rewards hidden in a real-world urban space. Of course, developers are especially interested in augmented reality’s potential for advertising – check out Nokia’s Point-and-Find for one vision of how this type of technology might be presented to consumers.

Crowdsourcing refers to the “outsourcing” of work to a community of people. With the huge growth of social networks and user-generated content over the past several years, companies are increasingly striving to find ways to monetize these powerful networks of users. One way to do this is to sell focussed advertising, but another way is to have web communities create content that has value.

Take a look at websites such as CrowdSpring and 99Designs. These websites strive to build communities of designers, who compete for design jobs posted on the site by interested clients. For instance, a small business might post a logo competition, get 100 possible logos submitted by designers around the world, and pick the one they like best. The winning designer gets paid, but the other 99% are not compensated for their time and effort in any way. This is called working on “spec”, or speculation, as each designer is working without a contract and without any guarantee of compensation. Spec work is controversial, as many professional designers consider it harmful to the design industry as a whole. Have a look at the NO!SPEC campaign website for more information about why spec work can be bad for both designers and clients.

Other websites make use of community-generated content in ways that are more fair to the designers involved. Threadless is an ongoing T-shirt design competition, where users vote on submitted designs. The most popular are printed and sold on the website, for which the designer is paid well. Social Designer works in a similar way, but proceeds from sales are donated to a charity of the designers’ choice.

Some other interesting examples of crowdsourcing are iStockPhoto, where photographers and designers can submit material to a large database where it can be purchased by others; Galaxy Zoo, which allows volunteers to help categorize galaxies; and reCAPTCHA, which helps to digitize old manuscripts while also providing a system for authenticating web users.

One of the best examples of the power of crowdsourcing is Amazon Mechanical Turk, which allows users to complete Human Intelligence Tasks, or HITS – brief, often repetitive tasks that people can do much more quickly than computers. For instance, a user might be asked to categorize a website, or write a brief review of a product or service. Users of the site are paid for completing these small tasks, which might take between 5 seconds and 10 minutes, and developers are able to harness the power of this network to create more useful software or web applications. Mechanical Turk has also been used by artists such as Aaron Koblin, who paid 10000 anonymous workers 2 cents each to “draw a sheep facing left” for his project The Sheep Market.

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

Presentation parameters:

• Aim for about 15 minutes (per group). Everyone in your group should participate.
• The presentation doesn’t have to be strictly formal – be imaginative! I thought the theatrical quality of some of the Pecha Kucha presentations was engaging and effective.
• The digital projector will be available, though printed and prototyped materials can be a great way to present your concepts as well.
• Participate in other presentations by paying attention, asking questions, and offering constructive criticism. There will be time for questions and comments after each presentation – make use of it!

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:

• How does your project reflect how technology is changing?
• How does your project reflect how the role of designers is changing?
• What audience or community is your project designed for? How does your design address their unique 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 could the project be expanded or further developed?

Creative Commons is a non-profit organization and movement dedicated to expanding the range of creative works available for people to legally share and build upon. Creative Commons licenses allow creators to communicate how they want to allow their work to be used by others. Before Creative Commons, there was no easy way to specify how a creative work could be used by others, other than “All rights reserved” (copyrighted) or “No rights reserved” (public domain). Creative Commons allows creative people the flexibility of “Some rights reserved” licenses.

The Creative Commons website, creativecommons.org, offers plenty of useful information about the Creative Commons project, including numerous introductory videos. If you are interested in using a Creative Commons license for your own work, be sure to read Meet the Licenses and Before Licensing.

The Creative Commons icon

Here are some examples of people and organizations making use of Creative Commons:

• Wikipedia (free encyclopedia)
• Stephan Schulz (artist and NSCAD MFA graduate)
• DJ Spooky (experimental electronic and hip-hop musician)
• MIT OpenCourseware (free course materials)
• ccMixter (music remixing)
• OpenStreetMap (collaborative cartography)
• XKCD (a webcomic)
• Other notable users of Creative Commons

Open source is an approach to design and development that embraces open access to source material and free distribution of results. Open source began as an approach to software development. Although many of the most well-known open source projects are software packages, the open source movement has been adopted by other creative people and organizations – see open design, open source games, or OpenCola. Open source software is often contrasted with proprietary software, which is usually not free and whose creators keep the source code private.

Access to source code means that anyone interested in an open source project can contribute, whether by actually modifying the software, producing project documentation or promotional materials, or helping other users. Open source projects are usually developed by a community of users over a long period of time. See Code Swarm for a great visualization of the history of several open source projects.

A screenshot from Ubuntu Linux.

Here are some examples of particularly successful open source software projects:

• Linux (operating system)
• Firefox (web browser)
• OpenOffice.org (office suite)
• GIMP (raster image editor)
• Inkscape (vector image editor)
• Audacity (audio editor)
• Python (programming language)
• Wordpress (content management system – I built this website with it.)

If you’re using a Mac, Open Source Mac is a great list of useful open source software. Many open source projects have a presence on SourceForge.net.

 As technology develops we increasingly want to combine these new devices to simplify our lives while now compromising on the most current features. We will conceptualize the future of portable technology with a snap band design that will include the function of your laptop, smartphone, television, wallet, keychain, identification, projector, and camera. The future of an all inclusive wrist band that is the remote for your life.

Currently, there is not a website dedicated to capturing the passage of time and compiling it into video format. Projects such as the HRM Canada Games Centre and The Longest Way video are small one-time-only projects that act as perfect examples of what you would find on our proposed solution.

We are creating a site to allow users to create their own picture a day style presentation/video. We will be designing a user-friendly, simplistic, but captivating interface which will allow users to easily upload photos to use for this project. The site will allow them to edit, delete, rate and add favorites to their profile. Also, users will be able to submit images to a monthly theme provided by the site administrators or create themes of their own length and subject matter.

Normal Newspapers disappear more and more from the paper market since its cost for paper production is tremendous. E-(Newspaper-)Readers become more and more a part of the future. But they are still in process of developing and improving. Even if there are already some efforts in developing and designing an user interface for the E-newspapers, there is still no really satisfying solution. Therefore we will design our own user interface for an E-(Newspaper-)Reader.

Halifax has developed a Public Art Policy that consists of an inventory of all the Public Art works in the city. We aim to develop a website that organizes this inventory in an easy to understand interface for the public as well as tourists coming to Halifax. The website will include things like, general info, current projects, an interactive map, etc. We would also like to translate this information into a pamphlet or guide to be available at shops and businesses around the city.

Jesse James Garrett is an experience designer who has written extensively about experience design and information architecture. His book The Elements of User Experience began as a diagram which Garrett came up with to visually explain user experience development and the vocabulary involved. The five planes of the diagram also represent different stages in the development process: Strategy, Scope, Structure, Skeleton, and Surface. Keep this process in mind as you work on your research and concepts for Project 2.

You can read more on Garrett’s website for The Elements of User Experience, where the Introduction and Chapter 2 of the book are available as PDFs. The short excerpt I handed out in class was from Chapter 2.

Garrett is a co-founder of Adaptive Path, a user experience design firm. The Adaptive Path website has some great articles, such as Designing Fun: Games Design Lessons for User Experience.

Design and the Elastic Mind exhibition catalogue.

In last Friday’s class we discussed the “All Together Now!” article by Paola Antonelli, curator of the Design and the Elastic Mind exhibition at the Museum of Modern Art in New York. Design and the Elastic Mind collects the work of many designers and scientists who are working together to turn cutting-edge technology into things we can use. Antonelli says, “I’m hoping that this particular exhibition will be able to trace a new portrait of where design is going, which is always, hopefully, a portrait a few years in advance of where the world is going.”

Many of the projects in the exhibition, such as We Feel Fine, Social Tele-presence, Accessories for Lonely Men, One Laptop Per Child, and Digital Remains, explore how new technologies can both connect and disconnect us, and challenge our experiences of community, privacy, and the role of the designer.

Check out Paola Antonelli’s great TED talks: Paola Antonelli previews “Design and the Elastic Mind”, and Paola Antonelli treats design as art.

http://www.telegraph.co.uk/technology/6125914/How-20-popular-websites-looked-when-they-launched.html

hi, just wanted to add this. it is just about some nice flash websites… have fun while visiting them^^

http://www.dontclick.it/

http://www.smashingmagazine.com/2009/06/07/50-beautiful-flash-websites/

4 Days logo

4days.ca is the website for 4 Days of Thinking Forward Halifax, an “unconference” of “community conversations on the power of design to reshape economies, improve public services and enhance our quality of life.” It’s organized by Breakhouse Inc. and Envision Halifax, who are bringing in John Thackara to explore “what might life in a sustainable world be like?” and “what design steps are needed to get us from here to there?” Events will take place primarily at The Hub and Carbonstok, from October 21—24. Spread the word on Facebook and Twitter.

Together with the other 4020 class, we’ll be participating in Halifax Pecha Kucha Night, which takes place at Garrison Brewery on Friday October 23, from 7—11pm. Pecha Kucha Night is envisioned as a way for young designers to meet, network, and show their work, with a strict format of 20 slides and 20 seconds per slide for each presenter (that’s 6 minutes 40 seconds total). Get ready, “future interdisciplinarians”!

What does the rapid evolution of the web mean for designers? Perhaps the most important thing to keep in mind is how quickly the technology is changing. It can be a challenge to keep your skills and knowledge up to date, but the web also provides many tools to help you do so. Even if you aren’t a web designer, a great way to find out about the latest developments in your field is to find a good blog related to your area of expertise. Social networking services provide ways to connect with other people with your interests, make your work more visible, and get help when you run into problems.

As a designer, keep in mind the characteristics which help make many “Web 2.0″ websites so useful and successful. Social networking websites such as Facebook provide tools that anyone can use to share and discuss media. Many successful social networking sites are designed around specific communities, such as The Auteurs for film enthusiasts, and Etsy for crafters. Similarly, sites such as YouTube and Flickr provide venues for user-generated content, and make it easy to stream and connect that content to other websites. Don’t forget that the ways in which people access the web are also changing; Twitter has been so successful partly because it has been designed with mobile phone users in mind.

If you are particularly interested in web design, there are many techniques and technologies you might want to read more about. Dynamic content such as blogs or user-generated content can keep visitors coming back to your website, while RSS and web feeds allow users to quickly check for updates. Content management systems such as Wordpress and Joomla allow you to build websites that anyone can update. For sites which offer a rich user interface, javascript can be a powerful alternative to Flash, and can help keep your sites accessible and user-friendly.

A List Apart, which I’ve mentioned previously, is a fantastic resource for web designers, with a focus on web standards and user-centric, accessible design practice. It’s a great way to keep up with current issues and techniques – be sure to browse through the archives. Resources for Beginners is a great place to start.

The connectedness and dynamic nature of “Web 2.0″ websites can be attributed in part to technologies such as XML, or Extensible Markup Language. XML is a set of specifications for electronic documents which, among other things, allows web developers to separate the content and presentation of a website. This means that the content of the website can easily be streamed to other websites, and displayed in different ways. Think of how you’ve seen YouTube videos embedded on other websites, or how Facebook automatically retrieves information about a website that you link to. For a visual explanation of this process, see Wired’s Life Cycle of a Blog Post.

Do you use RSS, or web feeds? RSS stands for Really Simple Syndication, and is one way of using XML. If you check a lot of websites which update frequently, such as blogs and news sites, web feeds are a great way to streamline the way you receive information from these sources. Instead of checking each website individually, you can simply subscribe to the website’s feed using a feed reader such as Google Reader. Check out the Google Reader In Plain English video to get started.

Many websites offer RSS feeds, and you can find them by looking for this icon: . This class website has a feed, which you can reach using the RSS link at the bottom of this page, or this link.

In our Oct. 6 class, we started Project 2, “The Future Is Already Here”. Throughout this project, we will be looking at design practice, process and possibilities in the context of recent new media trends.

The term “Web 2.0” emerged a few years ago as a way to describe a new generation of websites which are changing how people use the web. Despite quickly becoming a buzzword, “Web 2.0″ is still useful as a way of introducing concepts such as social networking, user-generated content, and the power of the semantic web.

Facebook, YouTube, Flickr, and Twitter are some of the most popular “Web 2.0″ websites. While websites of the past contained mostly static information, these new sites are dynamic and always changing, providing easy-to-use services for sharing text, photos, videos, and other media. The most successful of these services attract huge communities of users.

Other types of websites, such as blogs and wikis, provide new tools for people to communicate and collaborate using the web. In class, we looked at some examples of blogs, including Canadian Design Resource, BLDGBLOG, and BibliOdyssey. We also looked at some of the features that make Wikipedia particularly useful, such as instant editing, revision history, and discussion pages.

The video Web 2.0: The Web is Us/ing Us, by professor Michael Wesch, provides a good overview of how “Web 2.0″ represents a paradigm shift when it comes to how the web is used, and suggests that our understanding of what the web is capable of will continue to evolve. An important aspect of this evolution is that websites are increasingly designed in a way that makes them more useful to computers, not just people. This development is called the semantic web, and helps make the web a more powerful and flexible resource for sharing information.

We also looked at a few innovative web-based tools which have recently emerged. Wolfram Alpha describes itself as an “answer engine” which provides actual data instead of search results. Google Wave is Google’s attempt to reinvent e-mail, and makes use of many “Web 2.0″ innovations such as wiki-like collaborative editing and social networking capability.

Screenshot of Bas Jan Ader's website.

Here are some other types of websites we looked at in Friday’s class.

Horizontally-scrolling websites are difficult to do well, as they disrupt many of the ways that users expect websites to work. The Horizontal Way is a gallery of horizontal web designs, some more successful than others. Here’s another horizontal gallery.

Some websites layouts distribute the website content across a large plane, with the browser window sliding to show different parts of the site when links are clicked. Here are one two three examples of this sort of structure.

Finally, we looked at some examples of more freeform, difficult-to-classify website designs, such as Arcade Fire, Bas Jan Ader, Design and the Elastic Mind, Alex Peemoeller, Jeremy Levine, and Jason Santa Maria.

I found some of these website design examples via Smashing Magazine.

Screenshot of Miranda July's "No One Belongs Here More Than You" website.

As part of our typology of website designs, we looked at a few examples of low-tech innovation. These websites are not particularly complex, but nevertheless manage to do something different in a disarmingly simple way. My favourite example is No One Belongs Here More Than You by Miranda July, who is a performance artist, writer, and director. The website, which is basically a series of slides meant to promote her book, perfectly complements her sense of humour, whimsy, and charm.

We also looked at Pages In The Middle of Nowhere by Olia Lialina, who is an artist and curator of internet art, and the Solar System Scale Model, which claims to be “possibly one of the largest pages on the web” at an estimated half a mile wide.

If you enjoy these websites, you might also like Miranda July’s Learning To Love You More project, and Frozen Niki, a blog art project by Dragan Espenschied and Olia Lialina.

Screenshot of Get London Reading website.

Familiar interfaces from analog media can be useful metaphors in digital design – think of the desktop metaphor (files and folders) employed by operating systems such as Windows and Mac OS, or Photoshop tools. While these metaphors can make a digital interface more intuitive for users, they can also be distracting and obstructive when not done well. When it comes to web design, books and architecture are commonly-used metaphors. Here are some websites that look like books. Other imitated interfaces include envelopes, shelves, and rooms.

Websites based on other computer interfaces are an interesting twist on this technique. Game designer Greg Wohlwend’s website emulates old turtle graphics software!