Redesigning SitePoint: the Design Process Insider View

Peter North
Lead Design Writer at SitePoint
This entry is part 1 of 4 in the series Redesigning SitePoint

Redesigning SitePoint

Whether you’re an individual designer, a design studio, or a design website, you can’t be an authority on web design without following your own best practices. That’s why we are thrilled to show off our brand new redesign. If you’re reading this, you may have already noticed some of the obvious improvements, but let’s take a closer look at the redesign process from start to finish.

In the short interview below, SitePoint’s Lead Designer Peter Bakacs shares some insights on the process behind redesigning SitePoint. This is the first of a series of articles about the new SitePoint.com.

1. What are your first few steps when you take on a redesign of such a large, popular website?

My initial first steps were to spend time looking over the existing site, seeing what improvements we could make and to simplify the user experience. Next I sketched up key pages on paper with the team to work out where content will be placed, navigation, article format, advertising etc. Once these initial pages were loosely worked out, it was straight into wireframes using Illustrator. I usually add color and fonts to the wires before moving into Photoshop and create a mood board for reference.

2. Which of your design decisions were determined by objective metrics like site speed, amount of mobile traffic, and file sizes? Which were determined more artistically?

The thinking on this redesign was to showcase all these amazing articles and tutorials. Users come to SitePoint to learn and explore what is current in development and design, so we purposely kept the site lean with more text and fewer images. Another area that we were really conscious of was how the new site would translate onto other devices such as mobile.

3. What were some of the biggest challenges and constraints that you encountered?

The channel navigation on the home page was probably the most challenging part of the design, we experimented with large images and found that it just didn’t work, so we introduced our color palette with the channels in clear view, so users wouldn’t have to navigate via the drop down, this also translated beautifully to mobile and tablet, also cutting back on load time.

4. Were there any aspects or components of the design that didn’t make the finalized version?

The big hero image on the homepage.

5. How did you use color, contrast, and orientation to organize SitePoint’s large library of content?

I chose a palette that reflected the channels, Orange for HTML (originally from HTML5), Blue for CSS Red for Ruby etc. I wanted to keep that connection.

Redesigning SitePoint

