Midterm - Mobile Design Assets

Files

You can download the starter files from brightspace at the start of your lab class in week 7. You must use the starter files.

Folder Structure:

midterm-starter-files/
├── submission-1/
└── submission-2/

Introduction

For your midterm project, you'll craft a comprehensive suite of web design assets, encompassing everything from optimized images to bespoke icons, leveraging the capabilities of both Adobe Photoshop and Illustrator. This project is designed to challenge your design skills and creativity, encouraging you to create visually appealing and functional digital assets for a hypothetical mobile.

You will utilize Adobe Photoshop for image optimization and manipulation, and Adobe Illustrator for creating vector-based graphics such as icons and logos. The assets you develop, including web banners, icons, animated loaders, and a logo design, should follow a consistent theme and aesthetic to ensure cohesiveness across entire experience.

Submission 1:

1. Web Banners

Submission 2:

2. Logo Design
3. UI Icon Set
4. Animated Loader

Web Banners

For the Web Banner portion of your midterm, you will be creating a series of banners that scale to five different sizes. The challenge is to design your banners in such a way that the main subject and accompanying text remain visible and impactful across all sizes, despite the varying aspect ratios.

Examples Here are high-level example, of scaling for different sizes, they do not meet the requirements of the task.

Instructions

1. Using the file provided, select a minimum of 3 images per artboard that aligns with your chosen website theme and merge them into a cohesive banner/composition. (e.g., if your theme is gardening, select an images related to gardening).
2. Utilize the tools we covered during the Photoshop portion of the course, such as Masking and Layer Adjustments, to make non-destructive edits that maintain flexibility for future changes.
3. Add a short and impactful message or slogan making sure the text is legible and maintains proper hierarchy, even when scaled down to smaller sizes.
4. Think about where a call-to-action (CTA) button may be added in the future. Consider the necessary spacing to allow for the button placement without obstructing the main subject or text.
5. Export your banners as .PNGs at their respective sizes.

Although we did not explore the Text tool in Photoshop, it functions similar to Illustrators Text tool.

File organization:

submission-1/
├── web-banner/
│   ├── web-banner.psd
│   └── exports/
│       ├── web-banner-1200x600.png
│       ├── tablet-banner-768x400.png
│       ├── mobile-banner-480x200.png
│       ├── web-banner-300x600.png
│       └── web-banner-300x250.png

Logo Design

Create a logo for your hypothetical website. This logo should encapsulate your website's theme and be memorable to visitors.

Instructions:

1. Brainstorm ideas that symbolize your website's theme and purpose.
2. Sketch several logo concepts before selecting the most promising one.
3. Design your logo using Adobe Illustrator, ensuring it is scalable and versatile for different uses.
4. Choose colors and fonts (if needed) that align with your website's design language.
5. Once you have completed your logo integrate the logo into the desktop version of your web banner (1200x600). Place them strategically so they complement the banner's design while ensuring the text and images are still clear and impactful.
6. Export your logo as and .SVG and your compiled web banner as a .PNG file using Export for Screens.

File organization:

submission-2/
├── ui-icon-set/
├── animated-loader/
└── logo-design/
    ├── logo.ai
    └── exports/
        ├── logo.svg
        └── web-banner.png

UI Icon Set

Create a set of 5 custom icons that will be used throughout your website. These should be relevant to your website's theme and designed for clarity and easy recognition. Ensure that your icons feel like a cohesive set.

Instructions:

1. Start by creating your icons within the 24x24px artboard. Each artboard is labeled with the icon you are to create. Ensure you utilize the keylines and grid to maintain proper alignment and consistency in the proportions of your icons.
2. Once you have created your 24x24px icons, scale them to 48x48px. Make sure your stroke weights, corner radii, and other elements scale proportionally. Using the keylines and grid will help ensure your icons scale accurately and remain visually consistent.
3. Finishing steps:
   • Organize your layers by grouping and labeling them properly for easier management.
   • Make sure to save your .ai file regularly.
   • Hide the keyline layers before exporting your icons.
   • Export your 24x24 artboards using the Export for Screens dialogue as SVGs for optimal quality.

File organization:

submission-2/
├── ui-icon-set/
│   ├── ui-icon.ai
│   └── exports/
│       ├── user_24x24.svg
│       ├── settings_24x24.svg
│       ├── notifications_24x24.svg
│       ├── delete_24x24.svg
│       └── home_24x24.svg
├── animated-loader/
└── logo-design/

Animated Loader

Design an animated loader that will be displayed while your website's content is loading. This should be thematic and engaging.

You can do much better 😄

Instructions:

1. Conceptualize an animation that reflects your website's theme and can entertain or engage users during load times.
2. Utilize Adobe Illustrator to design your loader. Pay attention to optimizing your layers for web export during this process.
3. Export your loader design as SVG using the 'Export as...' option in Illustrator. Make sure your file is properly optimized for web use.
4. Embed the SVG code directly into the index.html file of your project. This step involves copying the exported SVG code into the HTML file.
5. Clean up the SVG code by removing any unnecessary xml tags. Also, ensure that all styles are externalized to a CSS file rather than being inline within the SVG code.
6. Craft a CSS animation sequence that integrates several keyframes, creating a compelling and engaging motion effect.

File organization:

submission-2/
├── ui-icon-set/
├── animated-loader/
│   ├── loader.ai
│   ├── index.html
│   └── css/
│       └── main.css
└── logo-design/

Submission

Submission 1:

Section 011: February 21st @7:00pm
Section 012: February 20th @6:00pm

• By the end of today's Lab class, you will make your fist submission on Brightspace.
• Compress submission-1 folder and upload it to Brightspace

Submission 2:

Section 010: February 23rd @11:59pm
Section 020: February 23rd @11:59pm

• Submit the remaining assets ( UI icon set, animated loader, logo design) through Brightspace.
• Compress submission-2 folder and upload it to Brightspace

Submission on Brightspace

• Open BS LMS and go to the Activities > Assignments page.
• Go to Midterm: Submission 1 or Midterm: Submission 2 depending on the submission number.
• Upload your compressed folder on the assignment page in BS LMS and click the submit button.