Moodboards are great planning tools in that they can help pinpoint the highlights and important details within a slab of information. By collaging visuals together, they bring forth the most relevant aspects to focus on; the end result and the process of putting it together are equally as informative as the other, for the creator and the viewer. Manipulating visual hierarchy of the mood board, by using the size, weight and grouping of the images, also help determine the flow/order of information and show which aspects are more note-worthy than others.
John is a 75-year-old retired carpenter who still enjoys hikes in national parks and ridding his Harley-Davidson. He looks forward to the local club raffle and a catch up with the boys on a Thursday evening. He also enjoys playing bingo, listening to local radio and watching old western movies with his wife Jill. As he gets older and has to visit the hospital more often, he prefers quick and efficient healthcare with simple, bold instructions and hospital signs. He aims to enjoy the rest of his life traveling a little and spending time with family, especially his grandchildren.
· Location: Hobart · Toaster Usage: Unfortunately Johnny has never used a fancy new electric toaster · Computer/Internet Usage: PC, Occasionally browses the Internet with the help of his grandchildren. · Computer Skill: Novice user. Finds things too complicated on the computer to use. Has an email but doesn’t know how to use it properly.
Storyboards are used for mapping out not only the visual hierarchy at face value, but the viewng order as well. From navigation to buttons to links to effects, storyboards plan them all out in an easy to understand structure for the reader. Some may be interactive to heighten the extent at which information is conveyed.
Here is a proof of concept for an interactive storybaord to make toast. All buttons and functions are hypothetical but at a quick look the viewer can deduce what actions take place, when, and where on the screen.
The colour blue is used to signify an action to be taken. Numbers on tabs turn blue when they are selected; arrows on the page indicate an action to be taken or imply movement; blue text are folow-up instructions within the number tabs
Numbered tabs on the side indicate the chronological order of the steps for the user to follow.
Large tab appears in the top right corner so that users will always know which step they are up to in the process.
Blue text beneath the large number tab are follow-up instructions, and inform the user what action needs to be taken before they can proceed to the next step, and to just further clarify the instructions over all.
Arrows will have a slight animation to indicate where the user to move to in their real life kitchen.
Arrows also carry decisions, with the options of Yes and No.
The Next blue arrow at the end of the numbered tabs indicates that there are more tabbed steps - it will jump when the cursor rolls over to signal the user to click.
Hope you guys are hungry! Here is a flowchart and step by step instructions to making toast.
Flowcharts in themselves are a form of visual/information communication, mapping vats of complex, interwoven information and options into easy-to-follow charts. This makes them efficient planning tools in the development processes of design, amongst many others.
As well as being my first Interactive Design assessment, this blog serves as a documentation of my learning process in this field of design.
"Spiderbites" refers to the spiders working within search engines; the online resources I have put up are the results of using a search engine. At the same time I have been taking advantage of University of Western Sydney's well-stocked Ward Library to find material the "old -fashioned" way. No actual living spiders were encountered during my prowling sessions through the shelves. But the manual aspect of a library holds that particular charm when compared with online search engines.
The header design features a red spider drawn in an 8-bit pixel style. It encompasses both the online web-crawlers and the living breathing ones known to scurry along old dusty bookshelves.
Not being a very tech-savvy individual, I needed a side-by-side comparison of web 1.0 and web 2.0 in order to pick out the significance of the latter. After a quick web 101 lecture, the picture was painted - deceitfully - straightforward.
Web 2.0 could be defined as a movement, as a shift in the way people interacted with the internet and with each other online.
Web 2.0, as opposed to web 1.0, is cored with the concept of interactivity. While the latter could be summed up as “the mostly read-only web” in its static relationship with users, web 2.0 was all about lending the user more control and generating a greater participatory culture. With its open architecture, users are able to propagate their own content and contribute to the media/collective intelligence. While this was technically also possible in web 1.0, in the rather 2 dimensional way of uploading photos posting comments, the nature of the user-web relationship has evolved to a greater depth and range of interaction in web 2.0. One of its distinct characteristics is the emphasis on user friendly interfaces that promote user-to-user collaboration online.
Following are a few examples of web 2.0 in action.
1. Wikipedia - online encyclopedia. According to Wikipedia's own page on Wikipedia itself, it is a:
A free encyclopedia built collaboratively using wiki software.
Wikipedia is notorious for its collaborative, participant-generated content. Virtually anyone can make an account and create articles in this online encyclopedia. For that reason, although it is often considered an academically unreliable source, it is a typical example of user-generated content and collective online consciousness.
2. deviantART - where art meets application. In essence it is a community of artists and creative beings, acting as a space for creative sharing, networking, critiquing and grouping. From traditional media to digital creations and written poetry and everything in between, deviantART categorises all its content - uploaded by its members - to ensure easy navigation and access for existing/new members and visitors alike. Some members go to the extent of lending out their creative abilities for a fee or being commissioned artworks for fellow members.
3. Blogs - online diaries and portfolios. There are many blog applicantions out for users to choose from, and they basically serve the same purpose - to write, publish and share. Some focus on having one dominant feature as their defining attribute, made for a more specific audience. For example, Tumblr has a focus on images and photo uploads, whereas Wordpress has more web features, for users who are more interested or knowledgeable in HTML, CSS, etc. Often, communities and groups are formed for like-minded bloggers to network and exchange opinions.
Some blogs act as direct portfolios for designers. This fusion of professional portfolio work and personal blog entries and updates allow prospective employers to see more of the designers personality and interests.
Until a few days ago, my understanding of what interactive design was pretty superficial; wasn’t interactive design basically an online space where people can engage with the on-screen elements for a certain purpose?
There are many definitions by different designers who have different ideas about what interactive design is. I feel the most encapsulating definition, given how far-reaching and diverse interactive design is capable of, would be from “Interaction Design: Beyond Human-Computer Interaction”:
Its aim is to help engineers to design interactive products that will support people in their everyday and working lives. In particular, it is about creating user experiences that enhance and extend the way people work, communicate and interact.
Whether its for business, networking with other users, education, entertainment - the interactive element adds a new dimsension and depth of exchange between the human user, computer, and other human users; the overall experience is heightened.
Here are a few examples of interactive design in a website format.
1. Turbo Chef An in interactive site in which users can view and understand the technical side to the oven, and engage with is functions online.
2. The Good Food Fight Although the contents of healthy eating are given a bit of a miss on, the whole point of this fun interactive site is not to overload the viewer with potentially dull facts. No, the food fight adds a fun and cheeky element by letting the user face off with a junk food peddler and learn that healthy eating is far from unsatisfying or boring.
3. NAWLZ This wesbite is basically an interactive comic, in which the user has the option of choosing what happens next in the plot. The pace, which plays an important role in storytelling, is placed in the hands of the viewer, enabling them to read at their own pace. The interactivity of the comic also lets viewers experience a side of "static" graphic story-telling that is less intense in print and less submissive than motion graphics.
Information design is the process of turning data into useful information, and presenting it in a designerly appropriate way that communicates its basic meaning to a targeted audience. Its forms and varieties come in a broad spectrum, partially due to the design factor that intergrates it into so many different fields and subjects. My own understanding of information design would be summed up in, and sadly at the moment limited to, Röyksopp's "Remind Me" music video.
When asked "what is information design?", my mind goes back to Info Design 101 where it could be very generally summed up signage, way fnding and conveying statistics. (I suppose I would be one of the kind of designers whose “eyes glazed over or [they] broke out in cold sweat” if Terry Irwin had been my interviewer.) The need for great patience and attention to detail aside, if you stripped and information designer down to his or her core, you will find that the most basic and possibley the most important trait is the simple, innate desire to help people.
This doesn’t generally mean that other designers don’t care for the people that their work services – it just means that not everyone has what it takes to be a good information designer.
They are indeed an interesting breed of visual communicator. Most designers, in any field, generally work to a brief, a set of guidelines in which they can let themselves flourish. This of course does not exclude information designers – they just take the extent, the complexity of organization and sorting, to a whole different level.
To give the gist of information design, here are a few quick examples of the different forms it can take on.
1. Royksopp's "Remind Me" music video - information graphics. This music clip shows a great range of different information charts, graphics, and systems. Despite its fast pace, viewers such as myself can still easily concieve the kind of information that is being portrayed by the visuals.
2. University of Sydney Campus - signage. These are the designs for the front signage at the University of Sydney. Placed towards the entry of the University gates, the signs are designed for catching ones attention from afar, and optimising readability and legibility at a distance. The weight of the black acts as a visual anchor against the busy city background, using the university's greenery to elevate the text, regardless of time of day, weather, lighting, and other possible visual inconveniences.
3. Seeker - interactive and information design. Designed by Josephine Starr and Leon Cmielewski (UWS's very own Information Design lecturer),
The Seeker installation uses three large projections to explore migration, territorial boundaries, conflict commodities and human displacement.
The interactive touch-screen attribute lets users engage with the installation and map out the migrations throughout their family tree. Seeker fuses interaction design with information design to produce unique visual maps to convey the nature of migration to each indivisual user.
Hello there.
Stephanie is a 21 year old self-taught illustrator, currently in her 4th and final year studying Design and Visual Communication at the University of Western Sydney. She sees herself as a traditional illustrator, preferring her image-making done pencil-to-paper. With only so few semesters to go, however, she decided to finally get her web on and make the jump to digital.
