You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

Oct 07

Logo design process of Scroll magazine

2008 at 12.55 pm posted by Veerle Pieters

Today we are going to talk a little about a recent logo design I did but first a little background info. On June 25th Maxine Sherrin, one of the founders of Web Directions, asked me if I would be interested in designing the first magazine for their web conferences. I was thrilled by this invite and also honored they asked me. The tought alone, to design a magazine for print for a client on the other side of the world sounded very exotic and challenging. Since I know both John and Maxine pretty well I didn’t need extra time to think about it. My answer was yes of course…

The name of this magazine is Scroll. People who've attended Web Directions South held at the end of September have had a chance to hold the magazine in their hands. I haven't, but a copy has been sent my way and I'm very curious to see and feel it.

The logo design brief

Brand mantra

Scroll is a collectable 64 pages magazine for people who love web design and who are intrigued by the endless possibilities of the web. Each edition of Scroll will be tied into a Web Directions conference. The content of Scroll would be articles and stories by web designers, developers and thinkers, detailed conference session descriptions and speaker bios, micro articles/mini photo essays relating to web life, and sponsor advertising. Scroll is a magazine that has to evoke a feeling of excitement. It should be beautiful, elegant, timeless and sophisticated.

Audience

It's a magazine for web designers and developers looking to learn the very latest, and quite sophisticated, thinking on web techniques and technologies, as well as visions for the future of the web.

Look and feel

On the question to describe the look and feel using adjectives or short phrases, my client mentioned: timeless/classic, elegant, minimal, concise, sophisticated, warm, lush, luxurious, tasteful, graceful, refined, and collectable.

Timing

As for timing, my deadline was to complete the entire magazine by August 15th.

My sketches and thinking process

One of the first things I always do when I start a logo design job is sketching. The other thing I do is analyzing: analyzing the letters in the name and their shape, looking for ways to do something creative with them. The fact that the name of the logo is very compact is of course a plus. My attention went to the 's' the 'o' and the double 'l' at the end.

Secondly I was thinking of the meaning of the name and I thought of scrollbar. Then again that thought was there for only a few minutes because if you picture scrolling in your mind, you think of scrollbars. To me this was a dead end and not the right angle to approach a logo like this. Scrollbars are sometimes associated in a not so positive way of browsing the web, plus there is no way you can translate this into a logo. My thinking was to leave the meaning and go for a pure typographic styled logo.

Scroll logo design doodles

There were 2 of these 4 sketches (see image above) that I though had potential. My thinking was that the top left one was OK but not good enough to proceed and play further with. The one on the bottom left felt a bit too blocky and less legible. Also, I don't see any possibilities to do something special with the 's', 'o' or double 'l'. The logos on the right let me do just that. With the top right one I can play with the 's' and maybe try out even more different things. With the other one I was thinking I could play with the length of the double 'l' and have them go all the way to the top of the magazine, creating a more vertical effect using a condensed typeface.

The Illustrator phase

Once I have made my decision which sketches have potential I fire up my Illustrator.

Logo version 1

For the first logo I didn't start with any typeface, I just drew the letters using the Ellipse tool or Pen tool. First I drew the black parts using a tick stroke. Then I added a thin white stroke on top using the Appearance palette. Wait a minute, this is not a tutorial ;)

Once I drew the letters separately I start playing with the position and transition between them. In my sketch I already played with that idea, but a sketch can sometimes give another impression and isn't always a bullet proof representation of the outcome. In my Illustrator version I use black and white. My logo has a black fill. My sketch uses an outline, so the 's' can be distinct from the 'c', same for the 'o' that overlaps the first 'l'. With an all black fill this might not work very well.

Next step was pure experimentation until I found a well balanced and compact logo. The white centered line helps to make the logo more legible and elegant. It makes the logo look minimal, modern and yet timeless at the same time. The thickness of the stroke gives the logo enough weight and visibility, just perfect for the cover of a magazine or maybe a t-shirt.

The Illustrator phase of Scroll logo version 1

These were my 4 steps to the final design
  • 1) my initial design with the 'o' touching the double 'l' and the 'r' connected to the 'o'
  • 2) reshaping 'c'
  • 3) moving the 's' on top of the 'c'
  • 4) connecting the 'c' to the 'o'
