UX Prototyping:
Sketching

Mick McQuaid

2025-01-28

Week THREE

Recap

Sketches

\(\langle\) Pause to look at graphical-intros.pdf \(\rangle\)

• sketches: mostly terrific, raises issue of how to sharpen your skills
• sketches: some appeared to use iPad—is that the best approach?
• sketches: whiteboard is still the target, but for how long?
• sketches: different styles for graphical self-intro vs good design
• three things: act fast, think slow, energize yourself

Accessibility Reports

• Well done!
• Please don’t double space any documents you give me
• NWS is a very important resource for all Americans: interesting to see some of its shortcomings!
• Two groups did ESPN and took very different approaches
• My takeaway is that you all take accessibility very seriously
• Do you feel like you can integrate accessibility into your design process?

project ideas

previous semester idea rejected, then reconsidered

• presented idea was to help women seeking abortions in Texas
• rejected because it seemed like more of a privacy and security issue than a UX issue
• reconsidered because I then researched it and found UX issues
• e.g., websites to help undocumented migrants assume literacy and often English literacy
• two synergistic groups: drivers and patients

project inspiration from prior semester

• Who wants to use a permanent exhibit and why?
• Who wants to avoid visiting the museum and why? (When people say they’re too busy, it suggests that they think the museum is a waste of time)

orange sky

sugar shack

unbreakable

pause for project ideas

mood boards

What is a mood board?

• Collage
• Images
• Typography
• Color palettes
• Conveys a strong impression
• Can be checked by asking people what they see

Why a mood board, according to 99designs

• Inspiration
• Affirmation
• Guidance
• Communication

Images (again 99designs)

Both images convey melancholy but uplifted, somehow.

Color palettes (again 99designs)

Visual metaphors (from 99designs)

And more

• Words
• Letters
• Textures
• Patterns
• Shapes

Result

Milanote Mood Board

THere are even apps for designing mood boards, such as Milanote.

Mood Board for a Law Firm

People make mood boards for all kinds of things, even law firms!

〈make your own mood board〉

design inspiration

• Where did you get the inspiration for your mood board?
• Where do you get inspiration in general?
• Where do you want to get inspiration?

A whole new mind

• Keep a sketchbook
• Read design magazines
• Be like Karim
• Become a design detective
• Visit a design museum

Keep a sketchbook

Read design magazines

Linkrot, anyone?

• Ambidextrous (not found)
• Dwell (www.dwell.com)
• How (went bankrupt 2019)
• i-D (bought but exists i-d.vice.com)
• Metropolis (metropolismag.com)
• O (oprah.com)
• Print (www.printmag.com)
• Real Simple (www.realsimple.com)

Be like Karim

Karim directives (excerpt)

• Don’t specialize
• Before giving birth to anything physical, ask yourself if you have created an original idea, an original concept, if there is any real value in what you disseminate.
• Know everything about the history of your profession and then forget it all when you design something new.
• Never say “I could have done that” because you didn’t.
• Consume experiences, not things.

• Normal is not good.
• There are three types of beings—those who create culture, those who buy culture, and those who don’t give a shit about culture. Move between the first two.
• Think extensively, not intensively.
• Experience is the most important part of living, and the ex- change of ideas and human contact is all life really is. Space and objects can encourage increased experiences or distract from our experiences.
• Here and now is all we got

More Karim

Become a design detective

• Visit open houses
• Make it a group project
• Compare notes at the end regarding current design trends

Visit a design museum

I visited the Palacio de Bella Artes in Mexico City in 2012. It’s not a design museum specifically, but it did give me a lot of design inspiration nonetheless.

At the time, they were featuring an exhibition on Edvard Münch, as well as this exhibition about a trip by Borges to Mexico.

The museum features a lot of work by Diego Rivera, including this admittedly overexposed mural. This overexposed mural is a good example of why you need to keep documenting things and learning as you go. I used to overexpose a lot more often than I do now. Also, I’ve stuck with basically the same camera, just different iterations of it.

This mural by Diego Rivera was in the same room as the previous one.

And this mural was in the street, at a construction site.

On the same trip, I visited some of the homes of Frida Kahlo and Diego Rivera which have been converted into museums. I think this is the only one where I got pictures.

This is the view you see when you first enter the gate.

This is Frida Kahlo’s desk. I love to see the working environments of artists and I took a number of photographs of her workspace, a few of which follow. Workspaces in general are fascinating because we spend so much time in them.

A closeup of one of her sketchbooks …

Here are the pastels and inks on the right side of her desk.

Here are some pigments and brushes sitting on the left.

Here is part of Frida’s kitchen. Notice how she’s made it an exciting place to be. The eye of the artist isn’t just on the canvas, but on every aspect of life. Contrast this with the home of Einstein which is now a museum and reminds us that he was mostly living in his head.

This is part of a larger exhibit, where this shows her color palette for the project. The notes on the left discuss the colors she used.

This is a view of Kidzania, a working city for children with branches in Mexico City, Dallas, and, I think, a few other places. Here the children are getting dressed in preparation to work as painters.

Sketching

• Easy enough to say just do it
• Nothing works like conscientious practice
• Once inspired, what keeps you going?
• Try Dodson (2006)
• Try the five minute plan

Crazy eights

How to do it

• Choose a site or app to work on
• Make a list of screens needed
• Fold a large sheet into 8 squares
• Quickly draw a screen on each square (one minute per screen)
• Can be one screen eight times or eight diff screens or a combo

Develop your own shorthand

For example

• a boxed \(\times\) means a photo
• a circle means an icon
• a straight line means a headline
• a squiggly line means body copy

\(\langle\) Pause for video \(\rangle\)

〈do your own crazy eights〉

Use this bash code to give one minute to each panel; change 60 to 120 to give two minutes per panel

for i in $(seq 0 8); do printf "\a\n$i"; sleep 60; done

milestone 2

References

Dodson, Bert. 2006. Keys to Drawing with Imagination. Cincinnati, OH: North Light.

END

Colophon

This slideshow was produced using quarto

Fonts are League Gothic and Lato