PSDFan Extra
FanExtra Membership:
Sign up today for a FanExtra membership, and get access to hundreds of design files from our range of network sites.
Promote this Post:
We'd really appreciate it if you took a moment to help promote this post. Your efforts help keep this site running.
30 Minute Redesign #76: Suruha Freespirit
Welcome to the new and improved 30 Minute Redesign series! This 76th redesign in the series is the first to be featured at Blogs.FanExtra. We’ve migrated the entire series from our sister blog PSD.FanExtra as we felt that it would be a better fit for our blog readers here. You can still browse our archive of past redesigns here.
Today I’m going to be redesigning Suruha Freespirit, the personal design blog of Su Hall, one of our most active readers. I’ve spoken with Su a lot in the past year, so it’s a real honor to get a chance to redesign her blog. I hope you like it Su! :)
The Original Design:
You can see the original site design below:
You can check out the original website here.
First Impressions: Strengths
Every site has some merits, and the good impressions I made here are these:
The Header Shows Personality and is Unique to Su
The header is a little busy and disorganized for my taste, but very importantly it does show the personality of the blogger. The collage of images seems to be a collection of visuals personal to Su, and this is great for helping her blog stand out from those with more generic designs. As the first thing the viewer sees it instantly portrays aspects of her personality, a perfect example of how a picture is worth a thousand words.
The Blog Uses a Headline to Explain What it is About
Most blogs I redesign are very bad at explaining what they do to the reader. New readers shouldn’t have to guess what your blog is about, you should make it immediately obvious. Su does quite a good job of this, not just through the relevant visuals in her site’s header, but through a textual headline concisely explaining the nature of her blog:
Su Includes an About Me Section so Readers Can Get to Know Her
With so many blogs remaining ‘faceless’ Su does well to include a simple ‘about me’ box in her sidebar. This is a great way for your readers to learn more about you and makes your blog more personal. Her about box is actually pushed way too far down the page, but the fact it’s there at all is a definite positive.
First Impressions: Weaknesses
Of course no website is perfect, and our site’s often make negative first impressions upon readers without us even realizing! Here are the negative first impressions I received from this site:
The Typography is Very Difficult To Read
The first thing that jumped out to me when trying to read Su’s blog content is that her typography is really difficult to read. You generally want to use text that has a lot of contrast against it’s background. Because Su is using text that has a similar color to the page background it makes it very illegible. This is not helped by her use of non-standard fonts throughout her site. These fonts are ok when used minimally (for example to liven up larger headlines). However, when used for the main body of text they become a hinderance.
There is a Lot of Clutter and Pointless Content
I’ve rarely seen a blog quite as cluttered as Su’s. As a general rule of thumb you want to keep only the absolutely necessary content on your website, everything else is fluff and should be removed. Su’s blog has some great content, but this is totally overwhelmed and obscured by the vast array of useless content on her site. This useless content ranges from adverts to banners for other blogs to widgets and animated gifs. Scrap the obsolete content and let your readers focus on your blog posts.
No Visual Hierarchy, This Confuses the Viewers Eye
This links into my point about clutter and obsolete content. The clutter and sheer weight of content on this site means that a visual hierarchy isn’t established. You should be aiming to naturally draw your reader’s eyes down the page, tracking from header to post title to post content. At the moment the colorful detailed background is pulling our eye one way, the cluttered sidebar of flashing banners is pulling it another way, and rarely are we able to focus on the post content.
My Redesign Proposal
You can see my redesign proposal below:
Let’s look at some of my aims for the redesign:
I Reduced all the Clutter on the Site, Leaving Only Valuable, Necessary Content
The main issue with the original site was clutter, so my first job was stripping away all the useless content and leaving only the good stuff. This let’s the reader focus on the most important thing – the content!
You can mainly see the reduced clutter in the sidebar. What was once dominated by endless banners, animated gifs and adverts is now a clean, concise sidebar consisting of an about section, subscription options, post archive list and popular tags.
I Established a Clear Visual Hierarchy
In the original design the viewers eye is distracted by the number of bold elements on the page, so it can’t naturally read down the page, or even focus on the blog content at all. In my redesign I fixed this by establishing a clear visual hierarchy, naturally drawing the reader down the page. They are first drawn to the large header photo, then down the page to the large, bright text of the first post title, and then naturally down to the post content beneath this:
I Retained the Creative Theme Attempted by the Original Design
One of my favorite things about the original design was that it attempted to portray Su’s natural creativity and passion for design. Whilst my design is much cleaner and more minimal, I tried to retain this creative theme through some cool visuals.
The logo and ‘older posts’ link have a subtle watermark underneath them, and use a creative handwritten font. The right column is broken up a little by a bold pencil illustration. I also thought that the top photo area could be something Su could periodically change to reflect her own tastes in design. This top photo was inspired by the Facebook timeline layout, so would really be the main area for Su to portray her creative side, whilst not detracting from her content.
Suggest Your Own Site for a Redesign
You can have the chance to have your website redesigned in next weeks post. All you need to do is leave a comment to this post with your website address and why you think it needs a redesign.
The Benefits of Getting Your Site Redesigned Include:
- Most obviously – a FREE redesign job!
- Your website gets exposure to Blogs.FanExtra’s readers
- You understand how to improve your website. This isn’t just a redesign, it’s a lesson in design principles.
- You will get emailed the .psd of your redesign to integrate into your site.
The Rules for Submission:
- The website your submit must be your own website.
- Your website must not contain any illegal or inappropriate content.
- Your website must be English language, as otherwise it’s too difficult for me to redesign out of context.
About the Author:
Tom is the chief editor at Blogs.FanExtra and founder of the FanExtra network. He loves interacting with the community, so if you have any questions hit up the contact page and he'll get back to you.
FanExtra Membership:
Sign up today for a FanExtra membership, and get access to hundreds of design files from our range of network sites.
Promote this Post:
We'd really appreciate it if you took a moment to help promote this post. Your efforts help keep this site running.
Related Posts
-
8 Powerful Tips for a Successful Guest Posting Career
-
30 Minute Redesign #78: Chiagu
-
30 Minute Redesign #79 Vote
28 Comments:
Subscribers
111 FollowersFanExtra Membership
Join our FanExtra membership community today expand your learning. Just $9 for access to advanced members-only tutorials and thousands of design resources.
Subscription Options:
Email Subscription
111 Followers
0 FansWrite For Us:
Are you a talented writer or designer? We’re always on the look out for quality authors, and we pay great money for any articles or tutorials accepted! Please get in touch if you’d like to join the FanExtra team.
Latest Members Content:
Here is some of our latest member content, available exclusively to VIP members of our network. To gain access to all these files and more sign up today!
Pretty nice analysis Tom, 30 Minute Redesign is one of the best Unique Post Series in my opinion :)
Thanks Aniruddh, I hope that you like the new, more detailed format for the series. :)
Is there any difference? Actually this is the first post of the series that I actually read :P and I loved it a lot lol
Yeah the old version of the series simply listed all the points in bullet point format and provided a before/after image. Now we’re showing images/close ups for each point raised and discussing the theory behind the designs in much more detail. I’m really glad you like the series though! You can check out all the old redesigns at PSD.FanExtra here: http://psd.fanextra.com/category/articles/30minuteredesigns/
Oh! I see the differences now. Right, so now its really more detailed.
P.S. I hope you make a post on the query I eMailed you soon
Aniruddh: I don’t think our comment reply system is build for such a long thread, it’s looking kinda stretched now ;). As for your question I mentioned that several other people have asked something similar. Keep an eye out for my ‘Ask Tom’ video series starting next Tuesday :).
Lol ok, but was the series starting next Tuesday or this Tuesday?
Next Tuesday (24th).
Great makeover! Love the new format, too.
I have a question though about the header image, inspired by the Facebook Timeline. How would it look on a wider screen? Is it just a large rectangle with hard edges, or would you fade it into the background color?
Hey Trisha, thanks for the feedback, it’s great to see you over here at the new site.
For the timeline area you would use a very large image to cover large screens and then it would crop down for smaller screen sizes.
It would have to be very, very large to fill a 27″ screen like mine. :) Maybe fading it out to yellow would work for the super-duper wide screens, while it looks fine for the average screen size.
Yeah that’s typically what people do. They’ll use a really large image to cater for 95% of users, then for the final 5% of people with mega huge screens (very jealous btw! haha) an image fade is used.
Great post and great series! I have been constantly following 30 minute redesign over some months now and I’m totally impressed. Very instructive and inspiring. How about publishing all posts as a PDF? I’d instantly buy it!
Thanks Markus, comments like that really make the series worthwhile :). That’s actually a fantastic idea about compiling the series into an easy to digest .pdf! I can’t believe I didn’t think of that. I will almost certainly do that in the future, but I’d like to build up a nice archive of these more detailed new redesigns as they would be the best to use in the .pdf.
Remarkable, Tom! Wow! I am very impressed!
As I see it, your redesign elevates my blog to an entirely different level – a serious design intended for the reader. Too often, it has been tempting to add ‘this blinkie’ or ‘that widget’, to pay homage to something or someone, with little regard as to how it comes across to the reader. From my own experiences reading other blogs, the clutter and confusion make it so difficult to explore that, so often, leaving is a real viable option. (Particularly so with the obnoxious music player! I removed mine for this reason!)
What I see, with this make-over, is the focus is on the content, not on my friends’ sites or ads. Why this concept has escaped me is befuddling. I am interested, too, in the top photo time-line thing. I want to look into that further.
Tom, you’ve got my attention. Due to my lack of knowledge of web design, I’ve never really known how to go about creating a reader-focused appearance. Oh, I’ve read tons of tips, but, until I see it applied to my own content, it meant little.
I would like to work on implementing your ideas and then get back with you to share it. I hope that would be alright!
Thank you so much, Tom!! This has been a wonderful experience!!
Su
Hey Su. I’m so pleased you liked my redesign, it was great to get to redesign the site of our most avid reader :).
Stripping away the clutter is really the main thing you should focus on with your blog. It’s fine to pay tribute to your friends and fellow bloggers, but it’s best to integrate these ‘shout outs’ into valuable blog content, rather than adding a ton of flashing banners to your design.
I’d love it if you were able to use my design or ideas on your blog, and of course please drop me an email when you get your new design up and running.
A really nice end result and a much more detailed break down of the original and new design which is nice as although you can see the physical improvements it’s good to know the theory behind each conscious design change. I think originally the main issue was the hierarchy of this site and where to look first, but now I think everything is much more clear and precise and making me want to start reading it.
Hey Steph, great to see you over here at the new blog :). I agree with you that the new design is going to engage readers much more. The new level of detail in the redesigns seems to have gone down really well with people, so I’m glad you enjoyed the post. Look out for the next redesign this Saturday.
I have had this website for several years. It was originally set up by Bizopia, with my sending them a cd with some of my portfolio on there, to make the site more personal. I am an Interior Decorator, that also has the ability to fabricate softgoods for the home. In addition, I have a side company–Team Fleece (will be changing to Team Scarves).
I am very creative, but technogically challenged lol! I love innovation, but don’t fully understand it. Thus, it has been at least 7 years since I have attempted to tweak the site. It is old and dated! I am on Facebook and Twitter, also Linked In (haven’t grasped it yet). I would love to do a daily blog, also. Please help me!!
Thanks for the suggestion Kathy! I’ll definitely include your site in tomorrow’s poll.
Hi, Tom!
So, I have been playing around with my blog and made some changes based on the suggestions you gave me. I took all the ‘blinkies’ from the side bar and put them on a separate page. I added a bit more of my art, but, again, on a separate page. Then, I changed the background and the header. I would like you to have a look when you get a chance, if that is okay and you don’t mind.
I know it is still quite bright, but, it is a lot less cluttered, I think. (I am mesmerized with color – my dad used to own a paint store! LOL) Here is a link to Freespirit
Thank you so much!
Su
Hey Su. So sorry I didn’t get back to you sooner. WOW, just wow! I’m absolutely loving your redesign of the blog. Before I wanted to leave the site it was so hard on my eyes and now I want to stick around and read it! It’s 1000% better and I love that you’ve given it your own personal touch. My one main suggestion now would be to scrap the ‘all links open in a new tab’ button. It’s killing what is an otherwise awesome design. The button currently pushes all your important content down the page, whereas it should be as high up as possible so that more people read it. Get rid of the button, move your blog content up the page and you’re onto a winning design :).
Done! Thank you so very, very much, Tom! I was able to look at the blog from a reader’s point of view after your redesign comments. That is what I needed – guidance!
Though I toyed around with several backgrounds, none of the side panels lined up with my layout, so, a regular ‘blog’ template was useless. On a larger screen the side decor could be seen, but, I can’t see it on mine, thus, I don’t know how it would look for others. I liked your simple background in the .psd file with the redesign you did, but, while looking, lo and behold, one of the Blogger templates just happened to have the khaki color and I liked that simple design. I changed some of the text colors and a few other details and got what I have now.
I am looking for another header image, something like you suggested – a FB time line header. I put in the balloon logo, but, it doesn’t really work. I need to define and use one design for the brand. I adore the artsy font!
The Coffee Shop Blog has several, and I love that concept. I thought it would be nice to have a place in the header to switch out different images, again, as you suggested, without having to change my entire design.
I am so please that you approve! Your help definitely worked! Thank you once again!
Su
Hey Su. I really think your blog is so much more readable now, and it’s a pleasure to browse through. I love how you made my design suggestions into your own unique style too, as I didn’t want you to lose that and end up with something non-personal and generic.
My final suggestion would be to move up your blog content even more. For the text area
‘…..is my blog for digital design.
This is my place for sharing my journey.
Please, feel free to comment or contact me.’
I would have that on a single line, and get rid of the ‘please, feel free to comment or contact me’ text, as that feels a little obsolete. Then reduce the padding under this text if possible, as that’s also pushing down the content too much.
It’s okay. Clean with a focus on content, but also quite generic. Looks like it was grabbed straight from a theme forest or something.
Thanks for the feedback Tim. To be honest that’s one of the constraints of 30 minute redesigns. Most of the time is spent fixing errors in the previous design and getting everything positioned correctly. If I had more time I would definitely add more unique details/style to the page.
eeeeeeeeeeewwww no no no no, you just made a Blogger Theme. And that man on the header doesnt look like u
Hey Gus, as I mentioned to Tim, within 30 minutes my main aim was to get rid of clutter and lay out the page more nicely. As you can see by the changes on Su’s blog she’s made the site far more usable and attractive, whilst retaining her own unique style. The man in the header was simple a filler, I would expect Su to put in her own personal image, making the site unique to her.