A web designer's day involves picking an app to redesign, researching competitors through competitive analysis, creating mood boards for visual inspiration, and making wireframes as a blueprint. The designer presented information on user experience (UX) versus user interface (UI) design, discussed the difference between websites and web apps, and provided tips on choosing a project and gathering inspiration from sites like Pinterest, Dribbble, and Unsplash. Students were then guided through making their own mood boards and wireframes to lay the groundwork for redesigning an app.

1. A Day in the Life of
a Web Designer

2. ● Introductions
● Picking an App
● Competitive Analysis
● Making Mood Boards
● Creating Wireframes
The Plan
Today’s agenda

3. About Ms. Cook
TURN TO THE PERSON NEXT TO
YOU AND INTRODUCE YOURSELF
• What’s your name? Age? School?
• What is your favorite website or app?
• Present the person next to you to the rest of the
group!
Icebreaker

4. Question
What does a designer do?

5. ● A creative professional who creates
visuals, graphics, and concepts for apps,
brands, products, ads and so much
more!
● Designers can specialize in just one
thing (like illustration) or have a wide
array of skills (like visual design,
copywriting, and even coding)
What is a designer?

6. ● Web designers wear many hats
● In some companies, designers tend to be
more specialized in creating the visual
designs that developers bring to life on
the web
● In other companies, designers might help
with research, content development,
motion design, user experience or code,
in addition to the visual design.
What can a web designer do?

7. What is the difference between UX and UI?
UX = User eXperience
UI = User Interface

9. ● User experience design refers to creating the
interactions and general workflow of an
application.
● Instead of focusing on how the screen looks,
experience design focuses on how a user will
complete a task using the UI.
● Typically designers will create wireframes
and prototypes to show how the application
will be organized.
UX = User Experience

10. UI vs UX
● UI= User Interface
● User Interface design refers to the visual
interface that a user interacts with.
● The UI includes the text, imagery, buttons,
form fields and other components that
appear on the screen.
UI = User Interface

11. A few you might
recognize…

12. A few you might recognize

13. A few you might recognize

14. ● Websites generally serve as a source of
information for users. These sites don’t
depend on users interacting with them to
generate content.
● A good example is TechGirlz.org
Websites vs Web apps

15. ● Web Apps usually depend on users
interacting with them to generate content.
● These sites are dynamic, meaning content is
ever changing depending on who is using it.
● Web apps frequently require user accounts
● Examples include Facebook and Pinterest.
Websites vs Web Apps

16. Ideas for getting
started
● Make a list of apps or websites that you use
frequently
● Brainstorm some ways that the experience
might be made better
● Choose one aspect of your app/website that
you will focus on re-designing (example:
messaging on instagram)
Choosing your app

17. Competitive Analysis
● Do some research into products similar to
the chosen app or site. Put together a short
survey of the competitor's site/app to show
examples of how to potentially solve the
problems of your chosen site/app
● Capture screenshots and upload them to
your Pinterest board
About Ms. CookDo your research

18. Let’s take a break

19. Mood Boards
● A mood board is a collection of visuals to
illustrate a certain aesthetic or style
● Photos, illustrations, patterns that show a
consistent style.
● Mood boards for websites can also include color
swatches, typefaces, and interface elements from
other websites/apps.
About Ms. CookGet visual inspiration

20. About Ms. CookMood Board Examples

21. About Ms. CookMood Board Examples

22. About Ms. CookMood Board Examples

23. About Ms. CookUsing a mood board

24. Creating your
moodboard
● Write down some key adjectives to help
you create a theme.
● Gather some inspiration! It could be
color swatches, screenshots from other
websites, photography, illustration.
Anything visual that helps you
communicate your theme.
● Put it in a Pinterest Board
Make a moodboard

25. ● Pinterest
● Google
● Dribbble.com
● Behance.net
● Abuzeedo.com
● Awwwards.com
● Siteinspire.com
● Unsplash.com
● Pexels.com
Best Spots to find inspiration

26. Wireframes 101
● The blueprint of a visual design
● Gather all required elements to figure
out a layout and where every element
will live on the screen.
● Focus on the elements of the screen
and not how elements look
● Can be as simple as a sketch or as
refined as a digital wireframe
Laying the groundwork

27. Examples of wireframes

28. ● You’ve got two options:
○ Sketch with pen & paper
○ If you’re feeling comfortable with
learning a new program, make
your wireframes in Figma.
● Or, do a combination of both! Sketch
out all your ideas on paper and choose
the best to be created in Figma.
Creating a wireframe

29. Make your
wireframes!

30. Thank you!

31. ● Figma
● Mural
● Pinterest
● Dribbble.com
● Behance.net
● Abuzeedo.com
● Awwwards.com
● Siteinspire.com
● Unsplash.com
● Pexels.com
About Ms. CookResources