8 Things We Learned from Relaunching SitePoint >>

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • ralph.m

    Wow, what a radical new design! I must say, I really love what you’ve done. It really lifts the site and the SitePoint brand for me. I feel silly saying this, but it kind of makes it feel cool to hang around here again. Well done. :D

    • Nojan A.

      I totally agree. cool vibe flowing in here :)

  • Anonymous

    Well done Pete.

  • Anonymous

    If anyone wants to chat with Pete further about the redesign, or his UI design philosophies, don’t miss Talk with the Experts this week. https://experts.learnable.com/

  • Kevin Yank

    This is a tantalising taste of the design process, but I’d love to see something more in-depth. Show us your grid, and talk about how you settled on it. What led to your choice of typeface? What are some of the elements of the design that aren’t obvious at a glance? I’d love to see the evolution of the design from first sketch to final coded layout, with commentary from those involved.

  • Kevin Yank

    One of my favourite aspects of the new design is the tagline on the home page: ‘Learn to create’. I know how much of a struggle it can be to find a one-liner that describes a site as rich as SitePoint, and I think these three words capture it better than anything that has appeared on the site since the very beginning. Kudos to the team that came up with it!

  • Anonymous

    Thanks Kevin. The team is working on more articles with details about the process. Coming soon :)

  • tjjackman

    nice work axe

  • junhao chen

    great work

  • Pedro H.

    Looks great, Sitepoint.

  • AnggaRifandi

    Honestly, I really love with SitePoint’s new design, simple, faster and help me focus on reading articles (by reducing “noises” that mostly caused by to many images or links).

  • james

    Where’s the forums??

    • Anonymous

      Since you asked so nicely, james, I’ll tell you: same place as always. The link to the forums has moved to the nav bar in the footer, where it says “Forums”.

    • Kevin Yank

      Looks like the Forums are now considered a separate site, linked-to in the footer (along with Learnable and the Reference).

      • Anonymous

        Kevin, the Forums and Reference are still based at sitepoint.com. Learnable is a separate site.

  • james

    A “nav bar” in the footer eh? :) Sorry didn’t know there was a nicer way of asking “Where’s the forums??”

    To be polite… Thank You! For telling me where its buried.

    • Anonymous

      No worries, james. I don’t know what else to call the links in the footer. They help us navigate, so …

  • Anonymous

    The new Design looks great, now it’s simplest, effective and decent. Now I can directly found my article topic more easily.

  • Anonymous

    Hey everyone,
    A link to The Forums will be in the main header in the next day or so. We were making sure the upgrade and reskin were up to scratch first. So hang fire, we’ll be back! ^hawk

  • Tim

    On top of that your logo now has even LESS of a brand identity. When you redesigned the logo you lost much of SitePoint’s brand. Now you’ve removed what little what left.

  • Gary Waddell

    Looks beautiful…one comment, on the ipad portrait, the top right ads eat up the entire right space, and I would have thought long scrolling content (ie this page) could make use of this space. Otherise, typography, layout, colours and design in general is very appealing and comforting to see.

  • Keith

    Hmm I never likes the changes Microsoft made to the UI to be “Metro”. While the “kiss” method does work, I cant really agree that “Metro” is a “beautiful” style for a website. I have just had a look at the site on my Nokia Lumia 800 (Windows Based) your “home” page and “CSS” page are ok. The rest are not truly responsive they are too wide and you have to scroll sideways with the phone in “portrait” mode. There are also black areas beside the header and lower content, like it hasn’t been set up properly in the CSS to suit the width. In Landscape is seems ok, I am not exactly sure what you did with the @media feature. This is just some constructive criticism guys.

  • Simon

    Hate to be a naysayer but I’d have to say the homepage isn’t a winner for me. It’s like the designer couldn’t decide on a colour so he chose ALL of them. And then shoved them right in my face. It’s so obviously influenced by the awful “flat square” windows-8 look. I’m afraid it’s worse than derivative for a site that’s supposed to be about innovative design.

    FYI – I’m not a designer. I don’t have an axe to grind about one design style over another. This isn’t a professional critique. I’m just a site *user* and this is just a raw, immediate response to the new look.

    Then there’s the grid of content boxes below the rainbow. It’s hard to scan, and the color-coding is almost invisible so that’s another fail. I don’t mind scanning a grid to find the section I’m interested in but it’s annoying to have to look at every single box to determine whether I want to read the content. Little icons would improve this (a little – it’s fundamentally flawed I’m afriad). On the plus side your advertisers must love the new look. I’ve read the ad for Web Directions South about ten times as it really draws the eye in the absence of anything else that looks interesting on that page.

    On the positive side, the new article pages are a bit less cluttered, but they’re also a lot less visually interesting.

    And I agree with the comment above that sitepoint has totally abandoned it’s brand. If I didn’t know where I was I certainly wouldn’t remember where to come back to.

    I get it. This stuff is HARD. Especially when you’re going for a responsive design. But sometimes I think there’s a lesson to be learned here: you can’t make one size fit all. Responsive design is a great idea (at both a technical level and in theory), but it doesn’t mean you can build every site using a responsive template and satisfy the different needs of all those users with a single solution. Sometimes you have to ask yourself whether there’s a good reason to build a mobile site that’s *designed* for a small screen and provide a richer, more vibrant experience for users on larger devices. And to be clear – I’m talking about having TWO designs here that are clearly linked at a design level but which are catering to slightly different audiences and needs.

    Or to put it more succinctly: just because we can do something a certain way doesn’t mean we should.

    Something to think about.

  • Skweekah

    Have to agree with the logo losing it’s identity a bit. Otherwise, nice. Change is good.

  • Keith

    Hmm comment removed???

    • Skweekah

      I think it’s just above Simon1.

  • ShyErdy

    Give ‘em air and they’ll let you know most things

  • Duane

    As I study the many sites turning to responsive design, I’m struck by the lack of information shown when displayed on a large screen – big sparse text, lots of white space, and a paucity of images. It seems that in most cases the sites has been optimized for the narrow screens. What’s the point of the user having a bigger screen if the site isn’t going to make use of it? Might as well retreat to the narrow layouts of yesteryear and utilize only the left-most 400 pixels or so.

    • ralph.m

      “It seems that in most cases the sites has been optimized for the narrow screens.”

      I tend to have my browser set fairly narrow on a large screen, as I prefer a single column of content. Just because there is space to spread things out on a large screen, do users really want to have to scan a large area to find what they want? I don’t know if there’s been any research on this, but personally, I hate it—and I suspect that a lot of content is not seen at all when it’s spread all over the place.

  • Anonymous

    Design is very important!

  • Aron

    I’m a big fan of the reductionist approach and minimalism, however the new design is incredibly boring, the typography choices are uninspired and there is not enough interest on the home page. On a positive note however the biggest improvement is moving all the sections that were spun off onto their own sites, back to Sitepoint and then improving the mess that was the old navigation.
    *One one final note of interest when Peter was describing his design process, there was no mention of design in the browser. Why is that?

  • JJ

    I would tend to agree with that. If a poll were taken, I’m betting most people with large screens rarely run the browser full screen. Rather, the benefit of a larger screen for me, and from what I’ve heard when it is discussed is the ability to run more things side-by-side.

  • Ronnie

    Regardless of screen width, I agree with Duane and Aaron on paucity of images/boring.

  • Anonymous

    There’s nothing boring about it. Fantastic, clean new approach.

  • Anonymous

    Well, it may be a bit boring – as is the new Microsoft Office, which was my first resemblance – but I’m here to for the articles, opinions and reactions to articles.

    I’m not going here to be impressed with eye candy or distracting design. And the new site does just that, I think. Each area has it’s own clear focus/color, the attraction is drawn to the content. Where it should be, IMO.

  • Anonymous

    Nice!!!

  • Sam

    I appreciate the usability of the large links/tiles on touchscreen devices. However, the new design looks absurd on the PC/giant monitor combination that I use for development/programming. Each colored link/tile on the homepage is so large that it can engulf 400 of my mouse cursors. With the almost pixel-perfect precision that my mouse cursor can provide, it’s especially comical. I couldn’t miss it if I were drunk, nearly blind, and hallucinating.

  • Noel Rodrigue

    I second the “Clean approach” comment. I’m here for the reading and my eyes aren’t getting tripped in the scenery. Well done guys.

  • juan

    excelente Reading experience! loved the White smoked background!

  • Chris Smith

    Brilliant work guys, SitePoint has always been my go to resource and now I have some eyecandy too

  • Peer Rademeyer

    Nice and slick.

  • earther

    This is ‘intelligent’ design? I have to scroll to see information that if designed ‘intelligently’ could all be above the fold, so to speak. Too many little boxes. Fonts too big. I am not 4 years old! But this is the way the web is being dumbed down. It’s a virus and you have been infected.

  • Duane

    I agree with you, Earther. This is a step backward.

  • John

    mmm, earther, I totally disagree, I think the redesign has made it quicker and easier to locate content.
    Above the fold? come on it’s 2013. Bravo job SitePoint!

  • Anonymous

    I really like this new design! The one tiny thing that I don’t like is how the ads are displayed on a topical or series category page. It broken the nice reading experience.

    One thing I really love though is the inline commenting in the articles. I’m not sure if this is a brand new feature? I don’t remember seeing it before. but i certainly noticed it now! What commenting platform is this?