Logo version 2

For the second version I was thinking of using a condensed typeface. I chose to go for the FF Rosetta and add my own personal touch, by tweaking the 's' and 'r' just a bit and making the double 'l' longer.

The Illustrator phase of Scroll logo version 2

Next I was thinking of adding a little icon that looks a bit like the shape of a leaf, but then very abstract. It's a square repeating the combination of round and sharp corners exactly like the letters. It would be a great fit to put the issue number in.

Logo design proposals

Since this logo's main purpose is to fit on the cover of a magazine I thought I present it to my client using a fictive cover photo. Depending on the cover illustration or photo I thought of using the logo either in black or in white.

Scroll logo design proposals presented on the cover of the magazine

  • 1) design proposals
  • 2) final version with actual cover of issue number 1 (illustration by Carla Hackett)

Logo version 2 is elegant but compared to version 1 it has less impact in my opinion. The image shows 3 different cover layouts and were part of a set of template pages that I showed John and Maxine for my first proposal. This was without a doubt one of the most exciting projects I've worked on the past couple of months and John and Maxine are amazing people to work with. More about the magazine layout process itself in one of my later articles, I promise. So stay tuned :) If you can't wait you can check out the Scroll Magazine website and order a copy.


45served

gravatar

1

permalink this comment Karanpreet Tue Oct 7, 2008 at 02.17 pm

Hi Veerle,

It gave a light to do things more professionally, rather than just being limited with computer choices of available fonts, brushes, etc…

Sometimes, I get stuck in the creative process, and really dont understand why?

I got the answer by looking at your article.

Thank you

Kind Regards,

Karanpreet


gravatar

2

permalink this comment Bobbi-lee Tue Oct 7, 2008 at 02.46 pm

When I think of scroll I think of an actual scroll (the paper document scroll) not scrollbars.
I like the end result!


gravatar

3

permalink this comment Geert De Deckere Tue Oct 7, 2008 at 03.04 pm

Wow! I really do like the logo. It seems like you were able to put that whole list of “look-and-feel-adjectives” into it. A slick piece of work, Veerle.

What I like less about the cover of the magazine, though, is that a completely white background was chosen. I think the logo works better as white on a coloured background. Maybe for the next issue. ;)


gravatar

4

permalink this comment Jeff Tue Oct 7, 2008 at 03.06 pm

Nice, I appreciate you taking us through the process, very useful.  Thanks.


gravatar

5

permalink this comment Helen Tue Oct 7, 2008 at 03.21 pm

Fantastic piece of work Veerle! I have a copy from the WDS08 conference, and being a long-time follower of your blog my ears pricked up when I heard you’d designed it. I definitely like the 1st version of the logo over the 2nd - more of a motif and more impact. As always, nice to see your train of thought in the design process.


gravatar

6

permalink this comment Adam Wiggall Tue Oct 7, 2008 at 03.28 pm

Beautiful work as ever Veerle, thanks for the insight.


gravatar

7

permalink this comment Patrick Haney Tue Oct 7, 2008 at 04.02 pm

Great work, Veerle. The Scroll logo is solid, bold, smooth, and yet very simple. Plus the “SC” looks great as a favicon for the website.

It’s always interesting to hear other designers talk about their process. I pretty much do the same things you do for logo work, except that I use Fireworks instead of Illustrator (I know, it’s sacreligious…).


gravatar

8

permalink this comment Gerasimos Tue Oct 7, 2008 at 04.10 pm

I didn’t have to read “Scroll”. The shape by itself says Scroll. Amazing piece of work. Thank you for sharing with us the process.


gravatar

9

permalink this comment NetOperator Wibby Tue Oct 7, 2008 at 04.16 pm

This was an informative read and it was interesting to see your thought process on logo creation and such. Thanks for sharing this with us. ;)


gravatar

10

permalink this comment Haree Tue Oct 7, 2008 at 08.10 pm

:-) Nice logo. Congrats. And thank you for explaining the whole process…


gravatar

11

permalink this comment cnc137 Tue Oct 7, 2008 at 09.57 pm

Thank you for letting us know your thought process and how you came up with the logo.  It was very interesting to think about what I would’ve come up while reading the article compared to what you came up with.  I really like both of your logos.

