DESIGN.
18hrs
Prototyping
Using animations and the prototyping section to make into working concepts.
Learning the Basics
I am very new to Adobe XD so I needed to start from the basics of toolbars and general app navigation.
Main Learning Objectives
Adobe XD
Creating Phone Boards
Another key part was creating the correct sized phone boards to put the work on. I used the iPhone 12 size as this seemed to be the most standard and was similar to my phone aspect ratio.
Navigation
Initially, I found Adobe XD quite different to the other Adobe programmes. However, after the first tutorial, it became much more familiar.
This directed me to the main tools, and use of layers. As well as grouping and labelling items to keep it organised, as it can get messy really quickly.
Adding Toolbards
Finally, I learnt to create toolbars in the programme. These are what you will always see at the top or bottom of your phone screen, and it requires a simple button to be clicked to make it stay still when scrolling.
My Learning Journey
Learning the Basics
1.
Aim: Learning the basics of Adobe XD for creating a Leaf app concept
Learning Method: Youtube
Goal Achieved?
Yes. I created the app concept which included all the features I wanted it to.
Final Results
A clean and well-structured app concept that was ready to be demoed on a phone.
Key Insights/findings
-
Keeping layers organised and grouping obvious groups of items and then labelling
-
Using the align toolbar is crucial for making it look neat
Animations
Through each path connection, you can add an animation like you would see in a normal app on your phone. After watching the Auto-animate tutorial, I decided to stick to the more basic animations within auto-animate but learnt a lot about what was possible.
Prototype Section
Adobe XD has a section made just for joining together different phone screens to create the simulation of clicking through an App.
Concept on Phone
Once I had completed all the connections, I was ready to open the folder in the Adobe XD app on my phone and test it out.
Prototyping
2.
Learning Sources
Goal Achieved?
Yes. The App was almost perfect and created a really useful visual representation of my final project concept.
In the future I would look at improving my animation skills and making the layout even more simplistic.
Final Results
The App worked really smoothly on my phone and was a great way to test my concepts with actual users. The app looked realistic and the animations worked fairly smoothly.
Key Insights/findings
-
Auto-animate is a great new feature but can create some unusual animations - I would spend more time on this in the future
-
When using on my phone, it didn't have the fonts I was using in XD, which made it look slightly different
NEXT TECH
PREVIOUS TECH
NEXT TECH
PREVIOUS TECH
Trial & Error
Using trial and error when applying effects in the app and comparing them when in the phone concept. This took a lot of back and forth but was a good way to learn what worked best.
Youtube Tutorials
Youtube had the best range of tutorials for Adobe XD.
Learning Strategy
Learning Sources
