31189a - Progress challenge 6
Design
NOTE: This challenge will help you complete assessment 3.
- Create a design for the web
environments
- Draw a one-page site diagram
using a drawing package that shows typical pages and their relationship (show
no more than 10 web pages).
- Construct a wireframe of a
chosen page (one page).
- Convert the wireframe into a
static screen design using graphics software (one page). This screen layout
should show:
1.
Navigation elements
2. Actual content and media elements. Source these elements
from sites that share royalty-free content.
3.
Metaphor
4.
Actual meaningful text (not Lorem Ipsum).
Answer
Here is the hand-drawn diagram
of my website (how I originally hoped to ‘construct’ it). There are three categories of ‘handbags’ and
purses: women’s bags (for going out) – handbags and shoulder bags for instance;
wallets and purses (men’s and women’s); and backpacks/luggage. These three categories were originally going
to be in the top navigation bar. There
was also going to be a footer (or bottom navigation bar) with a contact page,
an order form, a shipping policy and a privacy policy. There are probably more than ten pages on
this so I may have to pare this down, and put all the product categories under
‘Products’.
An alternative way is through
card sorting, where, according to Paul Boag[1],
is a way of sorting through the ‘information architecture’ of the site (the
above drawing at least gives me an idea as to how many pages and categories are
within the site). Sam NG[2],
of UX Matters believes that card sorting is:
… Information architecture
comprises a navigation system, a classification system, a labelling system, and
a search system.
Card sorting certainly can
provide input into an organization system— What content goes together—and a
labelling system—what to call things —but it has very little to do with a
navigation system or a search system.
Here is how Boag believes one
could go about it:
Simply label 20-30 index
cards with headings from the various sections, subsections and pages of your website.
Depending on the complexity of the site, you might also wish to include a brief
description. It is also useful to number the cards so that you can more easily
analyse the results of your test later.
In other words, I can
brainstorm all the categories I can think of, and then if I make a mistake, I
can correct it by moving the cards around to see what is suitable for each
category.
I did a card sort using sticky,
‘post-it’ notes with all the pages and categories I could think of. I figured it would be easier to correct than
simply doing a drawing on paper because I can correct any mistakes I may have
made, and/or pare down the number of pages to 10 (so far, I have 14 but I could
either lump 2 or more similar categories together or remove any that might be
irrelevant).
An alternative option (for
navigation) is through ‘breadcrumb trails’, where the ‘crumbs’ are situated
horizontally on top of the page below a title bar or header. They often…
‘…provide a trail for the user
to follow back to the starting or entry point. A greater-than sign (>) often
serves as hierarchy separator, although designers may use other glyphs (such as
» or ›), as well as various graphical icons’[3].
The term
‘breadcrumb’:
‘The term comes from the trail
of bread crumbs left by Hansel and Gretel in the fairy tale of the same name’[4]
Examples of breadcrumbs:
v
Page viewed > Page viewed > Page viewed
> Page viewed > Page currently being viewed
v
A viewer may look at seven pages and the
breadcrumbs will show as follows: Home page > Services > About Us >
Home page > Latest Newsletter > Home page > Page currently being
viewed
v
Other breadcrumbs will show a hierarchical
structure: Home page > Section page > Subsection page
I have also constructed a
‘wireframe’ using Photoshop, and here is what I hope the home page would look
like. It has a header with the logo,
navigation bar and contact page, but no order form, shipping or privacy
policy. I have a coral, white and black
(or dark grey) colour scheme in mind (even though the header for wireframe
template is orange, it is the next best thing to coral, or pinkish-red).
Content and Media Elements
The ‘star’ product is what I
call my ‘furry purse’ bag – which is a women’s handbag that is furry (made of
faux fur, so no animals suffered any harm in the process[5]). Though it the featured product, the bag was
actually something I bought from a local second-hand shop a few years’
ago. I have several pictures of this
item, which I have taken for myself.
Another item I have included is
the ‘furry purse’ makeup bag – a bag or purse with many uses: a clutch bag, a
make-up or toiletries bag (good for travel), a purse or a cuddly toy. Again, I bought this item from the same local
second-hand shop as the ‘furry purse’ bag.
I have decided to include textures
and colours of several furry toys and items I own in my home, which I believe
will give me some ideas for more personalised designs of this product.
I had also constructed a logo
for The Bag Lady, with a simple picture of a handbag and the ‘lust script’ for
the text.
Metaphors
According to Wikipedia[6],
metaphors are:
‘…sets of user interface visuals, actions and procedures that exploit specific knowledge that users already have of other domains.’
Katalin Szabo[7]
explains the historical origins of the word ‘metaphor’:
Originally, a Greek word
means, "Carrying across". The essence of metaphor is to give an idea
of some unknown thing or concept, by illustrating it with something else which
is known and which originally has nothing to do with it. The metaphor
identifies the two things with each other, for the purpose of illustration. In fact,
the metaphor is an error committed on purpose, because the two things, which
are said to be identical, are in fact not identical.
About the ‘world wide web’, she
also states that:
- The Web can be pictured as a three-dimensional network connecting computers (or files or persons) situated in different points of the globe. The web is constantly changing, growing.
- However, it is not a spider's web: there is no spider in the centre (and there is no centre, either). We can also regard it as a network in a fictitious multi-dimensional space, interconnecting complex data structures.
She then states that one can
liken the Internet to:
- A Living organism: the Net can be regarded as a constantly changing, developing organism consisting of cells, which come to life and die. The organism itself may die if too many cells die in it.
- A big coral reef that is made up from lots of tiny beings, each of them contributing a little to the reef, which in itself is much more than just the tiny contributions added together.
- A big real estate market: real space can be a metaphor for Cyberspace. The real estates (i.e. "places" in the Net) can be sold, rented, some are more valuable than others. It is difficult to predict the future value of any particular estate, but there are certain trends. There is a gold rush as well - but not too much gold is to be seen yet.
- A Large department store: It is huge and quite disorganised. If we find something, than it is likely that the goods around it are of similar nature, but similar goods can be found at any other place in the store, too. We usually cannot find an item, which exactly matches our needs, but it is likely that we will find something similar. We find many things, which we do not really need, but we take them anyway because they are so cheap.
I personally like the fourth
metaphor as The Bag Lady is an online retail store, marketplace or environment
where items are bought and sold (so this analogy is quite fitting).
Hence, they are analogies or
themes for sites to help unify the various pages. In CSS Zen Garden
By using meaningful images and
assets that support the metaphor, the user will find the environment clear and
will be able to make sense of it.
Text
Home Page:
There is a picture accompanying
this text.
Some other text will be saying:
Order now for July 2017 – for just $50 AUD.
I will most likely link this text up with an order form.
‘About us’:
Manager: John Simpson, Bag Maker
John Simpson has been designing and manufacturing his
unique handbags since 1997. He gained
his qualifications in Fashion design through the Sydney College Rockdale Plaza
Designer:
Colleen Sedgwick, UX DESIGNER
Colleen Sedgwick has been an Artist and Designer since
2011. She had completed a Certificate I
in Cartooning and Illustration in 2011, and a Certificate I in Illustration and
Drawing Made Easy, both through Open Colleges School of Art and Design. She is now near completion of a Diploma of
Graphic Design though the same school.
For the Blog:
The story of the Furry Purse Bag: Uses for a Furry Purse by Colleen Sedgwick
I owned a furry purse when I
was younger (during the late 1970s and early 1980s). One of the main uses for
it was to carry money in, so the main use for it was to carry and store money,
credit cards, receipts and the like.
So anyway, here were some of the things one would assume about a furry purse:
1.
It is for carrying money in;
2.
It is for females – especially old ladies;
3.
An animal had to die (like a kangaroo) so someone could
have a furry purse;
4.
It is old-fashioned. - Who carries one nowadays?
5.
They go 'mangy'
However, what if:
1.
Furry purses had uses other than the storage of money.
2.
That people, other than old women, could have one.
3.
That they came back into fashion.
4.
That they could be made from synthetic fur, or wool, or
any material other than real fur (after all, wallets can be made either out of
leather or out of something else, so why not furry purses)?
5.
In addition, because they are not made of real fur,
they do not have to go mangy as they wear out.
Moreover, other than as a purse, a furry purse could be used as:
1.
A face or hand warmer
2.
A cuddly toy (like a teddy bear)
3.
A Muppet (one of Jim Henson's creations), a bit like
Cookie Monster, Oscar, Grover or any of the other similar looking Muppets or Sesame Street
characters;
4.
A 'man-purse' where one could re-use the fur and make
it into a furry wallet for men;
5.
Patch-work creations, made up of still-good pieces of
fur or leather;
6.
A leather purse (if the fur has worn off).
7.
Now – add some handles for a hand or shoulder bag.
From these humble beginnings *emerged* the Furry Purse Bag – the fluffy carryall for all your fashion needs. Please note: the modern Furry Purse Bag is made from faux fur, so no furry animals were harmed in the procuring or manufacture of these bags.
[1]
Boag, P (2005): Card Sorting, in Boag World, https://boagworld.com/usability/card-sorting;
Accessed 22nd November, 2016;
[2]
NG, S (2007): Card Sorting – Mistakes Made and Lessons Learned, in UX Matters,
http://www.uxmatters.com/mt/archives/2007/09/card-sorting-mistakes-made-and-lessons-learned.php
[3]
Wikipedia (2016): Breadcrumb (Navigation), https://en.wikipedia.org/wiki/Breadcrumb_(navigation)?oldid=759141583
[4] Ibid; see also Mark Levene (18 October 2010). An
Introduction to Search Engines and Web Navigation (second Ed.). Wiley. p. 221.
ISBN 978-0470526842. Retrieved 12 November
[5]
People for the Ethical Treatment of Animals (2016): Video of Crocodile Skin
Handbag Making, in the PETA Official Facebook Page, https://www.facebook.com/official.peta/videos/10154885036849586/;
and ‘This is why I don’t wear leather’; https://www.facebook.com/official.peta/videos/10154130847364586/
(more relevant to the concept of the Furry Purse Bag); and ‘Trapped Animal’s
Final Moments of Life, in https://www.facebook.com/official.peta/videos/10154739608119586/
[6]
Wikipedia (2016): Interface Metaphor, https://en.wikipedia.org/wiki/Interface_metaphor?oldid=758927925;
[7]
Szabo, K (1995): Metaphors and the User Interface, http://www.katalinszabo.com/metaphor.htm
[8] CSS
Zen Garden
Comments
Post a Comment
Thank you for your feedback. The moderator will soon moderate your comments and say 'yay' or 'nay'. Any posts that aren't relevant to the topic of this blog will be rejected immediately.