Smashing Magazine Redesign: Photographs & Screenshots
Last year we took on one of our biggest projects yet, working on the new Smashing Magazine re-design. In this post we’ll look at some of the elements we designed for the project, many of which nobody has seen before.
The Brief
The brief was for a re-fresh or update of the current design, rather than an overhaul. They wanted things to be crisper, cleaner and more together – but a lot of the elements needed to stay, so that it still had a familiar feel & felt like something that people were used to.
Launch Project Photo Gallery
Not everything we created made it in to the live site. So we’ve decided to show a gallery of some screen-shots & previews of our involvement in the process.
We’ve put together some photographs of various ideas and work in progress from the early stages of the design. The photos were taken during the design process, and there has been various changes made since, by both ourselves and the Smashing team. But it does show an exclusive look at the early stages of the design process.
Wireframe & Moodboard
The first stage was to work on a wire-frame & mood-board, we showcased our initial ideas on a combination of both. Presenting some solid ideas like this backed up by examples and solid reasons it makes the start of any project much easier.
Things That Never Made it
Since handing over the project to the Smashing Magazine team a lot of changes have been made. So a lot of the work we did never actually saw the light of day, which is why this post has been made and also why we’ve uploaded a Gallery.
Some of the things, in our opinion look better in earlier versions than they do on the live site. But at the same time there’s a lot of good that came from the client feedback and a lot of improvements have been made.
In my honest opinion, the current live site is in need of a little fixing up. We’ve been in touch with the Smashing Magazine team about some of the changes they’ve made, and put forward some improvement ideas of our own. Whether things will change I’m not sure, as we’re no longer actively involved in the project, but we have kept in touch with the team – and shared our honest feelings with them.
A quick look at some early details
Here’s a quick look at some details we quite liked, but we never got to use, for one reason or another. Even though they weren’t used they were a starting point for changes for both us and the Smashing Mag team.
We also worked with our good friend Pasquale D’Silva again on this project, he provided the character Illustrations for the about us pages. The characters were later used by the team for other things, but never as we originally planned it as part of a “meet the staff’ feature (above).
Speaking of Pasquale
As mentioned the characters we’re made by Pasquale D’Silva. We came up with the idea of having him draw each of the staff members to use on the about us page. Something that the clients loved. Here’s a preview of the 4 brilliant characters he came up with.
The Experience In Conclusion
Working on such a huge part of the design community was always going to be a challenge. It was a huge honour to be involved with the team and the project and all in all I’m proud of the work we did on the project.
As with any project there is always things I wish could have been different, but on the whole we’re happy with the work we put into the project and how things looked when we were done, and it really was such a massively fantastic project to have been involved in.
Written by liam on April 19, 2010
Always nice to see what did and didn’t make the final cut.
Surprised they didn’t keep some of the elements you designed, really like the search box, much better than their current one.
I have to agree with Tom, some of the elements you designed have a much nicer feel to them. Did they give you any reason as to why they were rejected?
Just wondered what program you use to create your Mood Boards?
Thanks
I agree with what’s already been said entirely. I’m not sure why the Smashing Mag guys seem to have made the site quite bad since you made it.
Your design was awesome, theirs wasn’t so much.
btw I kind of wrote a small section on this the other day http://becreativemagazine.com/2010/04/enhance-your-designs-with-simple-techniques/ (Just scroll on down to the search field bit)
Thanks for sharing this behind the scenes look Liam. As with any project where the design is outsourced, things will change which are not in your control.
Overall I think the new site is a massive improvement although it would have been cool to see your final mockups 100% translated into the design.
None the less, great work all round.
I have to echo what has already been said here. I’m surprised they didn’t go with some of your original elements. I love the search box and the smashing network icon. Regardless, you did an awesome job on the redesign. It’s one of those site designs that I appreciate more and more every time I visit it.
I’ve always been a fan of your work and it’s subtleties.
And I Think this is a great example
I love the fact you guys use paper mockups first.
(Which reminds me i need to get more squared paper!)
My personal fav features are the vertical tabs and the Unique social media counter feature. (I see this getting popoular since Doug Neiner implemented something similar on the fuel network sites )
Good work dudes keep it up! and gald to see you guys blogging again
Your articles are a treat to read and with this post, you made my day.
Absolutely loving this detailed article. The wireframes seems awesome. Can we take a look at the actual size wireframes? The actual learning curve is there i believe.
Thanks for this awesome post. Keep em coming.
Hey Liam, thanks for a look at the ideas from your side. How long did you spend on working on the project?
The recent site change is certainly for the better, but I’d expect more given the experience of the SM team and the resources they can draw upon.
Awesome work. I noticed some subtle changes that made all the difference. Although it seems simple, it’s not always the case.
You guys got an A+ from me
It’s always great to see the other side of the story. I really wish they would of used some of the elements in this posts that got canned. You guys did a really great job though!
OMG….all of the rejected elements would fit the design perfectly and are truly awesome!!!! Can’t believe those were rejected, very good work and thx for the insight into the process
Nice to see new content on your blog, Liam.
Great work on Smashing Mag. and very interesting to experience how you work on it.
Very interesting to see how others work on a certain project with what results. As Marco said, some quite great elements rejected there..:)
Brilliant work!
Thank you very much for providing an insight into the redesign of the smashing magazine!
Hello
Love your design,love your post
@Scott James – We just made the Mood-Board from a template we made and use in Photoshop.
The reasons they’re made changes are based on user feedback and testing.
@R.Bhavesh – I’m not sure the wire-frames are quite worth sharing, there’s not really any detail or anything to them. There’s a lot better examples of wire-framing around the web. Check out: http://wireframes.tumblr.com/
@David Airey – I think a good few months back and forth. Probably 2-3 months on and off. We went through so many versions, and then they spent a while tweaking after hand over.
Everyone else, thanks for the kind words. We’ve recently been in touch with Vitaly and we’ve got a bit of a plan to make some improvements, still a lot to work out and decide – but I’m sure things will get better at some point. I’ll try and keep you guys updated on any news.
I really like the ideas. Looks awesome, keep up the great work function.
incredible job! I just loved it
Creative art and very useful. Thanks for such amazing work.
Keep it up.
[...] Smashing Magazine Redesign: Photographs & Screenshots [...]
I like the process and the designs
You did a great work on Smashing Magazine and I loved to read your article. But also sorry for the rejected elements.
[...] Magazine Redesign: Photographs & Screenshots | UX Booth UX BoothSmashing Magazine Redesign: Photographs & ScreenshotsShare This Share Browse UX BoothPreviousNext Close This function resizeIframe() { var height = [...]
It’s very interesting. Thank you for the parts behind the camera Liam. As with any project, the design is awarded, will change the things that are not under its control. In general, I think the new Web site is a great improvement, but it was nice to the final of the 100% in the design models are implemented. Last but not least, a great job all year.
If you have free time, visit and submit my gallery website. Thanks a lot
[...] WordPress caching solutions available. Awesome descriptions and graphics of each solution. Smashing Magazine Redesign: Photographs & ScreenshotsIn this post, Liam of Function discusses the Smashing Magazine redesign they did. It was very [...]
[...] Smashing Magazine Redesign: Photographs & Screenshots In this post, Liam of Function discusses the Smashing Magazine redesign they did. It was very interesting to read through the process and check out some of the elements Smashing decided to leave out. [...]
Really nice view into the development process of Smashing. I like how the ideas that didn’t make it were discussed as well. Insightful.
Superb post. If we implement all this our site will look like a medieval castle, where no enemy can get inside. Keep up the great work. Kudos to you
Really nice.Great post
Strange, but I find myself longing for the old familiar Smashing site, though I’m not sure if I can explain why, but I’ll try. I find their new layout confusing, and it has actually ruined the Smashing Magazine experience for me. I go there less and less.
When I go to the front page there’s a pile of stuff up the top all vying for attention; menu, logo, book advert, tabs – and the wide layout seems to pull my eyes into the advertisements. There’s not a clear visual hierachy. To me – these equal value tabs are a bad idea – Which one should I click? What is the Smashing Network? should I care? it seems to have equal value to the Smashing Magazine articles – which ones should I be reading?
I think the old site was less broken than this one. In the old site, the Smashing Magazine articles were in your face and took pride of place. You just had to scroll down till you got to an article you had read before – job done. The “Network” articles were in a list on the right, from memory, and you could pick and choose – however – that was obviously a secondary activity. With the current site you can click around for a while and still get the feeling you have missed something important.
I was interested to read that they wanted a “refresh” rather than an overhaul. IMHO they did not analyse and protect what was working well, and the “refresh” has broken something that never needed fixing.
Liam, is it possible to share with us full screenshot of this link?
http://www.wefunction.com/wp-content/uploads/2010/04/smashing_redesign_13.jpg
Btw, I love this post.
You really did create some nice elements for this that didn’t get included. In particular, I would have loved to have seen that gorgeous search bar in the final design. It is a shame they changed that because the current one is not only ugly, it’s also tiny.
I like the process and the designs
[...] Smashing Magazine Redesign: Photographs & Screenshots [...]
[...] Smashing Magazine Redesign: Photographs & Screenshots [...]
[...] Smashing Magazine Redesign: Photographs & Screenshots [...]
Amazing post. I cannot believe they didn’t include all of those features, the search would have been amazing.
well , i like the way you speak about the project in honestly that’s not repeated too much in that industry and like the language of conversation between you and the client .
Btw l like all you previous talented touches in smashing magzine design
good work , keep going
Thanks for posting this behind the scenes look, it’s interesting to see how designers/developers take on big projects like this. The pressure must have been on, working for a website that is targeted at the design community.
For anyone interested, Andy Clarke often posts similar behind the scenes articles about his design, http://stuffandnonsense.co.uk, it’s an interesting read.
Greta work
. Very nice descriptions. Thanks
Love the post, love the design, awesome work!
http://www.videwebdesigns.com is a full service web design and development company. They are capable of providing superior, yet reasonable cost for web designing and development. Check out its popular value packed web design packages starting at just £99.
http://www.videwebdesigns.com
good job thank you for sharing.
This may be an heretical comment, but the design of Smashing Mag is unimportant – it could look like reddit and it wouldn’t matter because the content is so good.
thanks for sharing. i will do it on old hurriyet newspapers. thanks again.
I have to agree with Tom, some of the elements you designed have a much nicer feel to them. Did they give you any reason as to why they were rejected?
I can’t believe they did not go with your initial concepts – i just love your work!
It is useful for the users a lot.
I agree with Tom – the search box was awesome… I can’t believe they threw that out. But hey, it’s gotta be what the client wants…
Thanks for posting, really interesting article.
I think the new design rocks. The design is lightweight, great information flow and easy on the eyes
Thanks for showing us what might have been, I loved the search bar and the digg/tweet/like status bar.
Interesting article…it seems as if it would be good habit of providing take away dialog after each project. Thanks again!
Great stuff thanks for sharing !
Nice Share.
Very useful.
Thasnk You Whery Good
Definitely some ideas there we would have kept in, Thanks.
I feel good about your designs and post.
Nice! Now I know what to do, thank you! And as this information is educational so this site has been added to my RSS feed for later browsing. To know more about
marathon training visit: marathontrainingschedule.net
[ marathon training plans ]
Creative art and very useful. Thanks for such amazing work.
Keep it up.
Thanks for sharing this nice work and post. This is a really great redesign. Thank you! LT
Magazines is a really hard area to get right, they aren’t very profitable and are all about image, image and image, so if you’re a small company starting up and no one has heard of you before, it remains very hard to maintain a strong place in the market.
Liam, you do impressive work but what I see at Smashing magazine doesn’t feel your touch. It lacks attention to details that you seriously care about. I was surprised to see that you guys redesigned the side. Beyond header nothing seems changed.
Few months ago I wrote about the design and usability issues according to my perception and wrote a healthy post about it. You may like it: http://www.awayback.com/smashing-magazine-realigned/
What do you think of my take?
-
@awayback
I like the process and the designs
Creative and very useful!
Native American Moccasins are greatly highly appraised even today. The reputation of Native US Moccasins is astounding. Mens MBT Sports shoes US Indians are to some extent nomadic so they fashioned boots that have flexible but sturdy soles and are durable abundant to withstand the elements.
It looks really amazing. Very nice re-design.
Good job and good luck! Very creative
I am happy to find this post very useful for me, as it contains lot of information. ugg outlet prefer to read the quality content and this thing I found in you post. Thanks for sharing.
Nice Illustration of design & very creative thanks for sharing.
I am happy to find this very useful for me, as it contains lot of information. I always prefer to read the quality content and this thing I found.Thanks for sharing.
good idea, thanks your webite is very good!ugg outlet
Great work. Thanks much for sharing.
Superb post. If we implement all this our site will look like a medieval castle, where no enemy can get inside. Keep up the great work. Kudos to you
If you simply have to have a pair of ugg boots right now, the only things you can really do are search for stores ugg cardy offering sales on these items or search the Internet for outlets offering discounted prices.
Very individualize, like very much!
Look great!
Thank you for sharing, hard you!
Kartvizit Tasar?m ve Bask? Merkezi | selefonlu, arkal? önl
http://www.ekonomikkartvizit.com kartvizit fiyatlar? kartvizit, matbaa, ofset matbaa, bro?ür, katalog, magnet, tasar?m, haz?r tasar?m, design, ?ablon, internet sitesi, grafik tasar?m, tasar?mc?, tasar?m firmas?, matbaa, bask?
Offering free tools for blogs and Web sites – weather tools, news and Prayer…
great work! I like it very much, I wish you will preserve updating your content materials regularly when you possess just one edicated reader here.
wish you can possess a glance at my site.
Bien fait. Merci
Thank you for sharing, hard you!
Without the flash the white iPhone 4 is almost as bad as the 3G, but with a higher resolution. The worst phone in this test was the iPhone 3Gs with very bad low light performance.
Your designs are very pretty and eye catchy. Definitely it would be a great challenge for you and I can say that you have done with it. Great work.
The Smashing Magazine team is very hardworking in terms of developing and creating greater designs for their site. I hope the efforts will paid off soon and they will achieve their goals. It’s always good to reinvent and of course consider the readers suggestions too.
Custom
Design your own Bridesmaid dresses at websites such as vivedresses.com and weddingdressmart.com, or try buybridesmaiddresses.com for a directory of fashion designers.
Nice post its really useful for people and also me thanks bro keep going
Hello
Love your design,love your post
I am happy to find this very useful for me, as it contains lot of information. I always prefer to read the quality content and this thing I found.Thanks for sharing.
Creative art and very useful. Thanks for such amazing work.
Keep it up.
Your designs are very pretty and eye catchy. Definitely it would be a great challenge for you and I can say that you have done with it. Great work.
I am happy to find this very useful for me, as it contains lot of information. I always prefer to read the quality content and this thing I found.Thanks for sharing.
Very nice, thank you
Excellent work. I really like your presentation. I agree that the search box is better the way you suggested. But is a great work and result.
I always prefer to read the quality content and this thing I found.
This is always the policy that the economists advocate when the parties in question are not the big New York banks.
I always prefer to read the quality content and this thing I found.
Paleoanthropological preserved literature, still can give us a great shoes history.
they are a great stuff, very popular both in US and Canada.
I always prefer to read the quality content and this thing I found.
I wish I can do designs like this: (
I want too…
Thinking of buying exercise equipment, confused right now on what to buy? Well, it is strongly recommended that you have confidence in the basic equipment: dumbbells. They are a perfect and convenient to use. They are known for their versatility and are very effective exercise routine for anyone.
Sosyetenin zay?flama s?rr? olarak gündeme gelen Alt?n Çilek dünyan?n lif oran? en yüksek meyvesidir. En yak?n rakibinden 3,5 kat daha fazla lif içeren yap?s? onu dünya zay?flama sektörünün gözdesi yapm??t?r. Bu lifli özelli?i sayesinde net bir tokluk hissi sa?lamakla birlikte en önemli özelli?i vücuttan su kaybetmeden, kaslar? de?il ya?lar? hedef alarak k?sa zamanda yüksek ve sürekli kilo kayb? sa?lamas?d?r
altin çilek
This is not what you imagined your life would be like when you were seventeen, all this incessant working.
and you are exhausted and spent
snore last
cheap gucci bags online sale ,welcome to my shop
Thomasville criminal court said. Criminal court said that crash transpired on Mon afternoon. The investigation then directed deputies towards business wherever police reported they found counterfeit jewellery and glasses in units
Gün boyu sizi tok tutacak besin takvitesi özelli?iyle Iceland Moss
sadece ihtiyac?n?z olan? yemenizi sa?lar ve abur cubur yiyeceklerden
sizi uzak tutar. Böylece i?tah?n?z? dengeler ,daha kolay kilo vermenizi
sa?lar.
izlanda yosunu
I really like the ideas. Looks awesome, keep up the great work function.
selam aran?zda bir türke yer varm?
cheap gucci bags online sale ,welcome to my shop
Followed and loved smashing magazine since their previous design. Loves it even more now.