Week 02

• Content Curation
• User/Job stories
• Visual Grammar and Hi-res Mock-ups
• IP and copyright
• Rick Munroe from Contrast Security

So far you should have:

• Content audit
• Site maps
• Plan content for your site
• Written content

This week – sketching, design of your portfolio

Next week – 3 screens of your portfolio (home, case studies, about) will be a critique of your high res mock-ups

Where does content come from?

• Clients
• Self-generated
• Third party i.e., Wikipedia (never use as a source for writing

Self-generated content – blogs, user research, design.

User generated content – twitter, Youtube. Content that people make, upload etc.

Content curation

Process of sorting through the vast amounts of content in a organised/meaningful way. Early idea of this was a mixtape. They liberated songs from albums and allowed to organise own content

Find, Organise, Share

User and Job Stories

A user story is a way of pinning down what you need to do. What do people need to find out? Ask questions, get answers. (This can be used for any project)

As a person in a particular role, I want to perform an action so that I can achieve my goal.

Example – When I am looking for a placement student I want to find out who they are and what they do so I can recruit the student.

 

• The best content has a purpose.
• It’s not about digital style, but content.
• Case studies will get you jobs.
• Could include contact details.
• Acceptance criteria is where stuff works. e.g. can you find research and discovery phase of project for me? Yes. User and job story works.

Remember to dissect the story: as above, in 3 parts. The 3 part story is the most popular.

Can have user categories.

Goal of user written from user POV and simple user story text can be on one side of index card with the other side filled in with acceptance criteria.

Each user story is a promise of a conversation between stakeholders and teams.

To estimate and prioritise. Three aspects:

1. card – text of US
2. conversation – see above
3. confirmation – us verifying condition of satisfaction

 

Exercise

What do I want my user to do?

Write a user/job story, with 3 part statement i.e. when…I want to… so I can…

Think about… if I was a user of a product

• what would they want to do?
• what would they want to be?
• what would they want to find out?

e.g. portfolio – think about employers, recruiters, students, other designers.

What I came up with

1. When I am looking for a student for placement. I want to find their previous work, so I can desicde if they’re the right fit for the company
2. When I am looking for a UI/UX designer. I want to find out how they come up with design solutions. So, I can decide if they are the right person to work with.

Visual Grammar

All the parts making up a site or an app:

Language and type – narrative design: this is critical as they stand the test of time.

By next week – homepage, case study and about page – mock-ups.

Tips for visual grammar

1. Simplify as much as possible – focus on essentials
2. What can you do with constraints?
3. Focus of re-using elements and minimising complexity

Language and typography

1. Both are important, supplemented by content: photos, videos etc.
2. Language matters. In new project, define it for user perception. Is it going to be first or third person? Super friendly or sombre?
3. This is voice and tone.
4. Who are you? What are your values? What’s the mission purpose? What do you want to achieve? How will we know if you’re successful?

Your words should reflect your brand values, consistency is key

Narrative design

1. Our experiences unfold over time.
2. Moving screen to screen, we create experiences for user.
3. We have a start, middle and end in mind.
4. It’s important to consider the narrative’s rhythm and pacing, and how the narrative works.
5. Learn about narrative from film: Bond films with different actors. ‘Skyfall’ and ‘Spectre’ begin very fast paced but other moments are really slow and steady. Set pieces excite you and capture your attention.

 

Start (home)

Middle (case studies)

End (contact)

Inverted triangle method – comes from journalism

1. Critical information first: start with needed info.
2. Background and context: helpful but not critical.
3. Nice to have: for loyal readers.

Exercise

Start to consider visual grammar of the content for your portfolio site.

– Desktop, Tablet and Mobile mode.

– Hi-res mock-up

– Visual grammar: pick your colour scheme, typography and use that to bring it all together.

– Make your content work for you.

– Be expressive.

Crazy 8’s – 8 ideas in 8 minutes

The confines of Crazy 8s let you come up with really good ideas quickly. It’s recommended doing the exercise a couple of times. Keep sketching these. Take them into Figma. Combine content design and visual design together

 

Summary/Reflection

Enjoyed doing the crazy eight’s as it helped create quick sketches and quick idea generation. Found the lecture helpful for how to curate your work and different elements that make up the written portion of your site.

 

This week’s tasks

• Job/User Stories (we did these in class, just add to blog)
• Think about how you will curate your work, how is the best way to show this
• Moving toward a high-resolution mockup of your portfolio
  • Home, Case Study, About and Contact
  • For Desktop
• highly polished high resolution mockups.
• Pay attention to layout, colour, typography and visual aesthetic.
• It may be useful to create a visual grammar and then use this to build the UI out.
• This must be on your blog by next thursday as we will be doing a review that day

Sketching Ideas

High res Mock-ups

Created these using Figma. Colour is on brand, I think this design shows my brand values, fun, friendly yet professional. This is in preparation for next week’s critique.