50 Things list

My finalised 50 things have been established. I have categorised them by subject matter.

• RED: Entertainment
• PURPLE: Appearance
• BLUE: Food and Cuisine 
• GREEN: Hobbies
• ORANGE: Travel 
• CRIMSON: Personality and Facts

50 things development

Structure

This part needs a lot of work still, planning to do something a bit more complex than a spider diagram

I've come up with some illustration designs:

UWE: 50 Things ideas

Some rough sketches of ideas:

UWE: Analysing Practice Designs

My idea is to exhaust an environment like how Perec does in a visual way.

I was thinking, what sort of things would you find f you exhausted different places? (starting with something I know of, a web design studio?) And what would the objects tell you about the person who lives in that space?

Some postcard designs I have come up with so far:

I intend for them to be presented as a series

UWE: 50 Things

Module: Introduction to Graphic Arts

Alongside my analysing practice module, my other project I is "50 things about me". I have to produce a A1 print piece which contains 50 pieces of information. The challenge is how I will be able to simplify the information to something that is easy to understand and visually interesting.

My 50 things are as follows:

UWE: Analysing Practice ideas

I've got a broad range of angles I could approach my project in:

Exhausting

Art that has a lot of information are: mood boards. And photographs of busy environments.

Or patterns in wallpaper or print making. Perec mentions reoccurring things in his narrative like pigeons or buses.

Landscape drawings can also be very informative with a lot of detail. 

An Attempt

Some graphic design is clever. It makes you think and that is how you get the meaning

Some information is hard to interpret until you notice the pattern or given a key.

UWE: Analysing Practice

I've started my new course in Graphic Arts at University of West England, the new project I am engaged in is based upon a book by a French writer Georges Perec called "An Attempt at exhausting a  place in Paris"

The nature of this project is open ended, experimental  and needs to be in some way related to the text.

Some findings I have gotten from this text are:

Personal Website Completed

This is the final still for my personal website. My intentions are to make this live sometime soon in the future.

Any thoughts would be greatly appreciated.

New personal website development

This is underdevelopment, should be coming soon. A teaser:

Sonic machines set of icons completed

I finished the final icon for the set of icons for client project: Sonic Machines. This is for the splash page.

And this is what the set looks together:

Research Project:Completed

I've am pleased that my research Project for my university module is completed. My conclusion was as follows:

"My research enquiry is: to what extent does interactive presentation of information provide an enhanced user experience compared to online static communication methods on the web? I have found out that designing innovative but ambiguous interfaces can sometimes hinder user experience because the interface is not what people are familiar with. This can cause them to feel frustrated with the website.

However, Norman Donald argues that people make judgements about a websites emotively, so a first good impression would set them up to having a positive attitude and tolerate minor usability problems. When a website is designed well aesthetically, the website is more credible and trustworthy because it makes users feel more comfortable and relaxed. My artefact results show that unconventional interactive interfaces can be more pleasurable to use than static websites.

On the other hand, Dan Donald suggests that the static, conventional website is more effective at communicating because it degrades onto all devices perfectly. To an extent static websites are better because they are more functional and accessible for users, especially those on a mobile device.

From UX perspective, it is important to identify the user’s needs and create a website that meets the purpose of the website. A non-interactive, static website can be more effective on functional sites where users need to complete a process such as filling in tax forms. Whereas, a website that is trying to persuade someone to buy a holiday package may use large beautiful visuals in a slider to lure the user into making emotive impulse decisions. (Rogers, Sharp, Preece, 2013) On some websites, both of these approaches work. E.g. a fashion retailer, where strong visual flair is used to advertise the latest season products and a functional ecommerce system that is designed to be functional. My overall conclusion is the interactive presentation of information can be more suitable within some contexts than others." -abstract

I shall be preparing for my final research presentation soon. :)

Context 3 Prototype

This is the draft design for my context 3 portfolio. I will be developing this further, I may adapt some elements in future such as the colour scheme as appropriate.

1. Define your project concept. Justify your choice of project. Why is it relevant that you do the project in this way? (LO1, LO2, LO3)


Portfolio

• website showing my best work:
• Integrate my social media (badges); social platform: facebook, twitter, DeviantART, LinkedIn

Personal online blog

• A separate blog to upload my latest work, projects etc.

Self Promotion 

• My website is self-promotion; to put myself out there. Seeking potential jobs or freelance opportunities.

Target Audience

• Junior position web designer to work for a small/medium sized agency or freelance

Branding and Identity

• Rebrand my logo
• I identify myself as a:  front end web designer

