Sometimes you just get stuck on a project and you have to let it sit for a bit; just completely walk away and not think about it. I had to do that with the redesign because what started out as fun project turned into a chore and my ideas waned. March was also a hectic time for me and I only recently picked up the redesign again.
I’m sure you all have been looking so forward to this article! It was way back on February 1st that I last updated you on the redesign of Creative Curio.
I liked the direction it was headed, but the colors were definitely too dark. Many of you commented on that aspect, too. I went back and purposefully picked out colors this time, created swatches and stuck to the color palette.
I really liked the comment that Esben made about the style looking like it was from a fairytale. That was what I was going for but hadn’t quite defined it that way—I thought of it as slightly mystic. I researched some more on the mystical, fairytale look and drew doodles that I refined and eventually turned into an integral part of the look and feel.
Jacob also mentioned that he thought the watercolor style lent itself to a less boxy look than I had. It was hard for me to wrap my mind around this, since the rectangular look of the web has been so ingrained in our minds. Many sites have done the layered thing with the boxed in content area, including Web Designer Wall, Free People Clothing, ebu GOGO and Casio (Spoon Graphics just had a great post on the mixed media and paper styles taking hold of modern web design). I do like this look and these sites have pulled it off fantastically, but I wanted something different. I decided to try blending the background into the content area instead of having it behind the content area.
Navigation was also presenting a problem, like we talked about back in February. I just couldn’t figure out what to do! I didn’t want to do the crooked paper tabs sticking out of the top of the content area. Looks nice, but been done. Then during my research, I noticed how designers had put things like announcements and forms on what looked like either sticky notes or pieces of old tape. Hmm… took a bit of work to get the hang of creating the tape, but I really like how it turned out! I’m thinking about doing a tutorial later, if you would like to see the steps I took.
I’ve got the basic design down, I’m quite happy with it (muhhaha, you’ll just have to wait to see the whole thing! Better subscribe so you don’t miss the big announcement!) and now I’m working on the details; the little bits that really give it that finishing touch. I’m looking through icon collections and seeing if anything will fit my needs. I may end up creating my own.
I’m also carrying the look through down to the footer and comments, and figuring out how the design will scale vertically for longer posts; I don’t want my content floating out there in nothingness!
The biggest thing that I want to work on is the typography. I want this site to have that Zen feeling you get when you see harmonious typography. I think Georgia and Verdana are going to be my choices here, but I’m looking to helpful articles like Vivien’s web typography series (part2, part3) for some inspiration on hierarchy and different ways to style things. If you have suggestions on this topic, I would love to hear them (especially from you, John!).
The Creative Curio Redesign Process
- Ideas for My Blog Design
- Wire Frames and Experiments
- Researching Alternatives
- Doodles are the Key to Success
- A Return to the Redesign (current post)
- Details, Details, Details
Excited for the unveiling of the new design? It’ll still be a few more weeks, but subscribe now and be alerted when the new design is up!
Whoo! Exciting
Your little teaser images are killing me!
Gayle,
Hehe! I was going to reveal the whole thing and ask for comments, but maybe suspense is better all around–now I can’t take 3 months to turn this thing out because all the excitement will have gone for readers by then! I’m really excited about the redesign now; I like having the overall look in place and spending lots of time on the details. That’s the fun part for me!
oh, I love that gold Creative Curio and the new menu styles. Can’t wait to see the entire design.
I also like the colour scheme. As for typography Georgia and Verdana could work, it will all depend on your approach to hierarchy.
I’ve got to get back to my re-design too, hopefully soon. Thanks for the boost
Vivien,
While I was feeling the last evolution of the redesign was getting to where I wanted it, this newest version is something I am totally thrilled with! I can’t wait to unveil it! And thanks to your indepth web typography “beauty secrets”, I think I’m pretty well on my way to figuring out my typographical hierarchy
I’m really loving the design! I can’t wait for the final reveal!
Oh, and I haven’t gone anywhere. I’ve been reading everything and just too busy to comment (finals are weighing me down), but please keep up the amazing posts!
Jacob Carter,
So glad you’re still reading! I noticed your absence, but hoped that it was for the reason you just told me (too busy). Good luck with your finals!
Ooh hoo hoo hoo! So excited.
I had to take a break from my redesign too. Actually I’ve pretty much completely redone it since I sent you that preview. Sadly, I ditched the header; despite its coolness it was holding the rest of the design back.
Definitely do a tutorial on the old tape style, that’s cool!
I thought you were going to show where you were up to at the end of the post and then I got a “to be continued”… Gah!
Oh, and I was going to point out Jon’s web font page in case you hadn’t seen it (although I’m sure you have).
Yeah, I like it too, but when I started out making a new theme I wanted something that had nice, easy, semantic code; as well as something simple, easy to navigate, perhaps a bit of typographical flair, something that took advantage of the media, whether it’s using IE, Firefox, Camino, different resolutions, even screen readers.
I started styling in pixels and then converted everything to ems – it should work with different font sizes. I’m also considering changing the size dynamically – not a fluid layout, but using different css for when people have lower resolutions or their browsers smaller.
That might all sound a bit excessive, but it’s come from the way I use the internet and watching the way my husband uses the internet… I want to have as much control over my site as I can while giving readers as much control as they need – making sure that when they want to change things (like font or browser size) it is still harmonious and functional.
The header was inspired by Surfgarden, whose header I still adore (although has changed slightly since the last time I was there). I wanted to use a similar idea to show some of the stuff I love and also use my photography in a creative way (with rotating images in the window).
The way I was doing the header was risking browser incompatibilities (it wasn’t just one pretty picture), the code was starting to get too complicated – I had a huge urge to just simplify it, I couldn’t figure out how to incorporate the menu, and it was inhibiting the ability to make the page elastic and/or dynamic… I wasn’t happy.
That said. I still think it looks awesome and I’m still trying to come up with a way to convert that idea to blend in with the new design I’ve made, which is way better in terms of layout and typography.
I’m also trying to come up with a logo – it’s so hard! I know that identity is not as easy as some people think it is, but I think I’m much pickier because it’s mine too.
sFIR.. I just had my time with flash and xhtml – this is the last time ever, Im going to use flash.
I hate it! anyway a little tip about changing themes.
You have to remember to use the same width in the content area, otherwise you will notice, that you have to manually resize and position images once again, from older articles.
But it still looks very very impressive and original I might add.
From the small sneak preview you have given us it looks awesome! Love it how you have the content going on top of the background and how you got rid of the boxes. And the tape looks good too.
Guess we will just have to wait for the few more weeks!
Kristarella,
Wow! That’s like an entire post there! I can see the similarity between your (now old) header and Surfgarden. Looking forward to seeing your redesign, too! And yeah, logos can be difficult; there are so many ways you can do them. I usually will explore both a concrete icon, an abstract icon and a combination of the initials. Fortunately these days there are so many places to find inspiration for logos!
Esben,
I hear ya on the Flash thing. I don’t like it either. But maybe sIFR won’t be as bad. I am already planning on making the content area the same, though I sometimes feel it’s a little skinny (500px) but you make a good point about the images.
Jacob Cass,
Well thanks to you for your suggestion to make it less boxy! I think you were right and I like this look much better, too. It’s more… free
Yeah, sorry… got carried away.
I’ve never thought the content area was too skinny here, it could be wider and still readable, but you’ll probably need it to stay as it is or smaller if you’re still going with the somewhat double sidebar. Then again, you could try resolution dependent layout. I’m thinking about using that.
Kristarella,
No worries about the long comment! I think that I wouldn’t want the content area a whole lot wider in terms of readability (too long of a line is hard to read), but for the images, especially screenshots, I often find myself wishing it was about 650px wide or so (an additional 150px). That experiment is really cool!! Did you notice how the Secondary Titles shift from columns to rows if you get below a certain resolution?? That’s awesome! I’ll have to see how it looks on my widescreen at home. That’s one thing I notice about a lot of sites is the background only goes to about 1280px wide. I’m running at 1600 (if I can remember properly), so I see the chopped off end of the image.
Resolution independent is cool, but tricky but needs much debugging.
What about making two columns, one of the writing article and one for images?
Categories, tags and so on, doesn’t have to be at the top in a column, I would personally drop it it the footer.
just some ideas
Esben,
Well, I’m definitely not in the mood for debugging! I’m just going to stick with a fixed width anyway. That’s a good idea for the two columns, but I think I’m going to keep doing it the way it is currently (in the article). Thanks for the suggestion about the tags and categories. I’ll try that out!
Fixed width is cool too, my personally favorite, but the trends do suggest elastic webdesign, this guy explains it pretty good (video) css-tricks.com
Esben,
Thanks for the video!
Yes, a break can be a good thing. I often have quite the opposite opinion of something after a break from it. You’re also right not to feel obliged or rushed into doing it. We have enough deadlines in our lives without the need for self-imposed ones.
I’m looking forward to the redesign. Might be interesting to set the titles with sIFR. That way you could even have a handwritten-style script—or whatever.
Kristarella,
The header was holding the rest of the design back? How so? I really liked it! I will do that tutorial on the tape. I think I’ll also show how I did the glowy content background, too. That part was pretty easy. Thanks for the link to Jon’s web font page. I hadn’t seen that before, actually!
John,
Ha, oh, painfully true about the self-imposed deadlines. I have lots of those :} I like the sIFR idea, but I looked into it when you did it for Jos’ interview and couldn’t figure out how to actually use it. I found a lot of history on its development but… Have any helpful links?
Great articles! Look what interesting article i have found about Website redesign
http://ooyes.net/redesigning-your-site
property,
Thanks for the link
One Trackback
[...] Note from Jacob Cass: This is a guest article written by Lauren Marie who is a graphic designer in corporate America during the day and a blogger via night. I have been reading her blog for some time now and it is a great resource, which is currently undergoing a redesign. [...]