Recreate Adobe XD Tutorial “Food Ordering App”

burger app

Earlier this week I watched Adobe MAX Sneak Peeks and it’s super cool! (make me want to work there!) Then I stumbled upon this Adobe XD tutorial because the title has “food” word :p

I found the tutorial interesting. It tells about the new interaction function in Adobe XD: the auto-animate, the drag function, and voice command. In this prototype I made, I only made the build the burger part (did not make the voice command part) because of the time limitation at the time.

The Burger App

Here are the screens I made:

Credits:

  1. Burger vector: https://www.freepik.com/free-vector/hamburguer-ingredients-design_1029754.htm
  2. Icons: flaticon.com

Here’s the video of the prototype

Trial & Error

While working on this design, I faced some problems which now has been solved haha (otherwise, I won’t make this post). Here are some problems I faced, hopefully, it would help anyone that needs it

Q: Why can’t I drag and drop my Ai file to XD?

A: It because the drag function can only be done in Mac while I’m using Windows. Unfortunately, I cannot import Ai file (I don’t know why). I could make it works by converting the file into SVG and drag to Adobe XD windows.

Source: https://theblog.adobe.com/faster-together-opening-illustrator-files-in-adobe-xd

Q: Why the Auto-animate does not work?

The burger supposed to expand when I clicked “Build It” button, but it did not expand (only usual page transition)

A: It happened because I used different names for the burger object in screen 1 and 2. After I edited the object/group name, the auto-animate worked.

Q: Why can’t I drag the cucumber to the right? Why it’s only provide drag left?

A: It’s because I deleted the “cucumber” object in screen 3. I did not set the final position for the draggable object. Apparently, due to that the Adobe XD could not decide which direction the drag should be. Don’t delete it, do this instead:

  1. Group all the burger ingredients, maybe name it to “burger” group. So that the draggable element or “the cucumber” is still part of the screen, not the pasteboard.
  2. Move “the cucumber” to the outside right of the screen (make sure it’s still in “burger” group)

If you want to try..

Below is the link of my Adobe XD file:

For shared – Google Drive

No Description

I do not own the idea, the vector, and icons (I mentioned where you could download them above)

If you have any question, feel free to write in comment section, thanks 🙂

Continue Reading

Foodies – App to Order Food

Hi everyone, this time I want to show my design for #AdobeXDUIKit contest on twitter. The contest was to design a food order app using Restaurant icons from Ana Miminoshvili . This is my first adobe XD contest haha. I did this contest to give myself a design challenge. I know there’re still things to be improved from my design. However for now, I just want to post this 😀

 

This is a clickable prototype of 2 screens. Feel free to try and give some comment 🙂

 

Continue Reading

Adobe Experience Design (XD) Finally Arrived for Windows

Yes, as you have read on the title, Adobe XD finally arrived for windows device 🎉🎉🎉 I was browsing this morning when I stumbled on something about this awaited software (which actually has arrived 2 days ago *cmiiw). 

Finally arrived!!

Wait no more (fortunately I have finished my task), I went to Adobe XD page and downloaded it right away and did my first trial. Well, the installation process was quite fast and the app is light in my laptop. The software interface is so simple, which is nice since the canvas will be filled with many elements of app design. At first, I was a bit confused about how to use it, but thanks to YouTube, I could learn how to use it quickly.
Here’s the YouTube video which helped me to use it~

Adobe Experience Design: Interactive Wireframing

Though all the hoopla around XD has involved finsished designs, let’s not forget XD can be a great tool for creating interactive wireframes and Rapid Prototyping.


Thank you~

I was excited and so happy, I made my first wireframe with this app and also try the interactive prototype 😆😆😆

My first wireframe with Adobe XD

Yaaay!!! Can’t wait to explore this app 😆😆😆

Continue Reading