Display my skills

• Technical skills: CSS, HTML
• Transferable skills: organisation, time management, communication
• Personality: will I fit into their company?

Demonstrate my creative work process 

• Briefing
• Planning and Prototyping
• Implementation
• Testing
• Evaluation

3. Decide five keywords that might be used as words that focus the conceptual approach of the project. (LO1, LO3)

• Self-Promotion
• Portfolio 
• Online-CV
• Networking
• Social Media

4. Outline and discuss five existing most relevant sources that you are going to look at to help begin designing the project. (LO2) 

http://houbly.me/site/index.html
Past student at NTU
Personal branding: logo self portrait
Clear about defining his expertise/role

http://adamhartwig.co.uk/
Interactive website
Bold colour scheme, big statement
Famous high profile web designer

http://adam.co/
Snappy tagline, draws your attention
Simple, effective design
Scrolling website portfolio

5. Show a prototype of an element key to the likely success of the project. This should be something that you have created (LO2, LO3, LO4) 


See context tag section http://wilsonchiu1.blogspot.co.uk/search/label/context

6. Discuss how you will be managing yourself during the duration of the module. (LO3, LO4)

• Give and receive feedback in tutorial sessions to see if it meets target audience
• Keeping a log of work on my Journal to show work process to other users/ employers and for an online presence 

7. Show how you intend to allocate tasks and time to delivering your project. (LO2, LO3)
Time allocated to each subtask:

• Week 35: Portfolio Plan presentation
• Week 36-17: Easter Break
• Week 38: Sort out domain and website name
• Week 39-40: Implementation
• Week 41: Testing and refining website
• Week 42: Write rationale and project book
• Week 43: Hand in deadline (for extensions)  

8. Conclusions. How does your work so far inform your evaluation? (LO1, LO3)


I feel I have defined my role specifically. I could work on some more personal projects to expand my portfolio further. And to keep up to date with web design trends: Updating my blog about relevant web developments I’ve been reading about because the web design industry is constantly changing.


Hope to improve on:

• Software skills (coding in Dreamweaver CS6, using Photoshop CS6, Fireworks CS6.)
• Social networking,
• Getting more involved in events like 2nd Wednesday

Research Project- User centred design

User-centred design! 

How can the interactive presentation of information provide an enhanced user experience compared to traditional online static communication methods on the web? 

Interactive Presentation of information is more suited for the type of user and what they want to do (purpose) sometimes it's more appropriate to some situations than others. Knowing when it will be useful in context to the product is important in determining if it's useful or not.

Designing for types of users.

• What do they want to do? Find something else quickly and effectively? 
• Complete an operation or a task e.g tax forms? 
• Or a user who loves discovering new cool interactive websites?

Retailers follow a trend of having the same user interface e.g river island, top man etc they are all the same layout. Com formative design, nothing different or exciting. It's functional and it works! It works from user frameworks, metaphors such as basket and checkout. They follow the f shape which is how users look around on the page. Companies with websites such as these make a lot of money.

F-shape website

Is a non-interactive (no sliders, obscure navigational structures, roll overs, multimedia content) website better for functional operations such as filling in tax forms online or applying for housing benefit. These experiences are forgettable: you don’t need to create a lasting impact. You get in and get out after fulfilling what it is you want to do.

functional website (that people only go on to perform tasks)

I think brand websites have to be more interactive because this is more engaging and persuades the user to buy things. Quite often eCommerce or film websites have big images, splash pages, interactive sliders or multimedia content.

Also it is useful to think about the audience the website is intended for. Do people who already know what it is about or do new people go on it? What role does the website make in the wider picture of advertising? "transmedia." For example, films are often advertised on tv but the website's role is to raise a social interaction with fans and create a hype around a film. This is where an interactive website is used.

interactive websites for promotion/advertising and transmedia

Sometimes it is about balance.

Top man website is both a persuasive and functional, e.g. advertise new fashion trends as well as going through a checkout process. Therefore there must be a balance between usable and interactive design? Similarly, banking websites do this too:

Balancing usable and interactive design on banking websites

Artefact Idea:

• Make sonic machines interactive splash page versus the main site. Which one is more persuasive in advertising band and music. Would the user be more likely to buy a CD from visiting a interactive splash page or a more functional website with a more traditional layout?
• Or design a website that should be a very functional website (that people go on to perform boring tasks such as tax forms) and make it into the most interactive, crazy site ever. And see what people think! ;)

• Or the other way round. Create the most functional website for a film. Make it dire and plain looking as possible (and bore them to tears)

