IXD301 Week 2 – What is Content?

UX Work Flow

We began the lesson on a basic UX workflow diagram,  as I need structure to get more clarity I decided to note down each section and some of its involvements.

     1. Discover(y)

  • Portfolios discovery and research
  • Content Audits
  • Trends (Google Trends)
  • Likes/Dislikes of other portfolios
  • Inspiration Portfolios

     2. Plan

  • Structure of other websites
  • Site Mapping
  • Personal Content Audit

     3. Text Design

  • Website content

     4. Sketch

  • Structure/Layout
  • Wireframes

     5. Visual Design

  • Style Guides
  • Element Collage
  • Illustrations, photos, etc

     6. Prototype/Build

  • Webflow

     7. Test

  • Mobile/Desktop

     8. Discuss

  • Friends, Family, Lecturer *Any feedback is crucial*

     9. Refinement

 

Content Curation 

Content curation is the process of collecting a variety of information all relevant to each other to add value through selecting, organizing and displaying information. Content comes in many different ways including self-generated or user-generated.

Client content is different materials, information, photos, etc provided by the client that can be used for deliverables. Although, content designers can make content more appealing and manageable by creating, colouring, designing and managing content for accessibility.

Self-generated content is where users generate their own content such as blogs, user research, branding/design.

User-generated content is the most popular means of content curation, this is content through algorithms and searches which the content has been made by other people or an alternative system.

What is good content?

For content to be considered ‘good’ it must fit a lot of the criteria down below. It has to be:

  • Appropriate
  • Useful
  • User-oriented
  • Clear
  • Consistent
  • Concise
  • Supported

The value of content curation

The average Facebook user creates 90 pieces of content a month. There is an abundance of content online and finding that information and making sense of it requires more time, attention and focus.

The benefits of content curation

  • Become an expert in that area.
  • Easier than creating your own content.
  • Shows that I am focused.
  • Allows me to expand my network and connections.
  • Can often mean more success in business terms.
  • Allows me to stay updated and informed.

 

User & Job Stories

A user story is management tool which tells a informal story using natural language. It is basically one question but it has three sections. The first section is the person, the second section is what they wanna do and the last section is what they will try to do.

An example of this would be:

As a [concerned builder]

I want to [know where the materials are coming from]

So that [I can confidently apply them to ensure quality materials]

After looking at a few examples we then had to think of our own. This exercise allows us to start thinking of the type, wants and whys of a user/person. It has given me a clearer understanding of management and functionality.

Visual Grammar

Visual grammar is a set of rules to communicate messages and information through visual design. This can also mean how visual images and elements are perceived, structured and integrated into the design.

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” – Antoine de Saint-Exupery

Time and time again we are often told simplicity is key, which is what this quote entails. This quote couldn’t be closer to the truth as we often make mistakes thinking that there is too much negative space or that a design has to be sophisticated to look good. As we all know this isn’t the case as the modern age approaches.

Tips for visual grammar: 

  1. Develop a brand dictionary (start of project). What can I do with constraints?
  2. Ensure every page/screen has a clear and concise call to action.
  3. When considering typography, less is more.

Case Study – If the Moon were only one Pixel

Coming across this beautiful piece of art again, we can see that this is a perfect example for the quote above. Josh Worth creates a fantastic piece of art through the most minimalistic design, sans serif typography and accurate measurements with pixels.

Tips for Visual Grammar

  1. Simplify – Focus on the essentials.
  2. What can you do with constraints?
  3. Focus on re-using elements and minimising visual complexity.

 

Language & Typography 

What questions I should be asking for visitors to my website?

Who are you? (As an individual or Business.)

What are your values?

What’s your mission & purpose?  

What do you hope to achieve?

How will we know if you’re successful?

 

Mini vs BMW

Kyle then showed us two different cars by the same people. I found this really interesting as it shows two different cars; a mini and BMW with too different distinct identities with mini being agile, expressive, dynamic, fun and friendly and BMW being precise, luxurious, stylish, engineered and efficient. This shows how companies and section themselves and create multiple different visually expressive products which can be portrayed through their product, advertisements, tone of voice, etc.

Typography 

Typography is a subject that I really love, especially sans serif fonts as I love the clean, modern and clear understanding of a variety of them. I find it so interesting how the many cool, unique and diverse ways typography can be appropriated and adapted to create meaning and understanding. As Kyle showed us, with 95% of information on the web in written language (Oliver Reichenstein) it is a very important and sometimes misunderstood subject. “Typography is the craft of endowing human language with a durable visual form.” (Robert Bringhurst) I found this quote perfect in describing typography. Its way of communicating not just by written word but also visual form creates almost a blanket of abbreviation for the written word. As from previous research, we can find typography can create different cultural meanings and emotions through a select variety of styles.

In what ways can my chosen typeface interact with my website?

  • Optimise legibility, through the appropriate choices of typefaces.
  • Improve accessibility, by considering the contrast between the foreground and background colours.
  • Improve usability, through considered typographical hierarchy.

For example, we looked at .gov (UK) website and highlighted the reasoning for their decisions on deciphering information, typography and language.

They focused on a few points as this website is the official page of the government they needed to start at user needs, placing heavy emphasis on identifying what those needs are and delivering them. This allowed them to organise the most important content in a hierarchical manner, implementing a quick link navigational route at the top creating and ensuring easy access to the information being displayed. They also focused on clear and consistent language, ensuring users become familiar with the services offered.

Narrative Design 

As designers, we created stories and experiences such as moving through screen to screen with there always being a start (home page), middle (case studies) and end (content). Apps such as Monzo take the user through a onboarding process when the user first starts the app such as how to use your account and what each feature means, this starts slow and steady so it’s easier to read but as the user progresses the content gets faster as they expect the user to be picking up on the pacing and understanding of their app (similar to most movies).

Tips for Narrative Design

  1. Put some thought into how your content is structured and grouped logically.
  2. What is the most important thing that I want people to see here?
  3. What’s the story you are telling about the project at hand?

Pacing 

Pacing is important to digest information for the user, negative space between content such as scrolling down to the next case study. Too much text can make it less appetizing to digest. There must be a balance.

An inverted pyramid shows us how content should be structured:

This can be applied to our case studies such as the critical information at the top; What I did and how I did it > small intro about the app > Background & context > other details

In other words;

  • Start with the information your users absolutely need and ensure this is right upfront.
  • Provide additional information that is helpful, but not critical.
  • Close with the ‘nice to have’ information.

 

Task – Crazy 8’s

For this task, we had to generate 8 wireframes in 8 minutes. Meaning each wireframe per minute is drawn in a box.

I managed to capture to create 8 wireframes within the 8 minutes (Most are condensed due to size limitations).

 

 

This task was really enjoyable to do and it is an interesting way to initiate new ideas as sometimes through quick-paced thinking we can unlock new ideas that can benefit us. It forces ideas out of us through the restriction of time. It is a very clever yet basic way to learn.

Conclusion

Today’s class was very informative, giving me new ideas and aspirations for what goes into web design such as content curation, visual grammar, typography, pacing, etc. This provides a huge relief for me as I feel like my old website needs a revamped with a lot of spacing and structural issues, allowing me to go back into re-structuring a new portfolio website with new vital information and skills.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *