I was so elated by all of your comments on my last blog design post! It gave me a lot of energy for the project. Thank you very much for sharing your thoughts and links. I hope you will contribute to the process again this week, too! And a huge thanks to John for stumbling my post! I had a considerable spike in traffic on Saturday from SU 
The Blog Design, Week 2
Really quick, before we get started on this week, let’s recap last time. I started out with step 1 in the design process, research. In this important step you look at other successful designs (and maybe some not-so-successful ones) and determine why they are successful (or why not). You also define what it is you will be designing. Ask questions like
- What is a blog?
- What is a website?
- What is the purpose of a blog?
And you may even ask how you could redefine the appearance of a blog, without taking away what it means to be a blog.
Then step 2 in the creative process is to create thumbnails and sketch out ideas. I find that my most successful designs are ones with which I have taken the time to do this. It gets all the immediate and typical ideas out of my head so I can start looking at more creative solutions. It is an invaluable step in the design process.
So now on to what you’re looking forward to the most! The blog redesign!!
The Creative Process, Step 3: Wire Frames
While this is not a required part of most designs, wire framing for websites can be a very important step in determining the placement of content and especially the function of navigation. This is also a great place to start if you feel overwhelmed and have no clue what style you desire for your design.
This week I concentrated on nailing down my layout. I sketched several wire frames and then created a digital mock up to fine tune the details. I simply create grey boxes as a way to get a feel for how the content will be organized. I use the neutral grey so that I don’t start thinking about the design and colors and such.
Experiments
This may not be an official step in the creative process, but if you are unsure of what style you would like, it’s a good place to head next.I was looking over my research collection—particularly my favorites that I printed out—and deciding what I found most appealing about the style. I determined that it was the line quality of the designs that made me really excited to look at them. You’ll remember two in particular, the Web Designer Wall design and the Casio Lab.
I love all the different lines throughout these designs. They are unique, varied and I just want to look at them all day! Ok, so maybe that’s a little extreme, but I do get a crazy amount of pleasure at enjoying these designs. Sounds creepy, but I’m sure anyone with a passion for good design understands (right, John?).
Then I had a brilliant idea—well, I thought it was brilliant, so be gentle when criticizing my favorite idea. I’m still experimenting to see if it’ll work, but I thought of creating a background image that was a crashing wave of all sorts of lines. I grabbed a sample wave crashing into a rock and used it as reference for my piece. Then I downloaded all sorts of Photoshop brushes (I’m so in love with them now!!) and started scribbling away! I like the tactile, textured nature of this design a lot and it occurred to me that I appreciate the sites like Web Designer Wall that give the viewer a little extra if they have a higher resolution monitor. You can enjoy the site just fine at 1024 x 768, but you get to see so much more of that lovely background if you’re at 1280 x 1024. What do you think? Is it a viable style? Would it work?
I also want to experiment with an antique, curio cabinet, period carnival/circus feel. It would definitely reflect the name well. I think that will be the subject of this coming week’s experiments. Hmm… perhaps a combination of the lines and the vintage?
Oh, and if you want to know the Photoshop brushes I love so much, here’s the list:
- BittBox Watercolor Brushes I
- BittBox Watercolor Brushes II
- BittBox Splatter (like these a lot!)
- Go Media Spray Paint
- Grunge Brushes
- Script Brushes
- Script Set
- Coffee Stains
- Obsidian Dawn Glitter
- OD Swirls I
- OD Swirls II
- OD Texture
- OD Postage
- OD Kanji
- OD Stitching
Can you tell I love Obsidian Dawn brushes?? Stephanie creates the most beautiful designs. Bittbox is great, too. All the brushes are very hi res (at least 2000px, yes, three zeros!) The thing you have to learn with brushes is that they rarely look good by themselves. The trick is to layer the effects to create a beautifully textured background. That’s why there are so many listed here and why some seem quite unrelated (like the Kanji and Postage ones).
Design is Contagious!
It seems I’m not the only one that has the bug to do a blog redesign. Vivien at Inspiration Bit will also be sharing her redesign with everyone! Her first post on the subject is 16 Bits of Blogs with Unconventional Layout, where she documents various details that go into a great blog design. She’s inspired me with a few layout choices, too! Why not head over and subscribe to Inspiration Bit and get a double dose of blog redesign goodness!
The Creative Curio Redesign Process
- Ideas for My Blog Design
- Wire Frames and Experiments (current post)
- Researching Alternatives
- Doodles are the Key to Success
- A Return to the Redesign
- Details, Details, Details
As always, if you 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 just wanted to say thank you for posting all of this! It’s honestly really helpful for beginning designers such as myself who are in the process of making their first real site.
Even though I’m in college, I don’t think I could ever learn this stuff from one of my professors!
Thanks again! Can’t wait to see the final product!
I’m definitely following this, as I’ve recently decided to learn Wordpress theming and develop my css skills too. A good - and humungous - resource you might find useful for getting some ideas is at:
http://designmeltdown.com/chapters/DesignPrinciples/
I’ve been scanning that site to come up with some alternative design ideas and to see how people are achieving different things.
I really like the progress We have made so far on this. haha. As for layout did you decide on a left aligned layout? As in not floating it in the middle.
They only thing I’m not feeling so much with the background design is that is feels really busy. What I really like about WDW and the Casio site is that it has just enough without going over board with the brushes. (Which is very easy to do. I know this from experience.) What I think would be cool is if you went with something more solid and defined, and then accentuated it with the beautiful curves, and lines.
Reading that back to myself I kind of sound mean. In no way am I trying to be mean, maybe I’m just not the best at constructive criticism.
Now let the discussions ensue…
Dylan,
I didn’t think that sounded mean at all! You have some very good feedback. I really appreciate it. I’ll have to think about it more and study more of my research! This is a really fun process. Thank you for participating
No, I’m not going with a left aligned layout, it will be centered. I only had done one side of the “splash” so I didn’t want to put up the other side cuz it’s just blank. Ha, I just now realized I didn’t upload a copy of my full digital wire frame! Duh, that’d be why you asked. I’ll do that in a bit.
Great write up, Lauren. Thanks so much for such a generous promotion of Inspiration Bit
I liked the colours in your mock up brushed lines, but I think too many different textures and shapes would spoil the picture. I know that you were only experimenting, but make sure you don’t spread those lines and curves all over the page. Another thing that came to my mind when looking at your mock up is to come up with a theme, an image and then use the lines to support and enhance it. Hope it makes sense, i.e. on WBD he used flowers as the main theme/image and the rest of the lines, curves just enhance it.
It would be great if you try the other styles you mentioned: “antique, curio cabinet, period carnival/circus”. One thing I can predict though - your newly re-designed site will be featured on all CSS galleries :-)
As far as your process goes, I love the sketching. In fact, for me the most interesting part of design like this is seeing the forethought and ideas on paper, almost more so than the finished work. There should be a site just dedicated to design sketches - and not just for web development but just about anything!
Mockup-wise, my tastes run closer to the ‘structured’ side of the street, so while I like the incorporation of the brushed line background, I’d be a little cautious to ensure the site elements and structure stand out. They’ve got to work hand in hand, but to me there’s the risk of it getting all a little too helter-skelter. Web Designer Wall walks that line very very gingerly.
Personally, my greater fear is the implementation of the design since I’m pretty much a CSS newbie at this point. Maybe putting pencil to paper is more attractive to me simply because the entrance hurdle is much lower.
I’m very interested to see how it goes. Again, much thanks for sharing the process.
Hi Lauren, regarding what the professors teach us, it is more of them showing us what to do, and the process behind designing something but not how to do it, or how others do it such as what your showing.
Nice layout by the way, great for moneytisation… nice watercoloury effect, shows off the wave well.
Anyway I was just thinking, getting brushes off the net means that someone, somewhere else could have a similar design (or design pieces) to your website… have you thought about drawing or designing your own? Scanning them in? Have you made your own brushes before? It’s pretty fun
We had this class in the first semester where we had to come up with abstract patterns/textures and so fourth that you could use for design. Ie, you could roll a bike wheel over paper to get a tyre track or my most random one was, a rubberband and alfoil print which turned out pretty cool. Creativity is the key here.
PS. I have noticed your top image that goes with every post now :)
Vivien,
You’re welcome for the link! I’m very much looking forward to seeing your process, too! Yes, good point about using too many colors and having a busy background. I’m glad you noted that these are just experiments though… too true. I am not even close to a final style, though I think I’ve pretty much settled on my layout.
You and I think too much alike, Vivien! Scary! I have been trying to think of a theme, exactly as you’ve mentioned! I can’t use flowery vines and such because Nick did it with WDW and I don’t want to even look like I’m copying. I was thinking underwater, but that doesn’t really fit with the name or the subject at all (course, flowers don’t fit with Web design either).
I hope that my new design will be featured in galleries! I’ve already told John that I’m going to send him some comps (now maybe I won’t have to cuz he’ll see it here) and have him give me suggestions on the typography—I want to make his quarterly spotlight on 15 good examples of Web typography!!
Richard,
I love seeing other’s sketches, too. How cool would it be to have a site featuring only designers’ sketches! I’m thinking of doing some case studies here (not quite as extensive as this series) on some of my designs in the future.
You are spot on with your advise about integrating the artwork with the content. Design is all about bringing out the message, not losing it in the “pretty”!
Keep watching this space for the CSS stuff! My husband will be helping me quite a bit in this area and he is a wiz at this coding stuff! I’ll be learning right along with you through this process
The only thing about my theme will be that it won’t be flexible in terms of others downloading, using and modifying. I’ll probably have a lot of static coding because I do know how to get in there and deal with it and it’s easier to do that than set it up for a lot of customization.
Jacob,
Those things you had to do for class sound fun!
I would disagree with the part about someone having the same bits in their designs because we’ve used the same brushes. Many of them are abstract enough (like watercolor brushes) that you couldn’t notice if they were the same. Brushes can be used in such vast and varying ways that it’s almost like saying using blue in my design will make it look like someone else’s. Now stock vectors and images… yes. And it’s embarrassing and rather maddening to see a stock photo that I’ve used in a design also in a rival company’s marketing materials! But back to the brushes, I will have to try my hand at creating my own some time
I don’t know now how I got to your site but, thank you for this post. It reminded me to get into this creative process that you have been discussing. Funny I’m undergoing the process right now for a website that I have launched. I’m more of the backend person so I’m getting reminded of the fundamental front-end requirements .
There’s so much design out there that focuses on ad placement and it makes the pages so busy. Too much monetization spaces and junk content.
I’ve switched most of my design schemes for the 1024 screen size. I typically use a 980 px wrapper.
BTW, nice combo there. You’re a designer and your husband, a coder. Maybe you’re children will take on the marketing side, perhaps? Just kidding!
George,
Yes, there is a lot of monetization going on out there, but some of it is done quite tastefully—it doesn’t all have to be AdSense trash 
I’m glad you found this interesting! And thanks for stopping by to comment and let me know. I love hearing from readers
My husband is actually a designer as well, but he builds all his own websites and has a strong understanding of SEO (always bugging me to optimize my posts!) and usability, too. He loves it! I do more print work myself, but I am also interested in web design and enjoy hearing him talk about all the things he learns. We are definitely a good combination. Hey, now having the kids get into marketing and PR is a great idea! We can start up our own advertising agency!
haha
Stop by again some time!
“We can start up our own advertising agency!”
A left brainer and a right brainer. Pretty much like my kids. Both of them are left handed but my wife and I are both right handed. They’re usually my critique consultant as far as design pages are concerned.
Just an idea though. You might want to create a wordpress theme. Have your husband optimized the title and keyword meta tags or page content area. Release it for free and it will create backlinks for your site (LaurenMarie.Net or CreativeCurio.Com).
I am considering this myself after I come up with a good layout/design. I see that you’re a Brian Gardner learner. I find his Revolution Theme very inspiring. I am currently trying to implement his design principles in my internet ministry sites. Another site that is almost similar to Brian’s implementation is WPRemix.
I see that you’re using Cutline. Try adding a keyword meta on header.php. A lot of WP designers don’t provide it because they don’t know what the template will be used for. (Just an idea).
George,
You know, I’m not sure if I’m a left or right brained. I usually fall right in the middle on those tests! I did really well in school with all kinds of subjects—music, math (up to Trig and Pre-Calc, took Stats in college), science (except for physics)— but I also like art, though I don’t think I would consider myself an artist. It’s good to have lots of people, designers or not, around for critiques, though, definitely!
I hadn’t thought about the backlinks and such if I create my own theme. That is a very good point! I’ll have to talk with Brian Gardner (he’s a really great guy and a Christian, too! Shoot him an email some time; I’m sure he’d love to hear how he’s inspired you) and see what kinds of things I would have to think about for creating a flexible theme.
Fair enough with your opinion on the stock brushes, however if you compare, for example, Web Designer Wall with your experiment, you can see that WDW is totally unique in itself whereas I have seen those white dotted swirls on another site and that is what it makes it not as special. It is a small and debatable thing but in the end does make a difference however small it may be. But nearly everyone uses them, even myself but I was just making a point.
Jacob,
This is an interesting debate! Just for the record so there are no hard feelings or misinterpretations, I’m not trying to be mean by arguing and I don’t take any offense at what you’re saying either; I’m enjoying this discussion. Sometimes it’s hard to tell through words alone!
The “white dotted swirls” are a default Photoshop brush that I changed the options on (see my next post). And I don’t think it’s fair to compare WDW art with Photoshop brushes because he hand drew all of those vectors and colored them digitally himself; not a touch of stock imagery of any kind there.
Jacob, this is a really great topic and I’m writing so much in this reply to you, that I think I’ll turn it into a post. Credit to you, of course, for initiating the discussion!
Geez… what a long comment that was!
Found another thig you might be interested in for drawing style inspiration: VelvetDreams
kristarella,
What is it about physics that’s hard for us smarties, huh? I just didn’t understand that subject!
I need to not leave you alone with my blog for so long
I see what you’re talking about with content and nav not aligning, but that’s on purpose. That outter light grey box will actually be a visible content box and I’d rather have the nav align with that. The darker box labeled “content” will not be a visible box, it will just contain text.
I would love to comment on those resources you gave me (your brush work and the Velvet Dreams) but the sites are blocked at work. But, um, er, I’m not blogging at work… no! Wouldn’t dream of it! Hehe
I really appreciate all your feedback and links. Thanks! I didn’t see it as critical at all, on the contrary, you sound like you’re so excited that you’d like to take over! :D
Cool, I wasn’t thinking about a visible box. If you can see it then it’s perfect.
Darn work computers! Don’t they trust you?!
At my old job my computer was too old to install the latest flash - flash websites just didn’t work at all.
kristarella,
Actually, at work it’s not that we don’t have Flash, rather they block sites that are “not conducive to business.” Unfortunately that includes sites like dA, allposters.com, art.com and other art-related sites because they can have nudity. But that really hinders me as a graphic designer, apart from this blog. I’ve asked to have my username added to an allow list for these sites, explaining my need for research, but nothing’s changed yet. Ah, bureaucracy!
Oh yeah, I understood that… I was just relating my own work computer woes.
I actually went and re-read your about page and 103 things because I was sure you worked in graphics and wondered how you could be banned from dA!
kristarella,
Yes, I wish they would unblock the art sites. It’s very annoying! If only we could just work from home…
Richard,
I don’t mind, though; I’m loving these conversations! Gonna go check out how your design is coming along…
Yes, lots of comments! People like to voice there opinions on design
The blocked sites aren’t a huge deal, because I can just look at them at home. But in case a site goes down or something, the cached versions are a good idea. Thanks for the reminder!
kristarella,
Finally got around to looking at those dA links. I remember seeing your brush work before. I really like your idea of soft vs. hard and integrating the two; it definitely resonates with me. I like those illustrations from VelvetDreams, too, particularly the white category (the fruits are cute). Thanks again for all your great research!
Cool, I thought you might appreciate her drawing - I prefer her early work, the fruit and fish and things like that…
I had to come back to this post because I liked how you mocked up your grid and I was starting to have problems with margins and padding and made a mock up for my own site.
I saw another site you might appreciate with brush type things around the edges. Blogsolid, the post about blockquotes is the page I came in on… the front page is quite nice too.
kristarella,
Yay! I love helping people! How’s your redesign coming, btw? Decided on a style? As you can see, I’m having a bit of difficulty in that area 
Erm, I think you forgot to add the URL for Blogsolid. Luckily they were able to have their address the same as their name 
I’ve fixed it in your comment. Thanks for that awesome example! The swirlies are a subtle but very nice effect. I looked at their portfolio, too. Love it!!
kristarella,
Hahahahaha *wipes tears* Haha, pointy boobs *snic* I showed it to my husband just now and I asked him what he though it was. He said the same thing. Those headers actually change—I didn’t know what you were talking about at first because the one I saw said “I suppose pro skateboarding was not meant to be.” I think there’s about six or so of them.
Hey, no fair editing your comment. I would love to critique your design (I’ll be constructive, I promise!)
Sorry! Forgot to say some stuff
Glad I’m not the only one that thought of boobs! I wonder if I should email them, perhaps they can change the logo before any magazine site goes live :P
You should email David Airey too and have him add it to his next logos gone bad article.
One Trackback
[…] is recording her creative process. So far she has written about her Research and Thumbnails, her Experiments and her Researching […]