Angel Larson Design

Category: Digital Media

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

  • Creating a Composition of Three Photos (Triptych)

    A triptych is a composition of three photos. The goal is too make a composition of photos that are stronger as a whole than on their own. There are guidelines to making sure that your triptych is a unified, pleasing composition.

    • Echo and rhythm between the subject and the background.
    • Make sure the side panels compliment their position.
    • Make sure the lighting is consistent between the three photos.
    • Changing the colors of the photos can help to highlight the subjects and unity of the pictures.
    • One very clear idea should connect all of the images.
    • Don’t let one image bring the rest down.
    • Keep the textures, details, and differences of the photos in mind.
    • Point the viewers’ eye back to the center.
    • Pay attention to the shapes, implied shapes, and lines.
    • Unify the colors (monochromatic, black and white, cool, or warm)
    • Use a black, white or grey background, that doesn’t distract from the photos.
    • Keep all of your images horizontal or vertical, so they will fit better in the composition.

    How to Create a Triptych in Photoshop

    1. Open a new file in Photoshop
      • Photo
      • Landscape or Portrait
      • 8″ x 10″ or 8″ x 12″
    2. Select the three images you want to use in Adobe Bridge
      • Tools
      • Photoshop
      • Load Photos into Photoshop Layers.
    3. Save under the desired name as a Photoshop file.
    4. Use the rectangle tool to make a frame where a photo will fit
      • Use a dark fill color
      • Command J (Mac) or Control J (Windows) to duplicate the square frame (do this twice)
      • Make sure the frames are equally spaced apart and within the image.
    5. Select the box where you want the first image to go
      • Use the move tool to drag the image from one document to the triptych document
      • Option click between the shape and image layer to make a clipping mask
      • Command T (Mac) or Control T (Windows) to free transform the image within the shape. This will let you edit and resize the image within the shape as well.
      • Select the shape
      • Add the layer style
      • bevel and emboss
      • bevel going down (this will make it look like the photo has been cut out)
      • Layer
      • Layer style
      • Copy
      • Paste to other shapes.
    6. Add any other effects to the images you would like (Monochromatic, Black & White, Cool Tone, Warm Tone, etc.)

    This is a triptych I created, with Jeeps being the inspiration. I went with a black background and black & white photos. If I where to redo this composition, I would have went with the photos in portrait orientation and have the background in landscape, so that the two jeeps on the sids would be pointing in towards the middle.

    These jeeps are all different colors, so thats why I made the choice to do black and white, to tie the colors together. The photos where all taken on the same day, so the lighting is similar. The colors and subjects give off a vintage feel, focusing on the appreciation for this type of vehicle. I used this as a gift for my dad because he loves jeeps.

    As you can see, the composition of the photos together is stronger than any one of the photos and could make a nice gift, advertisement, or a stronger layout to sell your photography prints.

  • High Key vs Low Key Images in Photography

    I will be explaining what high key and low key images are in photography and how to achieve the desired effect with your camera.

    In simple terms white on white is high key, while black on black is low key.

    High Key Image
    The high key image will have low contrast, a controlling white color and minimal shadows. The high key image conveys happiness, cleanness, purity, and positive emotions.

    Low Key Image
    The low key image will have high contrast, a controlling black color, very hard contour lines, and strong highlights. The low key image conveys drama, mystery, and tension.

    Capturing a High Key Image
    To create a high key or low key image on your camera, you will need to put your camera in manual mode. In manual mode, you will be able to increase or decrease your exposure so that the image is under exposed (low key) or over exposed (high key). The key is to look at your camera’s histogram (shows you the dynamic range of the photo) to make sure that the light in the photo is at the very high range of lightness or very low range of lightness, without being over exposed or under exposed.

    High Key Image with Histogram

    As you can see in the top right corner, the colors are all located on the 1/3 area closest to the right of the histogram. There is no warnings about the picture being over exposed. This image was captured outside in the daytime, with white paper for a background. I made sure to take the photo when the sun was hiding behind some clouds, so that the shadows wouldn’t be too harsh.

    Low Key Image with Histogram

    As you can see in the top right corner, the colors are all located on the 1/3 area closest to the left of the histogram. There is no warnings about the picture being under exposed. This photo was taken outside during the day, with black paper for a background. I made sure to take this photo when the sun was out, so their would be harsh shadows.

    I hope you where able to understand the differences of high key and low key photography after reading this post, and are able to shoot your own photos with these techniques!

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