Angel Larson Design

Tag: marketing

  • 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 3

    Now that you have gathered your research data, you will need to organize the data and analyze it. If you don’t have enough responses, you may need to make more efforts to gather the data. You could also try another method to gather data.

    1. Enter your responses into excel.
    2. Turn the data into a table, so that you can re-organize it easily. This is easy to do if there where set responses that the respondents had to fill out. For example yes or no questions, multiple choice questions, or questions where you had to select only one answer. If your respondents where able to fill in the blank to answer the questions, you will have to analyze each response one by one.
    3. Filter the table so that you can see only your target audiences responses. For example, if you are creating an app targeted towards females, organize the list so that it only shows the responses from female or so that they are all together at the top.
    4. You can narrow down your list further as well. If you are targeting your app or website towards females, aged 18-25, who live on their own, and make $30,000-$50,000 per year, you will want to organize the responses in the table so it is only showing the responses from those people.
    5. Once you have narrowed down the responses to only show those who your app or website is targeted towards, analyze their responses carefully. What are they looking for in your intended app or website? What are they like? what are their needs and desires? Are they likely to use an app or website? What do they aspire for?
    6. Once you have analyzed these details from your research, you can move on to creating user personas.

  • 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.

  • Choosing the Right Online File Format

    There are three main file types to focus on for saving images that are optimized for web viewing: JPEG, GIF, and PNG. Each file type has its own strengths and weaknesses and it’ very important to know and keep these in mind when saving an image.

    GIF (Graphic Interchange Format)

    • GIFs are best for images with large, flat areas of color and type.
    • That have a max of 256 colors (8-bit) and greyscale (8-bit).
    • GIFs support animation and background transparency.
    • Lossless LZW compression shrinks the image data without removing detail (reduce more or equal to 60%).

      GIFs were most popular many years ago, but are still an option for small image sizes where only a few colors are needed. Much like PNG-8, GIF files are restricted to only 256 colors. Because of this, GIFs should never be used for product photos. GIFs can be used for logos with a limited number of colors and line art. They are also beneficial in adding movement to an advertisement.

    JPEG (Joint Photographic Experts Group)

    • JPEGs are the best format for photographs and graphics that have a lot of color and gradient blends
    • They can have millions (16+) of colors (24-bit) and greyscale (8-bit).
    • JPEGs do not support animation or transparency.
    • They have lossy compression meaning that some image data is lost after the compression.

      JPGs (JPEGs) are the most popular file type for images on the web. JPEGs are perfect for photographs, or complex images containing lots of colors, shadows, gradients, or complex patterns. JPEGs handle these types of images well because they have a huge color palate to work with.

      JPEGs can also be saved in high quality, low quality, or anywhere in between. This allows you to adjust and save the image exactly how you want, balancing quality and file size.

      JPEGs are the most popular file format online and is commonly used for product images, photographs, and homepage hero banners/images.

    PNG (Portable Network Graphic)

    • PNGs are recommended for replacing GIFs by the W3C, they support images with large flat areas of color and type.
    • PNG-8 has a maximum of 256 colors (8-bit) and greyscale (8-bit).
      PNG-24 can have millions of colors (48-bit).
    • No animation is supported, but background transparency is supported.
    • They have lossless LZW compression which shrinks image data without removing the detail. They can reduce file size up to 60%.

      PNGs are another popular file format online. In Adobe Photoshop, you have the option to save PNGs as PNG-8 or PNG-24.

      PNG-8 has a very limited color palate of 256 colors. While the image size is smaller, this wont be a good option for complex images and photographs.

      PNG-24 provides a much higher quality image but comes at the cost of a larger file size.

      Most importantly, PNGs can handle transparency. This is one of the biggest differentiation points between PNGs and JPEGs.

      PNGs are many times used for logos because they nearly always require transparency, you will likely want a logo to be high quality, and logos are a small part of your website overall (requiring a smaller file size).


    Saving Images Properly in Photoshop

    1. Save the Right Dimensions
      You must open your image in Photoshop and view it at 100%. This allows you to view the image at the exact size it will be displayed on a computer monitor when you save the image for web.
    2. Save Images for Web
      It’s possible to reduce the file size without significantly reducing the quality of your images.
      • Use Photoshop’s “Save for Web” function.
      • Open your image in Photoshop and go to File>Export>Save for Web (Legacy)
      • A window will appear which will allow you to choose your export file format.

    You can see the importance of choosing the right format for online viewing, based color, size, animation, and transparency needs. I hope that this posts helps you to better understand the online file formats better and what applications they are best suited for.