References

Banking website
https://www.salemfive.com/

HM Revenue website
http://www.hmrc.gov.uk/sa/

Form versus Function
http://thenextweb.com/dd/2011/07/10/function-is-nothing-without-beauty-10-sites-doing-it-right/

Narratives
http://alistapart.com/article/narrative

Client Project: Sonic Machines Development

Basic template so far coded :

Resources

Responsive slider: http://owlgraphic.com/owlcarousel/

Research Project: Further reading

To inform my project I have read some more of  "Interaction Design, beyond human-computer interaction".

My main notes on "Chapter 2: understanding and conceptualising interaction" in a spider diagram:

And "Chapter 3: Cognitive Aspects":

Research Project: HTML5 Canvas and new technologies

From my findings in artefact 3, the results show that some people are more engaged by the website because of the V.E. These environments exist in the form of interactive or non interactive animated flash or canvas applications.

My findings from reading "HTML Design Essentials" by "Creative Masterclass" makers of .net magazine:

Flash versus HTML5

HTML is winning hands down. canvas: web graphic trends

Adobe edge HTML5 Canvas

"The danger of adobe edge faces is, ironically from something we call 'flash' effect'. Animation and interactivity used for pointless purposes; sites that showcase splash screens and progress bars. What we fear is the second coming of 'skip intro'."

"It seems to me that we're simply jumping on the animation bandwagon because we can, and are in serious risk of backtracking on all the great advances in usability we've had over the last few years. Every new portfolio site is now going to spin, shake"

VML and SVG Javascript

Vector Mark-up language: supported by IE6 - IE9 only

Scalable Vector graphics: supported on all browsers

"Both SVG and VML work by adding special DOM nodes to the document which represent shapes, like circles, lines, and polygons. Like any other DOM element, these shapes can be styled, positioned, and interacted with using native JavaScript or your favorite JavaScript library like jQuery, YUI, etc."

" First, since SVG and VML require us to add DOM elements for each shape to the document, the document model can quickly become overloaded for complex drawings, and the application could slow down or even crash. HTML5 Canvas is much more efficient and performant."

HTML5 Canvas 

"Second, unlike SVG, which can have events bound to shapes via native JavaScript or a JavaScript library, HTML5 Canvas does not provide an event binding API, which is a real bummer. And if you try to implement something yourself, you’ll quickly realize that it’s ridiculously difficult to create an easy to use mouse / touch event system that’s performant. 

Fortunately, there are several HTML5 canvas libraries out there that address this problem, including KineticJS, EaselJS, Paper.js, Fabric.js, and Processing.js."

Janvas 

SVG drawing program. Quite new at the moment: http://www.janvas.com/illustrators_designers_developers/projects/janvas2D_web/index_EN.php

Research Project: Artefact 3 results

My artefact 3 findings are:

Q. On a scale from 1 to 10, where 1 was very diffciuit and 10 very easy, rate how easy the website was to use? (navigating the site)
6.42

Q. On a scale from 1 to 10, where 1 is very slowly and 10 very quickly, rate how long it took to work out what to do on the website?
7.

Q. On a scale from 1 to 10, where 1 is feeling annoyed and 10 is feeling happy, rate how did the website make you feel?
6.33

