1. Go to the WordPress admin section and select “Add New” from the plugins menu.

2. In the “Add New” section, search for Lightbox 2. You will see a whole page of results, but since we’re just doing a basic installation, install the first one on the list. Click the install link on the right hand side of the page and follow the directions to install Lightbox 2. You should get a page saying “Installation successful”.

3. Once you have done that, create a new post or edit an existing post. When you insert the image, click the little “upload/insert” button at the top of the editing screen. Upload an image, making sure you select “File URL” rather than the other two options.

4. Once you have inserted the image, click on it to open the “Edit Image” dialogue. Choose “advanced settings” and scroll down to reveal the section for advanced link settings. Change the section that says something like “attachment wp-att-159” to “lightbox[GROUP]”. Set group to the same for all the images in the post that you would like to be included in the same slideshow.

5. You’re done! Preview or publish the post to see Lightbox 2 in action.

‘Gallery’ is a self-directed project that forms the major assessment for my current course. Because I’m essentially working for myself I’m constantly looking for ways to get feedback and advice from as many other people as possible. Posting designs on ‘The Daily ALIEN’ is an important part of this process.

I invite all readers to comment on my design. My only request is that you keep your comments polite as all comments with offensive content will be deleted. You can provide your feedback in three different ways:

1. Use the ‘comments’ form at the bottom of the page
2. Use the contact form
3. Email me directly: my address is emma AT siasan.com.

When commenting on this design, please consider the following areas: interface, navigation, flow of information, visual style, overall direction and structure of the project and any other general comments.

By the way, you can download a copy of the design document. It’s 35 pages long and weighs in at just under 2MB, though, so if you prefer you can read the summary below. The summary includes the important points of the full document as well as adding a design rationale

The project

Client: Emma J Lomman (web designer, web developer and digital artist).

Purpose: expand a hobby of making desktop backgrounds into an online service.

Products to be offered: desktop/mobile phone backgrounds, custom backgrounds, website/CMS themes.

Technology: Joomla!

List of requirements

• an easy-to-use gallery interface
• a combination of free and purchased content
• downloadable content and a means of tracking downloads
• include information and a sales pitch about who the client is and what she does
• advertise additional services
• e-commerce model that includes online transactions
• able to be accessed using a range of different screen sizes, device types and connection speeds
• contact the client
• administration section for managing uploads, updating information and tracking user activity
• easily accessed methods of advising users when new content is available
• search function

In the future the site will be expanded to include the following additional features:

• ‘skinnable’ interface
• advanced search function
• be able to recommend images

Target audience

Teens to over 50s (all content will be G-rated i.e. suitable for children).

The design

Site structure

Interface design

Rationale

My goal with this design was to develop a light on dark theme that made use of desaturated colours rather than plain greys. It is intended to be simple enough that it won’t attract attention away from the content while at the same time adding enough visual interest to give the site some individuality.

The site is full screen, with dimensions changing for different screen sizes. The number of images per row on the gallery page will change depending on the amount of screen available. This should maximise compatibility with a range of different devices.

By the way, a mobile version of the interface is planned for the future.

The best point of this design is that it will not clash with or attract attention away from content images. The flip side of this, though, is that some of the darker images in my collection might not stand out against the background. I’m hoping that the image borders will counteract this effect, though.

There are still a few things that I’d like to change about the design. The main site title is the big one – it just doesn’t stand out or add anything to the overall design. I’d also like to add some colour to the navigation, although this will probably be in the form of rollover effects rather than big changes to the default state. Finally, the page titles need something added to them so that they stand out more.

Suggestions are welcome!