Introduction: Mobile App Development Using Adobe XD
Howdy, Y'all! I'm Elizabeth Kacerek, a graduating senior in high school and I created this instructable because I noticed a hole in this widely used platform that I could fill. I would have loved this kind of guide when I began my year-long research project on UI/UX/EX software development but sadly I had to find out the hard way how to go about designing an app. This instructable is aimed for both the computer science nerds and for the hobbyists alike. So if you think you have a great idea but don't have the slightest clue how to execute it, take a look at this.
Step 1: Project Plan
This might seem unnecessary at first but typing out a project plan will definitely help you in the long run by defining:
- What you want your app to do specifically (this kept me in my "scope of practice")
- Who the intended audience is
- If there are legal implications possible (mine was a medical app)
- Anything else you think you would need to outline to keep you on task.
I really could not stress this step enough: this preliminary project plan can be easily adapted into many documents you need on hand for future development.
(Note that this is basically your app description for the app store! Score!)
This plan can be a half a page long 5 pages long, or maybe even longer. There's no right or wrong, whatever helps you put your vision to paper.
Step 2: Research, Legal, & Development
One thing I couldn't have guessed at the beginning of my UX design journey is the sheer amount of researching I would be doing. Now don't let this deter you at all, because it certainly discouraged me a bit initially due to just being caught off guard as to just how much I didn't know about this field (which is exactly what we were supposed to research, hence the research project.)
This is the step where you decide if you want to write your code from scratch or utilize one of many mobile application compiling websites. I personally started by thinking I would "just use my advanced" skills in Java to develop this app because I imagined it would be easier than learning to use an app building application. This ended up being a very inefficient and inconvenient way to build my app which caused me to actually end up switching to Adobe XD. I highly recommend looking into this as your main constructive way to map out your app visually with user-friendly prototyping. While this isn't a start to end perfect app builder, it does work well to build the bones of your app so you can easily hand your preliminary design off to a professional developer (preferably one who has the rights to upload to the iTunes store and Google Play store.) I am emphasizing this to bring to your attention that if you use XD, while very useful for planning, the app will not be ready to upload to stores.
Additionally, if through your research you decide you are no longer excited about your app idea anymore not all is lost. With the building process not yet started you can just revert back to your project plan and either adjust, or completely scratch, your original plan.
If there are possible legal requirements for the creator or for the user, this is when you want to find out all of the places that you will need help. It is so much easier to prepare to address these issues now so you can plan for them instead of surprising you. This can possibly cause weeks of delays, ultimately affecting your original timeline.
Step 3: Developer Application (Optional)
Now if you want to officially become a developer with access to the iTunes store, you should fill out the application as soon as possible (There is a $99 fee associated with filing this application). Their application process takes a while until you are accepted. It would be most expeditious if you applied for Apple developer at this point and go through the waiting process while you are still building your app.
Step 4: Software Coding
Now that you have completed the research behind your project, it is now time to begin coding in Adobe XD.
- First thing's first. You want to follow every step of the tutorial (I'm not one for long tutorials but this is imperative to your success with this app I promise).
- Make sure you understand how to add text, pages, pictures, delete objects, reorder screens, and even how to connect your pages.
- Once you're done and understand the ropes you can finally start drafting and coding your app, testing the prototype, and debugging issues!
At this point, you can start using some of the research I've found about various tools and how to make certain things with Adobe creator to enhance your app. However, I definitely recommend going into the search bar to look for specific elements that are unique to your project.
Step 5: Final Stretch/ Development
Congratulations, you have gotten to this point which means you don't have any bugs in your code! From here you should begin beta testing with the goal of not only finding extraneous bugs, but also to get an unbiased opinion on your product. Once your are satisfied with your code, you can begin pushing to development by using outside resources.