With a name like Remix Design, you can tell we have a special penchant for redesigns. I’m especially proud to announce that our own site, www.remixdesign.ws, has been born anew, with significant improvements in design, content, and code.

As this particular creationg won’t make it into our actual web portfolio until the next redesign, we won’t get a chance to give the typical “objective/solution” breakdown. So, let me offer it here.

objective

This site serves two main purposes: to display our portfolio of work in a setting that makes it shine, and to serve as a portfolio piece in itself, as a supreme example of how we make websites.

Our previous design leaned more toward the “flashy” side of things, with plenty of animation but not enough descriptive text or categorization. This time, we wanted to push for increased clarity and usability, while keeping it engaging. We also needed more descriptive copy and informational text to give potential clients a closer look at how we do things.

Code which may have seemed snazzy at the time of the last redesign now needed significant improvements, and with all the other changes, the whole site would need some kind of rewriting.

solution

Every incarnation of the site has had some element of dynamic change (our company concept), usually a certain element that changes depending on the section you’re currently browsing. This time, the color scheme, and the logo, changes to something appropriate to the content of the section. For example, in “web,” the color changes to default-hyperlink blue, and the logo becomes pixellated. We believe this is not only conceptual, but makes exploring the site more fun and interesting.

The gray background was done in the best interests of presenting the portfolio work. As a completely neutral color, gray is least likely clash with, or interfere with the perception of, any work displayed within it. Whether the work is light, dark, colorful, black and white, high contrast, or quiet, gray serves as a neutral matting.

Every project gallery, and every image within the gallery, is accompanied by a thumbnail, instead of just a button or a text link. This increases usability by giving the user a preview of what they’ll be seeing.

With so much more text, even after editing it down, visuals were needed to break things up. As the site itself, when it’s not displaying work, is very clean and neutral, so the sketchy and whimsical illustrations made for an entertaining contrast. When the project calls for our own illustrations (not often), they tend to be very design-y: clear and bold shapes, expressing a strong concept.

Much of the innovation in the new version can’t be seen on the outside; it’s underneath the hood, in the PHP code. Previously, there had to be multiple include files, based on what directory level the file existed. By creating a variable for this information, the amount of repetitive code (and the time needed to edit it) was slashed by more than half.

The single most useful innovation is the “gallery script.” The script takes a few variables for each individual work in our portfolio (such as the title, acommpanying text, and the number of screenshots) and uses this information to automatically create the page. This way, every single work runs off only two files, making adjustments a breeze. This solution is also highly adaptable for any client site needing a large number of similar pages, such as product listings on an e-commerce site.

Finally, the whole site validates for XHTML 1.0 Strict, instead of just Transitional. As a strong proponent of W3C standards, there’s no excuse for this site not being an example.

What do you think about our new look? What was your first impression? How did you feel after looking around a bit? What would you like to see added or changed?