It's Time for a Change

Written by Yaron Schoen February 21, 2011

Read Now Read Later

Yup, I redesigned my site. Well, maybe not a full blown redesign, but more of a realignment. This has been brewing for a long time now and I finally got around to it. Though the previous version is only a little more than a year old, so many things have changed since it’s launch - Web fonts, media queries (even though they were around back then, I wasn’t aware of them) CSS3 and more - I had to catch up with an industry that waits for no one.

Besides catching up technologically, I also wanted to address the site’s design and content. It was important for me to remove elements that served no purpose. For example, the massive footer was removed completely, the tabs on the home page that explained what web design, application and illustrations are (seriously?) - gone, and so on and so forth. I removed them because I felt they were a burden. They were never updated and really didn’t do anything for the user besides acting as eye candy.

The Projects page also got an organizational tweak. Previously they were divided into web / application / illustration. Since today there really isn’t any difference between web and application this didn’t make sense anymore. Further more, my illustrations are mostly done for private enjoyments, so they were taken out of this section. Now the projects are divided by a logical “client work” and “personal work”. I may just add the illustrations into the personal work in the future.

Preservation

In the beginning of the process I had to decide if I was going to overwrite the current site completely or keep it as is and move it to a “version 1” domain. After thinking about it for a while, and after reading two amazing articles by Jeffery Zeldman and Mandy Brown, I was convinced to preserve the previous version. Even with it’s flaws, it is still a great source of pride and I wanted to keep it for as long as I could. You can still view the older posts by simply going to the blog section and clicking on the “archived from ver 1 tab”. There you can see a ful list of all the articles from version 1, but keep in mind you will be redirected.

Typography

This was a major reason for the redesign. First of all, the previous site’s body text was awful. There, I said it. It was tiny, line height was too tight and the font itself didn’t make reading posts or project descriptions a pleasurable read. So, I replaced the body font with the ever so readable Meta Serif. The font size and line height have been adjusted so that they are not only legible on average screens but also adjust themselves to small and large screens with the help of media queries (we will get to these little devils later).

Typekit was still in private beta when the previous site was released, and I used it for body text, but with caution since web typography was still an unknown. Today that is not the case, along with things like lettering.js I no longer need images to make custom headers for my blog posts and case studies. This is a major development, not only for the sake of innovation, but also for accessibly, easy updating, flexibility and more. Having the title in html changes things in the media query arena as well.

Media Queries

Boy has this concept change the way I design. When first reading the article and talking about it with my peers I remember thinking that it was a load of rubbish. Things alter positions on different screen sizes? Heresy! But after a good few weeks of really thinking it through, I started liking the concept more and more, up to the point where I started implementing it into my designs.

For my site I decided that I wanted to blend the two worlds, fixed grids and media queries. I see nothing wrong with the 960 grid, yes it is a fixed grid but the proportions are perfect (for me at least). For this current update the 960 grid is the foundation and the media query principles are applied to it. For larger screens I keep the proportions but simply made the columns wider and elements larger, for smaller screens I shift things a tad, and for the mobile I leave only the necessary elements.

After implementing media queries for mobile and iPad, I realized that the real challenge is for the large screen. On a large screen you have all this empty space, and the first thing that comes to mind is to fill it up. So that is exactly what I did. By creating another column in the grid, the empty space was filled up by elements that would be seen only in this screen size. Like a visual enhancement for the privileged. After a while, this felt a little silly, since my original goal was to clean up the site. Instead I was essentially adding to it. It took me a while, but I finally realized - if the screen is larger, why not simply make elements larger, keeping the proportions of the grid intact. So in the 27” version, the 960 grid became a 1080 grid, body text switched from 16px to 18px (instead of making the line-width longer) and thumbnail images became larger because they had more room. This made me happy, but I found another fun way to implement the media queries. I use them in the blog and case study customization...

Blog Customizations

As you already know, my portfolio is influenced by greater designers. The idea of matching design to content and breaking free from the template took inspiration from the likes of Jason Santa Maria, Dustin Curtis and Gregory Wood. This version keeps true to this approach. In addition, I added a default template to use when the things I have to say don’t justify a full blown article. Those will be labeled simply as notes.

Besides the design tweaks that were implemented into the blog post and case study pages, the fun part of the new version was adding media queries to the customization. Since there really isn’t any need for all the bells and whistles of a customized post or case study on a mobile screen, I simply removed customization for this view.

In the upcoming weeks, I will be implementing the Readability plugin into my site, so that if the customization is bothering you, you can simply strip it and read the post in the Readability view, adjusting the design according to your wants and needs. It is the 21st century, you should have complete control.

Let Me Know What You Think

So that is pretty much it. Since I am experimenting with new technology, things may appear poorly in older browsers. This was a calculated risk and one I was happy to take, especially as a designer in the web arena it is my duty to experiment with new and upcoming technology on my site. Even at the risk of losing a client or two that happen to view my site on IE6 with Javascript disabled.

It is also worth mentioning that this site is a work in progress and some things will be added slowly, like new/old case studies, 404 pages and more fun surprises. I just wanted to release it to the wild, and continue working on the smaller bits after.

I gotta say thanks to some of the people that helped me out. Trent Walton, Josh Brewer, Matthew Smith and Brian Hoff, thanks for looking out for a brotha. It means a lot! Ben Bodien thanks for tolerating my n00b coding questions and answering them in a way that my silly, right brained designer head can understand. Moudy Elkammash, thanks for all the dev backup help along the way. And last but not least, thanks to everyone that had a kind word to say about my previous site, it meant the world to me hearing such nice things. I hope this new redesign does justice to the previous one.

View original editorial design


Written in New York. © 2013