I agree with Geert De Deckere in that the all white cover is kind of plain looking compared to some of your other samples.  I like the illustration of the bird and cloud and maybe it would’ve looked better if it had a white cloud with a sky blue color background to add some color.

You may have answered this in a different article, but I was wondering if you use a digital tablet to draw in Illustrator or do you just use your mouse? 

If you do use a digital tablet, which one is it or which one would you recommend?


gravatar

12

permalink this comment Aaron M Gustafson Wed Oct 8, 2008 at 01.51 am

Great job on the logo Veerle. I can’t wait to get my hands on a copy either.


gravatar

13

permalink this comment Chris Lienert Wed Oct 8, 2008 at 02.04 am

Flipping through my copy of Scroll, I was immediately impressed by the design so it was no surprise to see you were responsible. Nice work!


gravatar

14

permalink this comment Michael Short Wed Oct 8, 2008 at 02.14 am

Hey Veerle,

thanks for the article, I love hearing about how other people’s design processes and your logos were fantastic,  I liked the first one the most :-)

Michael


gravatar

15

permalink this comment Dainis Graveris Wed Oct 8, 2008 at 02.16 am

I really enjoy these kind of articles - showing logo creating process - You have created eye catching logo too. Simple, yet great!


gravatar

16

permalink this comment John Allsopp Wed Oct 8, 2008 at 02.27 am

Thanks so much for the design itself Veerle, and for the detailed article about its development. Just a quick note to those reading, you can actually purchase the magazine online (and it even features an article by Veerle on her favourite typeface).


gravatar

17

permalink this comment Carla Hackett Wed Oct 8, 2008 at 02.44 am

Hi Veerle!
Beautiful work on the magazine. It’s great to see your process for the logo, it fits just perfick.
The magazine feels and looks lovely… the stock really makes it. I’m sure you are excited to have the finished product in your hands! Awesome work :)


gravatar

18

permalink this comment orez Wed Oct 8, 2008 at 12.55 pm

Great job veerle! Like always… u are very influent on me, and my way of working.

U already convinced to go for expression engine etc… And now I definately will order a copy of this magazine.

U make the belgian designers proud ;)


gravatar

19

permalink this comment Veerle Pieters Wed Oct 8, 2008 at 01.03 pm

Wow! Thank you all for commenting so positively :)

Geert De Deckere said:

What I like less about the cover of the magazine, though, is that a completely white background was chosen. I think the logo works better as white on a coloured background. Maybe for the next issue. ;)

I agree that the logo in negative (white on color) feels a bit stronger, but for this issue it wouldn’t have been correct to change the background. The white is part of the illustration and because of this it doesn’t loose its message or its impact, at least that’s how I feel about it. Who knows next issue might be a full bleed colorful photo with the logo in white on top ;)

John Allsopp said:

Thanks so much for the design itself Veerle, and for the detailed article about its development.

The honor was all mine! Thank you for laying your trust in my hands for this project. We conquered the time-zone and distance :)

Carla Hackett said:

Beautiful work on the magazine. ...

Thank you :) I love your illustration: simple, smart and witty, just perfect for issue nr. 1 :)


gravatar

20

permalink this comment Ahmed Ghd Wed Oct 8, 2008 at 01.03 pm

Great designs, thanks for the insights into the processes you use, very informative.


gravatar

21

permalink this comment dpiercy Wed Oct 8, 2008 at 02.27 pm

Very nice logo and description of your thought process.

I am curious as to what digital drawing tablet you prefer?  cnc137 asked about this above as well.

Thanks!!!!


gravatar

22

permalink this comment Veerle Pieters Wed Oct 8, 2008 at 02.42 pm

cnc137 and dpiercy said:

If you do use a digital tablet, which one is it or which one would you recommend?

I don’t use one, everything I draw is done with the regular Apple mouse. The thing is, I would love to try one first before I go buy a tablet because it’s too expensive just to take a gamble. The one that I would love to try out is called Cintiq 12WX.


gravatar

23

permalink this comment cnc137 Wed Oct 8, 2008 at 11.11 pm

Thank you for your response on the digital tablet. :)

