Logo Process
Step 1: Evaluate the brand
Step 2: Research the industry
Step 3. Make a list of where the logo will be used
Step 4. Sketch a variety of logo concepts
Step 5. Create digital drafts in vector software
Step 6. Refine your logo design with feedback
Step 7. Prepare and deliver the final logo files
Characteristics of a Successful Logo
Source
Simple: Make it easy to understand and identify.
Memorable: A good logo should be distinctive enough to be memorable.
Ageless: The best logos are timeless and survive changing trends.
Reliable: Flexibility and scalability are key to using a logo across different platforms,
mediums, and sizes.
Thoughtful: Every detail of a logo should be considered and honed to effectively symbolize
the quality and usefulness of a brand.
Sites for logo inspo
[Link]
[Link]
Things to keep in mind:
1. Create a moodboard—a mosaic of themes, feelings, and visual ideas.
2. Work on logo on light and dark backgrounds as well as in black and white.
3. Avoid colors that diminish the logo visibility.
4. Keep color psychology in mind.
5. Always Use Your Company or Product Name at first if you want to stand out as a
brand. Source
6. Think of your icon as a symbol rather than a picture. Source
7. Your logo text should always be readable.
8. Size up your icon in comparison to the text.
Logo Variations
1. Size variations
2. Color variations
3. Logo type variations
Logo Sizes
● For websites logo size should be under 200 KB and the recommended logo
dimensions for a web page are 250 x 150 px. Source
● For logos in headers left alignment is better and centre also works.
Here are the standard measurements for websites:
1. Vertical layout:
● 160 x 160 px
2. Horizontal layout:
● 250 x 150 px
● 350 x 75 px
● 400 x 100 px
What is a Favicon?
A favicon is a small icon or collection of icons associated with a website, web page, or web
application. It’s displayed within the browser tabs and bookmarks bar. Source
● Favicon needs to be square.
● For ICO format the recommended sizes are 16x16, 32x32, and 48x48 pixels.
● For PNG format the recommended sizes are 16x16 and 32x32, but browsers will
accept any square PNG image.
Splash Screen
The customizable elements of a splash screen consist of; Source
● the app icon must be a vector drawable. It can be static or animated.
recommended animation duration is < = 1,000 milliseconds (1)
● icon background is optional and useful if you need more contrast between the icon
and the background (2)
● window background consists of a single opaque color (4)
Splash Screen Sizes
● Branded image: this must be 200×80 dp.
● App icon with an icon background: this must be 240×240 dp and fit within a circle
160 dp in diameter.
● App icon without an icon background: this must be 288×288 dp and fit within a
circle 192 dp in diameter.
For example, if the full size of an image is 300×300 dp, the icon needs to fit within a circle
with a diameter of 200 dp. Everything outside the circle turns invisible. (1 dp equals 1/160 of
inch or 0.15875 mm)
Best practices for designing a splash screen
1. It should not last for more than 3 seconds Source.
Note: If your application takes longer than 3 seconds to load, use a skeleton screen
instead of a splash screen.
2. Simple and memorable: use simple but bold designs, keep a balance. Don’t go too
far with animations.
3. Use progress bars to reduce wait time anxiety. They let users know how long they
need to wait which reduces the chances of them abandoning your app.
Examples:
[Link]
[Link]
[Link]