Q.On a scale from 1 to 10, where 1 is very slowly and 10 very quickly, rate how long did it take for the website to make you feel annoyed or frustrated? (Choose N/A if you didn't feel annoyed at all)
6.

Q. On a scale from 1 to 10, where 1 is poor and 10 is excellent, rate how visually appealing or interesting the website looked?
6.71

Q. Overall did you like the website?
Yes:  14 (58.33%)
No: 10 (41.67%)

Q. Why did you like or dislike the website? (choose one main reason)
Easy to use: 1 (4.17%)
Looks interesting: 13 (54.17%)
Difficuit to use: 7 (29.17%)
Looks terrible: 3 (12.50%)

Results

• The website was neither very easy or very hard.
• Most users found it quite quick to learn what to do.
• More users felt happy using the website than annoyed, the average rating was in-between.
• The website wasn't quick at getting people frustrated, many didn't get annoyed at all.
• Users gave a high score for how visually appealing it looked.

• More users liked the site than dislike.
• The main reason for liking the website was because it looked visually appealing. 54.17%
• The main reason for disliking the website was because it was difficult to use. 29.17%

User feedback

"A very unique type of website that stands out far from the rest, but the use of this type of design must match the type of website that targets a specific target audience, websites such as commercial shops or agencies should avoid this as it would be hard to navigate for elder users."

"It seemed like a gimmick. As an experimental website it was OK, but I'd be really annoyed if I actually wanted to find a specific thing."

"it was difficult and got frustrating. however the concept is really good! simple looking but effective!" 

"Very well made. Loved how the menu looked 3D."

"Very unique and interesting to use, I especially liked how you had to discover how to navigate the website, but it was not difficult to learn how to use it. Very cool, I would like a website like that."

"I was more so curious about the website than anything, it had an interesting and unique layout that flowed almost effortlessly which I enjoyed a lot."

My Expectations

I expected people to be put off by the 3D navigation despite it looking quite innovative and new. I also thought you have to compromise aesthetics with usability with V.E websites.

My Conclusions

Q. Where are we at currently with interactive presentation? Are we seeing fully interactive elements such as "Virtual environments" being introduced to the web? Can and do they provide a enhanced user experience?

Yes they can to some extent. The results show that some people are more engaged by the website because of the V.E. These environments exist in the form of interactive or non interactive animated flash or canvas applications.

Q. From artefact 2 my findings are that you need to compromise website aesthetics with usability. Does this apply with VE? What is the limit, how far can you push it until it becomes unusable or dysfunctional? 

You do need both. The main factor for liking the website 58.33% was because it looked interesting 54.16%, but only 14.17% of people liked it because it was easy to use. This shows people are more willing to sacrifice usability for aesthetics.

However, the compromise between aesthetics with usability still this applies to V.E to an extent because 41.67% disliked the website, 29.17% of which thought it was hard to use and 12.50% because it looked terrible.

Q. Can interactive VE (2D Flash built made to look 3D) improve user experience? (extend operability) 
The more wacky the art website, the more patient the user is and the more forgiving they are.

If it's interesting enough, it engages and draws the use in, the content buys them leeway and it potentially increases the appeal of the website.

However, it doesn't necessarily make usability easier. Only 4.17% found the website easy to use.

Further research

canvas: web graphic trends: how html is beating flash big style!

html5 can create rich Internet experiences.

Research Project: Artefact 3 preparation

My artefact 3 consists of testing users to see what their response is to this interactive 3D virtual environments navigation website: http://www.screenvader.com/

And then collecting responses from a survey:

Q. On a scale from 1 to 10, where 1 was very difficult and 10 very easy, rate how easy the website was to use? (navigating the site)

Q. On a scale from 1 to 10, where 1 is very slowly and 10 very quickly, rate how long it took to work out what to do on the website?

Q. On a scale from 1 to 10, where 1 is feeling annoyed and 10 is feeling happy, rate how did the website make you feel?

Q.On a scale from 1 to 10, where 1 is very slowly and 10 very quickly, rate how long did it take for the website to make you feel annoyed or frustrated? (Choose N/A if you didn't feel annoyed at all)

Q. On a scale from 1 to 10, where 1 is poor and 10 is excellent, rate how visually appealing or interesting the website looked?

Q. Overall did you like the website?

Q. Why did you like or dislike the website? (choose one main reason)
Easy to use
Looks interesting
Difficult to use
Looks terrible

Client Project: Portfolio Mockup

Individual music page

On each individual music page he wants the following: text, video and music tracks. The music tracks are finished versions of the piece and are different to the video content. These will be on this page, or on the main page if it becomes operational (the album sidebar)

He doesn't want individual sound file/clips of his work (like on his exhibition).

As extra’s he would like a sliding gallery for pieces that don’t have a video (vinyl work). One with a window and scrollable arrow keys to navigate across each picture.

Icon’s 

He likes the icons. He wants to keep the racing car one the same, and he likes the circle details on both the vinyl and washing machine.

He prefers the simple triangle for the metronome but if possible it would be nice if there was a graphical detail that would represent the pendulum rather than the scales.

Home Page

He has decided he wants all the textual information on the front page. He has sent me the text he wants on there, he may condense it and make it a bit shorter to fit the main page. He doesn't want a separate about me page.

On the front page, the video featured will be a video of his latest work.

Client Project: Mockup Icons

I had a client meeting with Owen today from Sonic machines and he looked at the designs I've come up with and he is really happy with them.

He liked the one which had a balance between the constellation and image of the object both being equally prominent. He thinks you need to strike a balance between the two.

He likes both the white line and the black line lines for the constellation pattern. He likes the faded lack on the metronome but the darker shade of purple looks better on the washing machine image. He is happy for me to create 3 more for each icon.