The Blog Design, Week 1
Last time I announced I am working on a blog redesign and I showed you a composite of a few sketches I’ve done so far. John made an awesome suggestion in the comments that I should document the work as I’m going and share it with you as it’s happening.
Designers are always interested in another designer’s creative process. So from now until it’s finished, I’ll document my progress on my blog design on Fridays, show you my files and ask for your critiques. This will also be a great work-in-progress case study so you can see my process and it’ll give you the chance for some input on the new design!
The Beginning
Before I ever announced I’d be doing a redesign (and before you all suggested it) I was thinking about what the future site would look like. I knew I wanted to do a redesign, but I never made it a priority. When I can take my time on a project, I like to tumble lots of ideas around in my head for a while before I put anything on paper. Three ideas for the style came to mind: hand-drawn/crafty, letterpress and kind of a grungy 2.0 look.
I envisioned CC being a collection (Curio!), so I thought a scrappy journalistic look would be neat. Like a sketchbook. I know it’s been done, though, so I don’t want to photograph a sketchbook (or create a digital one). I’m a little miffed and a little delighted that Smashing Magazine just published a collection of hand-drawn styles; miffed because now it will look like I’m copying a trend and delighted because now I have some awesome resources for inspiration.
The Creative Process, Step 1: Research
This week I started with a ton of research. I went to sites like Best Web Gallery, and looked at compilation articles like the aforementioned Hand-Drawing Style In Modern Web Design, and also 45 Fresh, Clean and Impressive Designs and 60 Elegant and Visually Appealing Designs and a host of other similar posts on Smashing Magazine, the two very helpful articles on Web Designer Wall, Best of CSS Design 2007 and 33 Artistic Sites (Nick should’ve included his own work here!!). I took screenshots of the sites I liked and made notes about why I liked them. I looked at both layout and style.
The designs above are samples (with my notes) from: Web Designer Wall, Mel Kadel, Casio, Talking of Design and Galuppis.
I’m also keeping my eye out for the details that make a visitor feel like the designer thought about the small things. Vivien had a great article, Focus on the Details and Get Inspired, where she points out things like date styling and bullet points. Definitely worth a look!
The Creative Process, Step 2: Thumbnails
Then *gasp!* I PRINTED my favorites. Why print a website? Because I wanted to take it with me while I moved out of the computer to draw my sketches and think more about the design. I drew on the printouts and made notes with arrows pointing to all the pieces that stood out to me that I liked (can you see my comments among all the other hand-drawn artwork??).
I also figured that my site should be 960 px wide because most monitors today are set at 1024x768 (minus browser intrusion, that leaves about 960 x 570 above the fold), so in Illustrator I created some thumbnail boxes, but because a blog often is unique in that scrolling is expected, I made my box a little longer than the “above the fold” vertical dimension.
Making Thumbnail Templates in Illustrator
- Select the Rectangle Shape Tool
- Single click on the canvas to get the dialog box
- Type in the exact dimensions you want
- Click OK
- Hit E (transform) and while holding shift, grab a corner and scale the box down to fit it in the printable area
I put about six boxes on a page. This way, I don’t have to worry about erasing my thumbnail boxes and I have some straight lines to use for reference (download my thumbnail template).
What I’m Working on Now
Now I’m in the stage of sketching wire frames as well as possible artistic styles. Here is a sample of what I like best so far.
I also need to think about a logo, or at the very least a type treatment for Creative Curio. Any ideas?
So, what do you think? Is this similar to your design process? What’s different? What’s the same? What could I improve?
I’m open to any feedback you would like to give me! Got an idea for the style Creative Curio should take on? Let me know in the comments! Please do keep in mind though, that this is just the initial stage. Actual design critiques will take place a little further down the road.
The Creative Curio Redesign Process
- Ideas for My Blog Design (current post)
- Wire Frames and Experiments
- Researching Alternatives
- Doodles are the Key to Success
- A Return to the Redesign
- Details, Details, Details
Want to follow the Creative Curio Redesign? Subscribe to the feed! You can also receive updates delivered directly to your inbox. And remember, with either subscription (both of which are always free), you also receive a free PDF of the essential Photoshop shortcuts that we’ve talked about here on Creative Curio!
I am at the same initial concept phase of a re-design for my “blog / unnamed freelance design company” as you are.
I like the first of the four sketches you drew best. There is a fine line when it comes to “hand drawn style” which looks good and that which is messy. It could be the perfect case for using Comic Sans MS justifiably :)
It’s great you’re doing a design for your site! Thanks for inviting us along for the process. I think the top right sketch appeals to me the most. The word “Curio” makes me think of old-timey 5&dime stores or something - not sure why. Anyway, my first thought about a type treatment for the logo was to give it sort of a vintage feel.
Great post. Love that top-left sketch. I like those framed boxes in the right-hand column of that sketch too. I like the two column idea. There’s a great article by Andy Rutledge on 2-column verses 3-column. He makes a pretty convincing argument for two, though it’s a real challenge to keep all the important stuff above the fold in a 2-column design; or perhaps it’s not—have to think about that.
Well, can’t wait until next Friday.
I also like the top left sketch, but the top right is a close second. The second one somewhat resembles web designer wall, which is a really neat template.
As for the logo. In the second one you put a star between creative and curio. I thought that was really neat. Maybe using a star for your personal branding.
As for the above the fold thoughts you had. I have read a few articles talking about how the “fold” for the web is just a myth, but it really just comes down to personal preference.
Great start to this whole process Lauren, I can’t wait to read the coming articles. Oh and by the way the Thumbnail Template link 404’d when I clicked it.
Dylan,
Web Designer Wall is an awesome design and I am drawing a lot of inspiration from what Nick has done. Thanks for the idea on the logo! I will definitely explore that concept. Originally the star was there just as a logo placeholder, but maybe it would look good as the actual logo! Thanks for the suggestion.
I was wondering when you’d show up
Oh no! I’m not sure why the tn link didn’t work. I checked it (by clicking on it) last night! And looking at it now, the link is correct, but you’re right, it doesn’t go anywhere. Eek, I’ll have to fix it. Maybe the file was deleted somehow. Thanks for letting me know. Check back in about three hours (I’ll be home and able to get the file about 5 pm, Pacific).
“I am drawing a lot of inspiration from what Nick has done”
If one reads that with negative spin, it sounds like you want to copy a lot of what makes his site good for your own purposes. I am not suggesting that is your intent, more just a general comment on the concept of ‘being inspired’ by other sites.
I had a lengthy paragraph written in here when I realized I was crossing into ‘blog post worthy’ range. I will make sure to credit your post as the “inspiration” for my post when it is published :)
Dylan,
I fixed it. The link was wrong. I had typed it in like a doc relative, but it needed to be an absolute (with the whole URL) because otherwise WP will just tack the link onto the end of the post name… anyway. It works
Jamie,
I do not want to copy Nick’s work (though imitation is the sincerest form of flattery!), but I love his style, his use of color and the handmade quality of his design. It’s very similar to my style and it’s great to see what he’s done with WDW.
@Lauren
Thanks for fixing the link.
@Jamie
I was not trying to imply that Lauren was stealing desing elements from WDW, I meant it had the same feel as WDW. And anyways these are just sketches, in my own experience there is a rather large evolution from my sketches to my actual design. What do you all think?
I enjoy throwing devil’s advocate ideas out there. Could you imagine if visual similarities were as staunchly defended as patents - we’d either have a fugly Internet or a very few mad rich designers. Not that myspace isn’t keeping that a portion of the net fugly for us.
In almost any case of similarities between sites, you could find a handful of other prior art instances where others have done the same. There is an obvious gap between being inspired by something and blatantly ripping it off. You are well on the safe side of that Lauren.
Lauren, where do you get so much time! I really liked the pdf website thing you provided… a good resource.
As for the thumbnail of your rising sun (first one) I think it has been done way to much… Another creative graphic would make it much more original. I like the layout of the bottom left one. Great for when you want to monetize.
Re the design process, it is pretty much the same as mine :)
Fun! I love seeing people’s sketches.
So far I like the top left and bottom right. First one because the banner almost resembles the curve of how some old curio cabinets were built, very clever… though I agree with Jacob the sunlight could go. Instead maybe a subtle hint of a canvas, rust or weathered wood pattern? Are those too overdone as well? The hanging flag and “trimmed” boxes all tie in well though.
I like the bottom (4th) sketch because it’s very linear and boxy, but not in the way you normally associate boxy as it applies to design. Layouts like that really appeal to me because they’re so clean and the content is quickly scannable.
Top right seems a little busy. The final (3rd) concept didn’t register an impression at all, sorry. What a great post though. Thanks for the glimpse into your creative process.
p.s. don’t you hate it when you have an idea and then a well known site publishes something about it and you can’t help but think others might think you’re copying? That happens to me constantly!
Good luck Lauren and I can’t wait to read more follow up posts.
Smashing Magazine has a few good samples in this style too. Also, the previously mentioned post about inspiration is online.
Lauren
I like some of the elements in this site:
http://electricpulp.com/
Not the layout, but the watercolour stuff. I guess collage is another option….It’s been really interesting to read everyone’s comments here. This series is going to be a hit.
John,
Yes! I’ve seen that site, too. I really like the watercolors. What is so attractive about paintings and sketches? Maybe it’s because everything is so overly perfect in this digital world that the imperfect and organic is becoming more appealing. I also like the illustrations of Flavia. Her work is beautiful!
I think this is going to be a great series, too. I’m tempted to write on it as often as I can, instead of just Fridays. I had some great ideas that stemmed from these conversations! I’m very excited about my plans. I just hope they transfer well onto the canvas in Photoshop!
Lauren, I think I’ll follow your steps and will let others behind the designing scene of new InspirationBit
Although, I’m like Charity - now everyone will think that I’m copying you
Just kidding… our design process is similar in some parts and different in others (I’ll elaborate more on that on my blog later). The similar things are that we all look for inspiration, ideas on other well designed blogs, and keep notes of what we liked. The biggest difference is that I tend to keep mostly mental notes, you tend to put them down.
Questions to you: did you decide on whether your site will be centred, or left-aligned (you did mention the fixed width)? What about the footer, will you have one on the site or not? I agree with John, I’m glad you’re going for the two-column layout, I’m getting tired of seeing most blogs designed with three-columns, and especially after reading Andy’s article about and seeing his examples, I became even more Pro two-columns.
I look forward to seeing more sketches from you.
Vivien (ib),
I am stealing John’s idea if anything; he’s the one that suggested it! I’m glad you’ll do the same with your redesign! It’ll be cool to get a glimpse into your creative process
I’m thinking fixed width in the center. Those sites sit the best to my design sense. The ones that are aligned left bug me! I want to push them back over. And these days, with wide screen monitors (I have a 21” wide screen myself) I don’t think the fluid layouts work well. The lines get too long and difficult to read and track through.
I would like to have an extended footer, yes. I think it will help clean up the side bar but I’ll still be able to include the stuff I want to. I haven’t quite decided what will go where, but I’m keeping a list of features I like when I visit other blogs (recent articles, top articles, top commentors, etc).
I think it will be a mainly 2 column, though I’m considering going three on the home page. I haven’t decided whether I like this traditional blog home page or the portal site that’s becoming more popular. I think I don’t quite have enough changing content to justify a portal, but I’ll have to mull over it more.
I’m definitely making the comment box wider and longer. I can read about 5 lines of my super-long comments and I find it annoying! I like how large Jamie’s comment box is (erm, somehow that sounds a little wrong…)
Thanks for your questions, Vivien! They get me thinking about some important details!
Dylan,
Thanks for those resources for footers! I definitely want a footer. I like the “extras” people put down there. I think it would be an appropriate place for the MyBlogLog recent visitor avatars and such; stuff that’s not necessary, but still fun and interesting. I like the SuperfluousBanter footer, too, and I think you’re right, the meta (short “about this blog”) belongs in the footer. Performancing.com had a little blurb about using the index page to help with SEO. I think blogrolls can go in the footer or the sidebar. For me, sidebar = necessary info (recent articles, popular articles, ads, possibly archives), where footer = bonus (blogroll, Flickr stream, etc). I also like Charity’s footer.
You guys have been so helpful!
This is great!
I really like where the drawing is incorporated with photos, e.g. the bird nest one. Too cool!
A site that I love the look of is Surfgarden, where some personal items are incorporated, and the shelf type thing is a cool effect.
All this talk of footers has got me thinking about my own footer, which at present is something of a non-event.
kristarella,
I think the business angle of a portal site would be the direction I would go if I were to do that, but I’m not really looking for freelance work atm. Maybe later, at which point it’ll probably be time for another design anyway. I’ve got some more ideas since Friday (well, Thursday night, really). I’ll be eager to share them with everyone! I love this conversation. Now how to harness this commenting power for all my other posts…
Yeah, I’m going to try to take the lazy way out of coding and let the hubby do it. He’s better at that anyway
Erm, bird nest? Did I miss something?
John,
Maybe you can join the club and document your design process, too :P
Umm, there was a site on one of the smashing magazine articles where the main attraction was a bird nest… let me find it… there we go.
Hmm, now that I look at the site itself it might just be a really realistic drawing, but I guess my original thought of a photo merging into drawing is still cool.
kristarella,
Ah! I see now. I like the artwork on his site, too, but he doesn’t need to include an animation in between every section. I hate waiting!
Agreed - the “wow” factor quickly wears off when you have to wait for stuff. It lasts a bit longer by just using css.
kristarella,
I agree. Plus there’s the bookmarking capabilities, accessibility and SEO that comes with using HTML/CSS instead of Flash.
I do the same, especially with the sketches. Great article here. Keep up the great work.
Panther,
Thanks! And welcome to Creative Curio. Feel free to look around some more! :)
4 Trackbacks
[…] surprise with the launch of the new design. Yet Lauren’s decision to document the process of re-designing her blog CreativeCurio has convinced me that recording my own design process on Inspiration Bit will be mutually […]
[…] The Creative Process: Ideas for My Blog Design […]
[…] The Creative Process Vivien from Creative Curio is in the middle of redesigning her blog and she is recording her creative process. So far she has written about her Research and Thumbnails, her Experiments and her Researching Alternatives. […]
[…] Inspiration Bit and rather see some action. So here it comes. Following the steps of Lauren from Creative Curio, I too will be sharing with you my design process every week for several good […]