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.
Peter NorthPeter is Chief Digital Officer of CuriosityStream, a multi-platform nonfiction streaming service by the founder of Discovery Communications (Discovery Channel, Science Channel, Animal Planet, etc.). Peter is also Co-Founder of True North, a management consulting firm and digital marketing agency with clientele that includes WebMD and Salesforce.