I also ran across that brand, but they are very expensive and I don’t know how much I would use them when designing.  I would hate to spend $1,000 and have it collect dust over in the corner.

I think I have seen cheaper ones, but will they really work the way we would want them to work?

I wonder if putting the $1,000 towards a Tablet PC would be a better option, but I am not sure how accurate Tablet PCs are when drawing on the screen.


gravatar

24

permalink this comment Steven Tan Thu Oct 9, 2008 at 11.02 am

Hi Veerle,

I am one of the lucky ones to have the first edition. I really like the logo and thanks for sharing the process of creating it.

Cheers,
Steven


gravatar

25

permalink this comment Thomas Thu Oct 9, 2008 at 12.24 pm

Hi Veerle, it’s nice to see how others solve design problems. Thanks for you article.
I was wondering if the four sketches you’re displaying in the picture are the only ones you made? If yes that would be pretty stunning as it looks as if you’ve created the logo in no time. May I ask how much time you spent on the logo design from the first sketches to the final eps?


gravatar

26

permalink this comment Sander Baumann Thu Oct 9, 2008 at 09.50 pm

Great logo design. Thanks for sharing your design proces in order to get to the scroll magazine logo design. Just ordered a limited copy. Thanks.


gravatar

27

permalink this comment Luke Fri Oct 10, 2008 at 04.37 am

Hi Veerle,

Thanks so much for your inspiring posts, Logo design is what i enjoy the most so I particularly enjoyed this post…

On the note of graphics tablets, I was the same, I did not want to buy one just in-case I didn’t like it, However, I had a cheap aiptek one given to me as a thankyou for some free tech support I offered once, it took about a week or two to get the hang of it (it feels quite odd at first) but now there is NO WAY i could go back to a mouse.

It makes the process more ergonomic and since then my designs seem to have a smoother more polished look to them, so I would highly recommend one, from what i have learned, if you are serious, wacom is the only way to go…

I am a student nearing the end of my course but when cash is flowing a bit better i will definitely be investing in a wacom tablet.

you can pick up a cheap one for about $70 (which is about what mine is worth) i would say find one of those and see how you like it.

all the best.

Luke.


gravatar

28

permalink this comment WindInYews Fri Oct 10, 2008 at 07.35 pm

Veerle, that is a very strong, expressive design.  I like that you also prepared a ‘softer voice’ if needed - that is professional.  But your client took the one which has the charge.

Thank you for all you contribute, in showing how you work.  It’s good for many things, for many of us.

A nice weekend, and I remember Belgium with nice thoughts, especially after following your developments.

Regards,
Clive


gravatar

29

permalink this comment John Allsopp Sat Oct 11, 2008 at 11.53 pm

If Veerle doesn’t mind, I’d like to add a few thoughts from the perspective of the client :-)

(first up Veerle is a joy to work with and it should come as a surprise to none of her readers she is the consummate professional.)

Veerle quotes part of our brief

a collectable magazine for people who love web design and who are intrigued by the endless possibilities of the web

One of the key ideas of the magazine was to make what is often temporary and ephemeral (writing on web design and development) into something more permanent.

The idea in our mind was probably more of the “timeless classic” look. So when Veerle first showed us what became our logo, it was very different from what we expected. But, as Maxine and I discussed the logo, we realized it was way better than our original (and rather cliched) idea. There’s a certain 1970’s feel to the logo, which if you grew up in the 1970s like Maxine and I did, feels a bit “retro”. But, increasingly, the design, furniture, cars, and other artifacts from the 1970s are becoming collectable, not as “retro” items, but as classics. And of course the funk and disco music of the 1970’s is at the foundation of so much contemporary music - hip hop, house, electronica of all kinds.

And if you think about the web, a lot of its origins - the internet, SGML, the WIMP pradigm and so on, either originated, or came to fruition in that decade.

In short, the logo captures all these currents.

As you can tell, we love it, and we hope it lives long on the cover of Scroll Magazine!

Thanks so much Veerle.


gravatar

30

permalink this comment Jillian Sands Sun Oct 12, 2008 at 06.29 am

Veerle - As usual, great work! I am surprised that you are not using a tablet. It’s at the top of my wish list. Maybe Santa will notice?

Jillian


gravatar

31

