Go Back
In this section I highlighted some of the features I've used the most in Figma and think offer the most benefit in efficiency.
Even though these images are shown in the case studies I chose to include them here to explains their uses within the app while in the case studies I am explaining their content
I find Figma as well as XD super helpful apps in both UX and Ui design
Figma provides already made blank templates to create affinity diagrams, the greatest thing about this feature is how easy it is to create color coded information using different color, digital stickies, and to organize and reorganize as necessary
Affinity diagram
Here we also have the option to create user-flow-charts easily and quickly.
by just clicking preset items we are able to add shapes or arrows depicting all the steps of our users journey
App Flow chart steps
App Flow chart
Low fidelity App screens mockups with connections
These art-boards represent different screens of the app, the blue lines are the connection between pages. These connections serve to test the paths our users will navigate and ensure that our final product offers a conflict free and intuitive flow to complete specified tasks
Low fidelity app prototype, result from connected boards
Sticker sheet as is called in Figma or Design guide in Adobe XD, is one of my favorite features!
This feature increases efficiency by saving a lot of editing time when creating prototypes
Sticker sheet iin Figma
CONNECTED MOCKUP BOARDS
In Figma we can create wireframes, low and high fidelity mockups of our designs as well as connect these art boards to create working prototypes
High Fidelity Prototype final product after the board connections are made
High Fidelity Prototype Screens
Once all of the design assets are in place, the decisions are finalized and with the low fidelity layout to follow, in a few steps we can create a high fidelity design showing the screens of the app needed to complete an order, having done this, Figma lets us make the necessary board connections to create our prototype
Go Back
Very similar to Figma, Adobe XD provides features to help with the creation and design of apps and websites
Sitemap showing Eras Website Organizational Path
Design guide, like Figma's sticker sheet, is a library of assets that enables us to edit multiple instances of a symbol at once by editing the main symbol
Design Guide - Assets
Other similarities are the steps needed to complete and produce a prototype.
Both apps follow the same steps when organizing and connecting the boards to create prototypes
Mobile Prototype Boards names and order
High Fidelity Prototype Screens of the Mobile version
High Fidelity Prototype - Mobile Version
showing a purchase being made
Website Prototype Boards names and order
High Fidelity Website Screens showing connections for prototype
High Fidelity Website Prototype showing a purchase being made
Go Back
When it come to illustrator, PhotoShop, Animate or After Effects, I use them interchangeably, and sometimes all of them for one project, but for the purpose of showing you my capacity in each app I created work done specifically in each app
These are repeat patterns I created using Adobe CC - illustrator
Leopard Print 2
Paisley print with placed flowers
Leopard Print 1
Mixed media print
Mosaic print
Camouflage Print
Victorian print
3D print
Jacquard pattern
VICTORIE is a stick figure character created in illustrator for different purposes. VICTORIE is an ongoing collection of different poses and expressions reflecting different situations
Character poses - Victorie
Go Back
For this project, the initial images were created in Illustrator, some effects and initial animations were executed in Adobe Animate. This is usually my process when I create and/or animate vector images, when working with vector artwork I prefer to animate it in animate, even if I add extra effects in After Effects.
I created this project while coming up with ideas for this website's design scheme, I really like it, but decided on a different path for my design
This theme is a glass world digital game featuring the UX/UI design process
These are animated popping bubbles floating up from the glass world floor, inside the bubbles are the words, Empathy, Test and research as well as user icon images of a user
UX Floating bubbles
Character poses - Victorie
Stick figure unsticking itself from one page and moving to the next. Animate practice
This is one of my VICTORIE's animations also created while brainstorming designs for this website
Go Back
I use Photoshop mostly to clean the subject's backgrounds, work with raster images and compositions, and for textures and realistic themes. Having the ability to use photoshop gives me so much more control over my designs, I find it indispensable and use it in almost all my design projects
This project's original idea was to create a cute pet monthly calendar for a relative
using her dog as the model representing holidays in each month
But as the project started coming together, the idea kept evolving into a new business idea and media outlet
So what started as an idea to make a cute pet calendar slowly evolved into a different and more adventurous business idea! outings and holiday get together for pets! with this new concept in mind I created this prototype of the website using Photoshop and Adobe XD
High Fidelity Website Prototype showing the adventure options for each month
