Creative Tablet Responsive Logo Design 1

Creative Tablet Responsive Logo Design for Mobile

Creative Tablet Responsive Logo Design for Mobile

I like designing logos, but things have changed since the mobile website has become part of the everyday use. Now you have to think about how the logo will look in a smaller size and will it be responsive?

Responsive just means that it can be viewed correctly in any mobile device. In other words it will change its shape to fit the devices window. Many website are responsive and you can tell by squeezing the page into a smaller browser window. If it changes shape it is responsive. The Creative Tablet site is responsive.

[opmIf is_user_logged_in()]

I know you need to have the logo created in a ‘vector’ format for the best results, but now it also has to be responsive depending on how it is designed.

The demands of responsive web design apply to logos as much as any other web graphics. If your logo design is going to be primarily used on websites and apps, consider how to make it responsive. Simply reducing or enlarging a logo according to its context isn’t always the best solution. As the content area and device capabilities increase, you may need to add extra details to the logo graphic itself.

Thank you to **Anthony Calzadilla who understands the process and for allowing us to use the following:

Mobile-First Responsive Websites provide users with the best possible experience afforded by their devices. Just as the UI and content adapts to device widths and network capabilities. So should the website logo have adaptive qualities.

Simply reducing or enlarging a logo according to its context isn’t always the best solution. As the content area and device capabilities increase, designers are justified in adding additional details to the logo graphic itself.

I wanted to explore this idea and decided to create a little demo.

Explanation:
Using media queries and CSS3 properties we can add subtle shadows and effects to our logo as the screen size expands. This technique will work in most modern browsers. On older browsers it will simply fall back to the flat logo image. Which isn’t bad.

Creative Tablet Responsive Logo Design 1
Side-by-side comparison of the logo before / after applying CSS3 effects.

I decided to use an inline SVG image for the logo because your logo is an image, not an h1. I used an SVG graphic because we need the logo to scale flawlessly.

This logo starts at a mobile-first size and scales up at 3 breakpoints. (The breakpoints are unimportant for our purposes and were chosen at random.) It will be small enough to fit on mobile devices. In this first version we have the logo mark and the logo text aligned on a single line. The logo text is the same size as the cross-section of the logo mark.

Creative Tablet Responsive Logo Design 2
Break Point Break Down
BREAK POINT 1: On this one we keep the size of the logo text the same but we increase the size of the logo-mark so that now the logo-text aligns with the heart within the logo mark instead of the cross-section.

Creative Tablet Responsive Logo Design 3
BREAK POINT 2: We add some shadow on the bottom of the logo. And a highlight at the top. We stack the logo text and increase the font-size of the top line so that it’s wider than the bottom line.

Creative Tablet Responsive Logo Design 4
BREAK POINT 3: Finally we use CSS3 effects to create a faux 3D effect on the logo.*Note* Chunky 3d CSS3 text-effect originally by @mdo.

Take a look at the demo and move your browser window around.
Anthony’s website is here and you can Tweet him at: @clzd

Well, that helps me with understanding the concept of responsive logo design. Now I will have to implement it into the clients design. If you have any questions or comments please let me know.

We have a new PDF for Members Only that gives you insight into Logo designs.

John
The Creative Tablet

[/opmIf]

To access the rest of this article and receive exclusive content, Please Click Here.

Learn
				</div>
		

		
		
		
		
				
<div id=

Leave a Reply