Angel Larson Design

Tag: design

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

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

  • Getting Into Photography

    In fall 2023, I took a digital photography class. I was not at all prepared for what this class would be like, or what I would be learning. Overall though, it was a very fun and challenging experience that I would recommend to anyone interested in photography or design.

    I am fortunate that my older sister is a professional photographer and has a backup camera that I can use. Before, she never trusted me with her camera. When I told her I was taking a digital photography class though, she was excited to let me borrow her equipment and camera. I have been using her Cannon T6i Rebel Camera, which includes a variety of lenses, multiple camera batteries, a large and small tripod, light reflectors, camera bag, sd cards, and a black & white backdrop. She did require me to get her some new lens covers and I bought a white card, along with some lens cleaners.

    Working with an expensive pieces of equipment, you must make sure to store your camera and lenses properly. The lens caps and camera cover also insure that minimal dust/debris will get into your equipment, making it last longer. It was very daunting working with this equipment at first, as you also have to make sure not to drop anything and keep it away from wetness. With the cannon, you can also turn the screen inwards when you are not using it.

    After my sister explained all the buttons on the camera to me and how to use it properly, I still had no idea how to take an ideal photo. The digital photography class was what taught me the basic skills and knowledge I needed to progress my photography skills. We first started by learning the basics about exposure, and how it is achieved through shutter speed, ISO, and aperture. It is critical to learn about these concepts as well as white balance in order to achieve different creative photo styles/effects and become a master of photography.

    Digital photography not only helps you to take beautiful and unique photos but also can help you in a manner of other design applications. These applications include, commercial photography, landscape photography, portrait photography, digital imaging, and creating unique content for videos, ads, layouts, or websites. On this blog I will be sharing the things I have learned in this digital photography class as well as other classes and context that this design and technical knowledge has become useful. Topics will include: depth of field, white balance, high key images, low key images, HDR composites, macro photography, motion blur, portrait lighting, underwater photography, sunset silhouettes, and civil twilight photography.

    Thank you to Sylvia Larson for letting me continue to use her camera and equipment. I have learned so much and photography can be so much fun! I fully intend to buy this equipment from her before I graduate, and continue to experiment more with photography for my own personal interest as well as creative projects. That you to my professor for being a great guide and influence on our learning journey as students, by providing knowledge and experiences in photography for us. At the start I really didn’t think I would be cut out for the digital photography class, but over time I have become a lot more confident in my skills and abilities.