Class project 01 - Create your own brief:

Class Projects - Figma Essentials - image 1 - student project

Class project 02 - Wireframe:

Class Projects - Figma Essentials - image 2 - student project

Class project 03 - Icons:

Class Projects - Figma Essentials - image 3 - student project

Class project 04 - Testing on your phone:

Class Projects - Figma Essentials - image 4 - student project

See link for video: https://vimeo.com/900335205?

Class project 05 - My first animation:

Class Projects - Figma Essentials - image 5 - student project

Class Project 06 - Moodboard:

Class Projects - Figma Essentials - image 6 - student project

Class Project 07 - Colors & Columns:

Class Projects - Figma Essentials - image 7 - student project

Class Project 08 - Text:

Class Projects - Figma Essentials - image 8 - student project

Class Project 09 - Making stuff:

I used Adobe Illustrator to create these icons. I found it very helpful to keep the designs within 48 x 48 square as recommended and keeping a consistent stroke.

Class Projects - Figma Essentials - image 9 - student project

Class Project 10 - Images:

I used the the Unsplash plug-in to source these images. I also researched indigenous designers that specialize in surfboard and surf life style design, see OTIS CAREY X BILLABONG GALLERY for more information.

Class Projects - Figma Essentials - image 10 - student project

Class Projects - Figma Essentials - image 11 - student project

Class Project 11 - Buttons:

Class Projects - Figma Essentials - image 12 - student project

Class Project 12 - Responsive Design:

This section of the course really helped me understand rapid prototyping and how you can apply it with responsive design methods.

Class Projects - Figma Essentials - image 13 - student project

Class Project 13 - Effects:

I made use of background blur in my card design. My neumorphic button I feel could use more work and intend to spend more time getting a better understanding the process for designing neumorphic assets.

Class Projects - Figma Essentials - image 14 - student project

Class Project 14 - Components:

Class Projects - Figma Essentials - image 15 - student project

Class Project 15 - Variants:

Class Projects - Figma Essentials - image 16 - student project

Class Project 16 - Form:

Building forms in Figma helped me visualize the user experience. I would like to improve the my existing form design by doing a bit more research and delving into the Figma community.

Class Projects - Figma Essentials - image 17 - student project

Class Project 17 - Prototyping:

Prototyping in Figma helped me to further visualize the user flow and interactions within my design. It's an effective way to map out the journey users will take through an application or website. I personally really enjoyed this section.

Class Projects - Figma Essentials - image 18 - student project

Class Projects - Figma Essentials - image 19 - student project

Class Project 18 - My Second Animation:

Class Projects - Figma Essentials - image 20 - student project

Class Projects - Figma Essentials - image 21 - student project

See the link for the video: https://vimeo.com/901764637?

Class Project 19 - Page transition:

Seamless page transitions contribute to a more engaging and enjoyable user experience. Users appreciate a fluid and intuitive flow between different sections of an application or website. I can not wait to apply transitions to my fully realized project.

Class Projects - Figma Essentials - image 22 - student project

Class Projects - Figma Essentials - image 23 - student project

Class Project 20 - Micro interaction:

Micro interactions make a more engaging and delightful user experience. I am still working through my wave interaction but can see how it could really make my a project unique and memorable.

Class Projects - Figma Essentials - image 24 - student project

Class Projects - Figma Essentials - image 25 - student project

Leroy Brown

UX Design / Front End Web Developer

--

10