This document discusses responsive design through icons and logos. It begins with an overview of responsive design principles and how adaptation is key to survival. Section 2 discusses responsive icon design, including pros and cons. Section 3 covers responsive logos, with examples and techniques like stacking and simplification. Section 4 predicts the future of interfaces responding to factors like movement, location and health. The conclusion encourages prototyping, collaboration and being disruptive to initiate responsive design projects.

1. Reimagining responsive design
through icons & logos
- DevDK 2015 -
@joe_harrison joeharrison.co.uk

2. LDN
@joe_harrison joeharrison.co.uk

3. ODE
@joe_harrison joeharrison.co.uk

4. As a digital designer I’m continually inspired by the way in
which we use flexible design solutions all over the world.

5. Adaptation is a process that
all living things do to survive
- Adaptation -

6. Maeklong Market

7. youtube.com/watch?v=Dsi_ItK-j30

8. Photograph by Michael Wolf
Hong Kong

9. youtube.com/watch?v=f-iFJ3ncIDo

10. Flexible design is engrained in our design process, and
businesses and brands are fully on board.

11. - Section 1 -
Overview
- Section 2 -
Responsive icons
- Section 3 -
Responsive logos
- Section 4 -
The future

12. Overview
- Section 1 -

14. Multiple screen sizes
Multiple resolutions
New touch interactions
Image credit - Brad Frost

15. Adapt, respond,
overcome
- A shift in thinking -

16. - Ethan Marcotte -

18. GIFs by Froont

19. But are flexible layouts the
only solution?
What about the details?

20. “The details are not the
details. They make the design”
- Charles Eames -

21. Responsive icons
- Section 2 -

22. Side projects

23. Icons by hour

27. Too
simplified
Less
legible

28. Initial sketch, May 2013

29. A mobile-first approach to icon design, starting with a
small, simple icon and adding detail as they get bigger

30. 5em 10em 20em 30em
40em 50em 60em 70em

31. @media (max-width: 5em) {
#icon_1 {background-position:center 0px}
}
@media (max-width: 10em) {
#icon_2 {background-position:center -300px}
}
@media (max-width: 20em) {
#icon_3 {background-position:center -600px}
}
..

35. responsiveicons.co.uk

36. Over 20,000 views
in 24 hours
30,000
15,000
Oct 20 Oct 27

41. (Article by Ilya Pukhalski)

42. Pros & Cons

43. The cons of responsive icons
3. Continuity
2. Implementation
1. Time

44. Desiging multiple sizes
takes a lot longer
- Time -

45. More complicated
to build
- Implementation -

46. - Continuity -
Confusion due to
different styles

47. Pros

48. The pros of responsive icons
1. Flexible
2. Legible
3. Future-proof

49. 1. Flexible

50. 1. Flexible

51. 2. Legible

52. 2. Legible

53. 3. Future-proof

54. useiconic.com

55. Responsive logos
- Section 2 -

56. Some logos are too detailed to be used
effectively on websites at small sizes.

57. The most effective logos can be recognised
in a simple iconic mark.

58. But sometimes we want to communicate different
levels of information depending on the context

59. What if we could combine
responsive principles with
logo design?
- A shift in thinking -

61. Using responsive logos means maximum impact and
legibility can be achieved for at different sizes.

65. responsivelogos.co.uk

66. Over 50,000 views
in 24 hours
60,000
30,000
Jul 17 Jul 21

69. Ministry of type

72. Techniques
- Responsive logos -

73. By stacking logo elements you
reduce the width it takes up.
1. Stacking

74. 2. Simplification
Simplifying certain details creates a more
legible solution for smaller screens.

75. 3. Reduction
By removing certain elements more impact
can be generated at smaller sizes.

76. Some real examples..
- Responsive logos -

77. Identity for Blloon by EdenSpiekermann

78. Identity for Bureau347 by Build

79. Identity for Bureau347 by Build

80. Identity for Bureau347 by Build

81. 1. Think about how it can scale for
multiple sizes
2. Use SVG for additional flexibility
3. Use stacking, simplification and
reduction for small sizes
If your making a responsive logo..

82. The future
- Section 4 -

83. Interfaces will become
smarter and more in-tune
with real human needs
- The future -

84. Running
@media (accelerometer: running) {
#body {font-size:3em}
}
Movement-responsive
elements

85. Walking
@media (accelerometer: walking) {
#body {font-size:2em}
}
Movement-responsive
elements

86. Sitting
@media (accelerometer: sitting) {
#body {font-size:1em}
}
Movement-responsive
elements

87. Distance from eyes
@media (proximity: 50cm) {
#weather_simple {display:block}
}
Proximity-responsive
elements

88. Distance from eyes Proximity-responsive
elements
@media (proximity: 20cm) {
#weather_detailed {display:block}
}

89. Moscow
Shanghai
@media (country: china) {
#logo {background-position:center -50px}
}
Boston
@media (country: usa) {
#logo {background-position:center 0px}
}
@media (country: russia) {
#logo {background-position:center -100px}
}
Location-responsive
elements

90. Moscow
Shanghai
@media (country: china) {
#logo {background-position:center -50px}
}
Boston
@media (country:
#logo {background-position:center 0px
}
@media (country: russia) {
#logo {background-position:center -100px}
}
Location-responsive
elements

91. Moscow
Shanghai
@media (country: china) {
#logo {background-position:center -50px}
}
Boston
@media (country:
#logo {background-position:center 0px
}
@media (country: russia) {
#logo {background-position:center -100px}
}
Location-responsive
elements

92. Health-responsive media queries
@media (heartrate: 120bmp) {
#video {width:100%}
}
@media (visual_acuity: 20/200) {
#header {font-size:24pt}
}
@media (age_detect: 67) {
#button {width:200px}
}

93. Responsive
to health
Responsive
to movement
Responsive
to location

94. - Section 1 -
Overview
- Section 2 -
Responsive icons
- Section 3 -
Responsive logos
- Section 4 -
The future

95. 1. Initiate side projects
2. Prototype & collaborate
3. Be disruptive

96. Mange tak.
@joe_harrison joeharrison.co.uk

97. Any questions?
@joe_harrison joeharrison.co.uk
Get in touch..