FLS blog

share the best free resources



50 Incredibly Clever Logos With Hidden Meanings

Category : Inspiration · No Comments · by Jan 21st, 2015

If you’re looking for some logo design inspiration look at these ingenious examples that carry dual meanings in their design. These hidden symbols either explain the nature of the business or are a clever visual representation of its name. Superb work by talented artists and designers who must have been high on some ‘good stuff’. Check them out.

clever-hidden-meaning-logo-designs-1

1. Is that a golfer or the profile of a Spartan wearing a helmet?

 

clever-hidden-meaning-logo-designs-2

2. The ‘R’ forms a man riding a bicycle, the orange circle is the front wheel.

 

clever-hidden-meaning-logo-designs-3

3. The hand and leg enclosure forms the map of Australia

 

clever-hidden-meaning-logo-designs-4

4. Two ‘F’s and a plane in the middle

 

clever-hidden-meaning-logo-designs-5

5. The coffee froth forms the shape of the moon (with an eye)

 

clever-hidden-meaning-logo-designs-6

6. The face of a lion, the shape of a bird.

 

clever-hidden-meaning-logo-designs-7

7. The ‘C’s form the eyes of a cat

 

clever-hidden-meaning-logo-designs-8

8. A fish made of code symbols

 

clever-hidden-meaning-logo-designs-9b

9. The two arrows shape a ‘H’ letter

 

clever-hidden-meaning-logo-designs-10

10. The negative spaces between the legs form the buildings of the Bronx

 

clever-hidden-meaning-logo-designs-11

11. Is it a hat or a cup?

 

clever-hidden-meaning-logo-designs-12

12. A reel or a scared face?

 

clever-hidden-meaning-logo-designs-13

13. BarCode 

 

clever-hidden-meaning-logo-designs-14

14. Boundary

 

clever-hidden-meaning-logo-designs-15

15. Is it a bear or a hand?

 

clever-hidden-meaning-logo-designs-16

16. ArtSharks 

 

clever-hidden-meaning-logo-designs-17
17. Freedom

 

clever-hidden-meaning-logo-designs-18
18. Hope for African Children Initiative

 

clever-hidden-meaning-logo-designs-19

19. Baskin Robbins has 31 flavours – check the ‘B’ & the ‘R’

 

clever-hidden-meaning-logo-designs-20

20. Sony Vaio

 

clever-hidden-meaning-logo-designs-21

21. Is it a ‘g’ or a smiling face?

 

clever-hidden-meaning-logo-designs-22

22. The ‘C’ and the ‘o’ form a tyre

 

clever-hidden-meaning-logo-designs-23

23. An eight made up of 8s

 

clever-hidden-meaning-logo-designs-24

24. Ever noticed the arrow in the negative space between the ‘E’ and the ‘x’?

 

clever-hidden-meaning-logo-designs-25

25. The number ‘1’ can be seen between the white ‘F’ and the red waves

 

clever-hidden-meaning-logo-designs-26
26. Kölner Zoo

 

clever-hidden-meaning-logo-designs-27

27. From ‘a’ to ‘z’, Amazon has it all…and a smile.

 

clever-hidden-meaning-logo-designs-28
28. Mister Cutts

 

clever-hidden-meaning-logo-designs-29

29. The Guild of Food Writers logo shows a spoon between the nib of a fountain pen

 

clever-hidden-meaning-logo-designs-30

30. London Symphony Orchestra – Do you see LSO or a conducter with a baton?

 

clever-hidden-meaning-logo-designs-31

31. The peacock in the NBC logo stands for color and pride.

 

clever-hidden-meaning-logo-designs-32

32. The ‘N’ is also a ‘W’ with an arrow pointing north-west

 

clever-hidden-meaning-logo-designs-33

33. Is it a tree or a chimp looking at a lioness?

 

clever-hidden-meaning-logo-designs-34

34. Portrait Photos 

 

clever-hidden-meaning-logo-designs-35

35. The chip forms the word SUN in all directions

 

clever-hidden-meaning-logo-designs-36

36. Ever noticed the bear between the mountain?

 

clever-hidden-meaning-logo-designs-37

37. Food & Wine

 

clever-hidden-meaning-logo-designs-38
38. Twins

 

clever-hidden-meaning-logo-designs-39
39. Elefont

 

clever-hidden-meaning-logo-designs-40

40. One of the first commercially designed ambigram/reversible logos (1969)

 

clever-hidden-meaning-logo-designs-41

41. Birdlove 

 

clever-hidden-meaning-logo-designs-42

42. A plug, socket and an ‘E’ in the middle

 

clever-hidden-meaning-logo-designs-43

43. Is that a film or Frankenstein’s head?

 

clever-hidden-meaning-logo-designs-44

44. There’s a knife in the letter ‘a’

 

clever-hidden-meaning-logo-designs-45

45. Almost forms the % symbol

 

clever-hidden-meaning-logo-designs-46

46. Is that the moon or a golf ball?

 

clever-hidden-meaning-logo-designs-47

47. Handydog

 

clever-hidden-meaning-logo-designs-48
48. Circus of Magazines 

 

clever-hidden-meaning-logo-designs-49
49. Piano Forest

 

clever-hidden-meaning-logo-designs-50

50. Killed

Responsive Design Explained Brilliantly

Category : Help, Inspiration · No Comments · by Nov 28th, 2014

What is responsive design? Most people vaguely understand that it refers to websites that work just as well on desktops as they do on smartphones, but there’s a lot more to it than that, leading to widespread confusion.

But the principles of responsive design aren’t that hard to understand, thanks to this amazing collection of animated GIFs. Spend just a few minutes with these GIFs, and you’ll never be hoightily corrected by a design pedant about “responsive websites” versus “adaptive websites” ever again. In fact, you can be that hoighty pedant!

The GIFs below show many of the basic principles of responsive designs. Responsive designs fluidly expand, whereas adaptive designs hitch as you expand a browser or viewport.

responsive-vs-adaptive-01

Positioning your designs elements using pixels as X,Y coordinates can cause a site designed for one screen to look weird on another. Use relative units, like percent of the screen, instead of static units like pixels.

relative-units-vs-static-units

“As screen sizes become smaller, content starts to take up more vertical space and anything below will be pushed down. It’s called the flow.”

flow-vs-static

“Breakpoints allow the layout to change at predefined points, i.e. having three columns on a desktop, but only one column on a mobile device.”

with-breakpoints-vs-without-breakpoints

By using nesting elements, you can make it so collections of onscreen elements adapt to a shrinking or expanding screen as one, instead of individually.

nested-vs-not-nested

“Sometimes it’s great that content takes up the whole width of a screen, like on a mobile device, but having the same content stretching to the whole width of your TV screen often makes less sense.”

max-width-vx-no-max-width

“Technically there isn’t much of a difference if a project is started from a smaller screen to a bigger screen (mobile first) or vice versa (desktop first). Yet it adds extra limitations and helps you make decisions if you start with mobile first.”

desktop-first-vs-mobile-first

“Does your icon have lot of details and some fancy effects applied? If yes, use a bitmap. If not, consider using a vector image.” A vector image can more properly adapt to different resolutions.

vectors-vs-images

 

Original post: http://blog.froont.com/9-basic-principles-of-responsive-web-design/