Class project 1:

Miller Shoes Website - image 1 - student project

Class Project 2:

Miller Shoes Website - image 2 - student project

Class Project 3:

Miller Shoes Website - image 3 - student project

Class Project 4:

Screenshot from phone:

Miller Shoes Website - image 4 - student project

Class Project 5:

Smart animation with arrow

Miller Shoes Website - image 5 - student project

Smart animation with check and circle

Miller Shoes Website - image 6 - student project

Class Project 6:

Moodboard

Miller Shoes Website - image 7 - student project

Class Project 7:

Colors (and Columns)

Miller Shoes Website - image 8 - student project

Class Project 8:

Text Styles (and colors again)

Miller Shoes Website - image 9 - student project

Home and product page screenshots

Miller Shoes Website - image 10 - student project

Class Project 9:

Icons

Miller Shoes Website - image 11 - student project

Homepage Screen (mobile website landing page):

Miller Shoes Website - image 12 - student project

Class Project 10: Images

Brief/Persona

Miller Shoes Website - image 13 - student project

Mobile website screens with images

Miller Shoes Website - image 14 - student project

Class Project 11: Buttons

Miller Shoes Website - image 15 - student project

Class Project 12: Responsive Design

Mobile menu list

Miller Shoes Website - image 16 - student project

Feature cards for desktop version

Miller Shoes Website - image 17 - student project

Review cards

Miller Shoes Website - image 18 - student project

Bonus - resize review card horizontally

Miller Shoes Website - image 19 - student project

Miller Shoes Website - image 20 - student project

Project 13: Effects

Background Blur

Miller Shoes Website - image 21 - student project

Drop shadow on Buy Now button and Neumorphic design on search bar

Miller Shoes Website - image 22 - student project

Class Project 14: Components

Miller Shoes Website - image 23 - student project

Class Project 15: Variants

Miller Shoes Website - image 24 - student project

Class Project 15: Form

Research

Miller Shoes Website - image 25 - student project

Form and component set created together in the lesson

Miller Shoes Website - image 26 - student project

New version of form and component set based on research

Miller Shoes Website - image 28 - student project

To learn more about UI for forms, here's a link to an article that goes more in-depth about the best practices for forms: https://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0

Class Project 16: Prototyping

Miller Shoes Website - image 30 - student project

Miller Shoes Website - image 31 - student project

Miller Shoes Website - image 32 - student project

Class Project 17: My Second Animation

Screenshot of animation frames

Miller Shoes Website - image 33 - student project

Link to animation video on vimeo

https://vimeo.com/manage/videos/811021183

Class Project 18: Page Transition

Screenshot of page transition

Miller Shoes Website - image 34 - student project

Link of page transition video on vimeo

https://vimeo.com/manage/videos/811416345

Class Project 19: Micro Interaction

Miller Shoes Website - image 35 - student project

Link to micro interaction video on vimeo

https://vimeo.com/manage/videos/811801574

Class Project 20: Finish Your Design (final design!)

Mobile version screens

Miller Shoes Website - image 37 - student project

Miller Shoes Website - image 38 - student project

Miller Shoes Website - image 39 - student project

Miller Shoes Website - image 40 - student project

Miller Shoes Website - image 41 - student project

Miller Shoes Website - image 42 - student project

Desktop version screens

Miller Shoes Website - image 43 - student project

Miller Shoes Website - image 44 - student project

Miller Shoes Website - image 45 - student project

Miller Shoes Website - image 46 - student project

Miller Shoes Website - image 47 - student project

Miller Shoes Website - image 48 - student project

Esther Miller

--

1