permalink this comment Jennifer Mon Oct 13, 2008 at 09.52 am

Hi Veerle,
thank you for this article. I just had to design my first Logo and its interesting to see how a professional works.
John Allsopp wrote, that you might write about designing the whole magazine. That would be great. I´d love to read such an article.
Regards,
Jennifer


gravatar

32

permalink this comment Veerle Pieters Mon Oct 13, 2008 at 12.18 pm

John Allsopp said:

If Veerle doesn’t mind, I’d like to add a few thoughts from the perspective of the client :-) ....

Thanks so much for mentioning this valuable background information from your side of the story, and for the nice words ;)

Thomas said:

I was wondering if the four sketches you’re displaying in the picture are the only ones you made?

These are indeed the only ones I have sketched. The thing is, while sketching I felt that it took me way more time to sketch the letters (try sketching letters, it’s not that easy) than I would on the computer. I was convinced I should look into the direction of a typographic logo instead of a logo with an icon. So because of this I spend more time experimenting on the Mac than on paper. I can try out different things way faster than I can on paper.


gravatar

33

permalink this comment Flosaurus Mon Oct 13, 2008 at 02.11 pm

Beautiful logo and interesting article !


gravatar

34

permalink this comment Amanda Mon Oct 13, 2008 at 06.59 pm

Congratulations!
Both logos are great! But the first one is the greatest!
Nice design.


gravatar

35

permalink this comment Jackie Tue Oct 14, 2008 at 04.42 am

Veerle -

  You definitely chose the right logo design. It really has impact and style and the continuous curve of the letters, with the black/white contrast and bit of overlap gives the viewer a feeling of movement -  whether it is in a horizontal (in this case) or a vertical direction doesn’t matter - it works well.  I think it makes the viewer want to pick up the magazine and read it - which is an indication right there of a good logo and design! I like the retro/bauhaus feel too!  It is definitely a classic!


gravatar

36

permalink this comment Jonny Haynes Tue Oct 14, 2008 at 09.17 am

Hi Veerle,

A great insight into your thought and design process.

I prefer logo 1 just so you know.

Regards,

Jonny


gravatar

37

permalink this comment jason Tue Oct 14, 2008 at 06.28 pm

You processes have helped me a lot! Thank you for feeding my brain with this post. Very inciteful.


gravatar

38

permalink this comment Marcelo Graciolli Wed Oct 15, 2008 at 06.04 am

Very Beatiful. Muito bom seu trabalho, adorei muito


gravatar

39

permalink this comment Alpha Wed Oct 15, 2008 at 07.00 pm

I am not excited about either one. I think there should have been more thought put into the motion that the word “scroll” conveys.

Maybe an arrow, or the little circle with the two arrows inside it pointing up and down….as influences in the design.


gravatar

40

permalink this comment john hinds Mon Oct 20, 2008 at 09.31 pm

Damn good.


gravatar

41

permalink this comment JR Tue Oct 21, 2008 at 09.31 pm

Thanks for this!
It’s always great to see sketches and how designs evolve into the final product!


gravatar

42

permalink this comment Maxine Sherrin Wed Oct 22, 2008 at 01.27 pm

Thanks for writing this up Veerle! It’s great to have this incite into how you work.

Asking Veerle to do this job for us was almost certainly the best decision I have made this year. We couldn’t be happier with the logo and are very confident that it will serve us well for many years.

I need to take responsibility for the choice of the white/no bleed cover though, as I see this has been questioned a little above. This was my choice as I thought it served the logo extremely well in what we hope will be our iconic first edition. The logo works well on a colored background it’s true: however I think it really shines against the white, and makes a much stronger connection with its origins. It makes me think of a beautiful architecture magazine from the 70s.

Yes, though - expect full bleeds in the future as the magazine really comes into its own :)


gravatar

43

permalink this comment toki Fri Oct 24, 2008 at 08.01 pm

Wow! I really do like the logo.


gravatar

44

permalink this comment Typhoon Thu Oct 30, 2008 at 01.17 pm

Nice!I liked it


gravatar

45

permalink this comment anees k A Tue Nov 4, 2008 at 11.00 am

I am no connoisseur of design but looks like your decision to pick typographical approach resulted in a beauty.

Great Work !



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist