Angel Larson Design

Category: Adobe XD

  • Designing an App with Adobe XD-Part 8

    Now that you have created the content for your app or website in photoshop and created a shared library with your assets, you can bring everything into Adobe XD.

    Adobe XD is used for designing, prototyping, and sharing app or website designs.

    • Designing
      • With Adobe XD, you are able to have all the different screens (pages) of your app or website all in one place.
      • From the sign-in page, profile, settings, home page, etc., you can have a clear view of all the content that will be on your app or website.
      • You are able to design the content of the pages within Adobe XD, or you can design your content in photoshop and import it into XD as layers. Designing your content in photoshop and then importing it into XD can save you time.
      • Adobe XD works similarly to other Adobe apps in the ways that you can utilize properties, layers, effects, and share libraries.
      • You will want to create a separate page for every button that is clicked in your app or website and every option that is possible to the users.
      • In XD you are able to gain ready made assets or look at examples of other layouts by going to file > Get UI kits. Here you can download already made examples of apps and websites in XD to help to gain icons, and ideas for text sizes, and what pages you will need.
    • Prototyping
      • What makes Adobe XD special is that you can link your pages together to see what button will lead to what outcome. For example, if you click next on an app or web page, it may lead you to a new page, a new box, or make something pop up.
      • You have freedom to decide where the buttons will lead to give your users options while using your app or website or create navigation.
      • You can also press the play button so that you can press the buttons for yourself and make sure they are having the desired effect.
    • Sharing
      • In Adobe XD you can share your website or app prototype through a link. This will allow a potential user, employer, or developer to see your idea and comment on it.
      • Because you are sharing a link, if you update your website or app prototype after sharing it, you can press update link and the link you sent will be updated without having to send a new link.
      • If you send the link in developer view, they will be able to see what assets where used on each page. (colors, font family, font sizes, shapes, images etc.)
      • Adobe XD is perfect for bringing your idea to life so that people can see it before it is coded, and to help make the coding process faster and easier.

  • Designing an App with Adobe XD-Part 7

    Now that you have created a style guide for your app or website, you can start to create the actual content that will be used in your app. This step combines the sketches and assets you have gained to start to bring your vision to life.

    An easy way to do this effectively is with photoshop. The layers in photoshop will show you each individual asset being used in your composition.

    1. Create a photoshop document in the size that the phone/tablet screen of your app or screen size for your website will be.
      • This will make sure that your elements are the exact size, color mode, and resolution they need to be to bring into Adobe XD for your prototype.
      • Make sure your document is in RGB mode and your elements are 72 pixels per inch.
    2. Recreate your sketches, using the elements from your style guide.
      • Recreate each page in your sketches, using text boxes, shapes, images, icons, textures, and colors to bring your ideas to life.
      • Make sure that you use guides to make sure that elements that are in the same place in more than one page are in the right spot. You can use the paste in place option to make sure that elements you copy from one page are in the same exact place in another page.
      • You will not be able to add your videos or sounds at this time but you can save those in a specific folder so that you know where they are. Make sure that all your images, videos, and sounds are made by you, royalty free from online, or properly credited to the person who made them. For things like a keyboard for mobile apps, you can just go online and find an image of the keyboard that will be used to simulate what it will look like when it pops up. There are certain icons that you will be able to get from Adobe XD UI kits, or you can make them yourself.
      • You may want to create separate documents for each page of your app or website, or create them on multiple art boards within the same document.
    3. Add all your elements to a new shared library, specifically made for your app or website.
      • This will help you access your assets easily.
      • Shared libraries in Adobe can be used across different apps.
      • Name all the elements in your library as you go so that you can easily find them later. Do not skip this step! it will help you stay more organized and save you time down the line.

    Once you have your content designed in Photoshop, you can easily import the files into Adobe XD.

  • Designing an App with Adobe XD-Part 6

    Once you have sketched out and planned out your website or app, you can create a style guide to keep track of everything you will need and how to keep your design unified.

    A style guide can be typed, written on paper, or created in a shared library in Adobe. A style guide should include:

    1. Fonts that are going to be used.
    2. The sizes and type of font used for specific instances.
      • Headers
      • Sub Headers
      • Body Copy
      • Quotes
      • Small Body Copy
      • Captions
      • Etc.
    3. The colors you will be using for your app or website.
    4. The logo or logos you are going to use (if you are using one)
    5. Icons (the symbols you can use to represent meanings and/or words) Icons are important because they can identify to the viewer the meaning of something faster than the word itself, they are universal, aesthetic, and take up less space.
    6. The vibe of your app or website that you are going for (for example: light airy, heavy, fantastical, deep, etc.)
    7. The sounds you will be using.
    8. The photos you will be using.
    9. The videos you will be using.

    The style guide will save you time when you are in the execution stage of creating your app or website prototype. By thinking out the necessary details involved in designing your app or website, you can then move onto creating the content of your website.

  • Designing an App with Adobe XD-Part 5

    Now that you have created your user personas for your app or website based on your research data, you can move on to sketching out the different pages. good creative idea needs to have research, sketching, plan, and execution. If you don’t think and plan out your design before you get into the software, you will be struggling a lot more to keep things organized and fulfill your vision. Use the information about what your target audience wants / needs to help you decide what is essential to include in your app or website.

    Make sure that you make your app or website, easy to use, easy to navigate, and to make sense with your data. You will want to plan out each button in your app or website, where it leads to, and the different functions and features you will want to include. Most apps or websites will need a home page, navigation bar, and a profile to save your information. You can use other apps as inspiration in the sketching and planning process but don’t copy someone else’s work!

    1. Plan how many pages you will have.
    2. Plan how users will navigate your app.
    3. Plan if you will be using a logo.
    4. Plan what shapes, colors, textures, text, pictures, graphics, videos, sounds, animations, and icons you will need.
    5. Plan what will be on each page.

    This planning will be time consuming and extensive, but the more thought you put into it, the more polished and thought out your app or website will be. This will save you time down the road also, as you will already have all the decisions made and figured out ahead of time instead of figuring things out as you go.

    Once you have everything sketched and planned out for your app or website, you can create a style guide to keep track of all these details.

  • Designing an App with Adobe XD-Part 4

    Once you have gathered and analyzed your data for your app or website, you can create user personas based on this data. User personas help you to better understand the needs / desires of your target audience. With this real world knowledge you can better design your app or website to fit their needs / desires better. This will make your app or website more appealing to those people.

    1. You will want to create 1 – 3 different personas to characterize your target audience. Your app or website may be targeted to more than one specific type of person.
    2. Use fake names for the personas.
    3. Use pictures from online, or illustrate, what you think the persona would look like. For example if your target audience is mainly 4-50 year old females, you will want to use a picture of a middle aged female for your persona.
    4. Describe the demographics of each persona.
    5. Describe the wants of each persona.
    6. Describe the needs of each persona.
    7. Describe the functions each persona would like to see.

    Creating these user personas of your target audience, based on the research you conducted will help you to back up your design ideas for your app or website. This will be a good guide for you to look back on when you are wondering what specific details of your app should be like. With personas you can base your ideas with facts and either back up your decisions you already made, or subvert your expectations. Your target audience may react in a way you didn’t expect to a certain want or need you thought that they had.

    These are personas I made for an app idea for a personal finance organizer app. I conducted an online survey with google forms and sent it out on SnapChat and Facebook. I gained 67 responses and analyzed them in excel to help me form the user personas.

    The next step after creating your user personas is to create sketches for your app or website.

  • Designing an App with Adobe XD-Part 2

    The next step to designing an app or website with Adobe XD is to conduct real world research to back up your assumptions about what your target audience wants/needs.

    Do this step after you have determined what your app or website will be called, what need / desire it will fill, who will be wanting to use it, what functions it will serve, how you will gather and / or create your content, and what other competition exists that would challenge your design.

    There are a few different ways you could go about this step. The key is to make sure that you are looking where your target audience is.

    1. Survey
      • You could create a survey to gain an idea of what your target audience wants.
      • You could create a physical or digital survey.
      • You can ask questions in the survey that are based on numbers or opinion. For example if you had 100 respondents and 50 are female you can look further into what they answered on the questions if your app or website is designed for females.
    2. Interviews
      • You could conduct in-person, phone, text, or email interviews to gain useful information about your target audience.
      • This will give you a chance to dig deeper into the wants and desires of your target audience and what they think of your ideas.
      • This option may result in people being less forthcoming though, because it is a less anonymous option.
      • The data from this option may take a long time to analyze, but it will give you a deeper understanding of someone than a survey.
    3. Focus Group
      • You could conduct a group interview where you can interview more than one person at once about a topic and gather insight to their wants/desires.
      • This may be hard to do if it is not people you already know, but you could conduct this at a public place and offer cash or free food for participating.
      • Make sure you are interviewing people who fit your target audience.
    4. Second Hand Research
      • You could look into research reports that have already been done for information.
      • Make sure that the information you use is backed up by facts, non-biased, and from a credible source.
      • If you can find raw data about it, you can form your own conclusions on the data.

    Once you have figured out what research method is the most suitable for your needs, create a list of questions that you would like answered. Make sure you include questions about demographics so you can make sure you are basing the decisions for your app or website on the wants/desire of your intended audience. Send out your survey, conduct your interviews, and collect the responses.

  • Designing an App with Adobe XD-Part 1

    Adobe XD is a great tool for bringing an idea for a website or app to life. With XD you are able to design, prototype, and share your ideas with friends, family, employers, or coders.

    When creating a design for an app or website, the first step is to write down your concept and plan of action.

    1. Choose a theme for your app or website. Examples include:
      • Health
      • Excercise
      • Food & Beverage
      • Nature / Outdoors
      • Organization / Time Management
    2. Research. Find a want or need for your app or website.
      • What will fill the need?
      • What type of person needs this?
      • What is their age, gender, income, location, marital status, number of children, etc.
      • Establishing a need or desire for your app or website and what kind of person would use it, helps to figure out what features to include and what will appeal to your target audience.
    3. Come up with a name for your app.
    4. What functions will your app or website provide?
    5. Where will you get the content for your app? (text, images, videos, sounds, etc.)
    6. Is there a similar app or website out their that you would be competing against?

    Answering these questions will take some thought, but taking the time to do these steps will help to guide your decisions when designing the app or website. The next step would be to back up your research with real world data.