iamsteve is a design and code blog, focused on designing with Illustrator and coding maintainable CSS. The blog aims to take a relaxed approach and make no assumptions when it comes to learning.
The brief has two components to it; improve the aesthetics and introduce a fun and friendly feel. Related; it should encourage new visitors to browse the website and return.
The website was last redesigned in 2012. Started sometime towards the end of 2011; in web terms that’s ancient. The site has had minor design tweaks and additions, but nothing dramatic. As the time between then and now is huge, it’s the perception of skill that isn’t being shown. The blog has evolved to be the core part of the website.
Before an update to remove the outdated portfolio and focus on the blog, it was a portfolio first. The blog was secondary, so quick changes meant in the end it was lacking that creative edge. It would be difficult to create the perception of being a designer and continue to grow an audience.
Problems to solve
There are two primary types of people who visit this website. Those who are currently working and those who are learning. The distinction between the two is the time they have. The person working wants a quick solution and the person learning wants to be guided and understand why.
I use sketches to determine the best order for the page elements to go. Some of these sketches show early explorations for style too. It’s an important part of the process.
I wanted to find a balance between new and popular content, and bringing in a sign up form for the newsletter on the homepage. On the article pages I wanted to prioritise going onto a related article.
Once I had a good idea of where I wanted things to head, I begun creating the wireframes. Making the layout as accurate as possible, means less frustrations later.
Starting with the home wireframe, I initially wanted to have an introduction alongside the latest post. The reason being; many visitors are new, and I wanted to show the website was active. The larger post shows the date with prominence, which hints at how active the website is. The introduction lets people know if the website is for them.
Overall, I wanted the homepage to be an overview of the blog. I used the latest and popular posts to do this. With them being in horizontal scrolling regions it allows to maintain a quick overview. The newsletter is placed between, to not only highlight it, but break up the page.
Moving on to the blog, or what is considered an archive style view of all the posts. It’s not a hugely visited part of the website, but I wanted it to have a little more to it than just being a list.
After the wireframe stage I moved on to designing the homepage. I moved away from the introduction alongside the post area and opted for a more ‘hero’ like approach. This allowed me to draw upon the content of the website through illustration.
I wanted to use illustrations of my dogs to add a little fun and a mascot kind of idea throughout. Instead I changed their style a little and moved them into the footer. This allowed me to make the page feel balanced, and add more focus to the newsletter.
I wanted to make sure the scrolling areas had some affordance. To do so making sure a post is cut off hints there is more beyond. Once you’re aware the scrolling/dragging is nicer than clicking the arrows.
Home small screen
The difficulty with a smaller screen is how do I retain the detail of the illustration? It could easily have been squashed down, but instead I made 4 different sized illustrations to cover the majority of screen sizes throughout. This made sure the stroke weight remained consistent and sharp.
I kept generally the same kind of layout throughout, horizontal scrolling areas. It makes for a relatively easy to browse experience when you use both axes. You can identify categories quickly and scroll along should you want to.
I wanted to keep the navigation and search out of the way and encourage browsing through articles. So I opted to hide them behind icons. In the future I want to explore a bottom navigation.
The blog archive is a list of all articles, scroll through, choose one to read. I wanted to try and achieve a consistent style with the featured images. There were around 60 posts without featured images when I started the redesign. So this is something I’m still working on!
Posts without a featured image will randomly select from 4 design and 4 code ‘placeholder’ images.
Blog small screen
A thing that has always bugged me about responsive websites; which have list of content, is to immediately revert to a single column. Oversized imagery, oversized text, long scroll and it takes an eternity to get an overview of the content.
I addressed this through keeping two columns throughout and smaller but still readable text. However, I kept the text purposefully larger within articles.
The main issue I wanted to address with an article was, again, increasing the amount people browsing the website. The vast majority of users arrive by search. So to do it without being annoying, and maintain a great reading experience, is particularly tricky.
The introduction of featured images and immediately following the article with the next to read section, help to encourage browsing. The ability to have more flexibly sized images was something else I wanted the design to accommodate.
‘Next to read’
The next to read section turned out to be the most important change I made to articles. In the previous design, I had 4 randomly related articles. My theory was one hand picked relevant article, placed close to the end of the article would be more likely to keep people browsing the website. Rather than an indecisive choice of four.
It turned out to be true. The first week after launching the design usage saw less than 10 clicks per week (if I was lucky) rise to 108. A dramatic improvement, however, the usage remained consistent week by week.
A mixture of the style, placement and moving to a single article helped increase pages per visit.
I have chosen a flexible colour palette, to give enough variety in tints, shades and tones for featured images and the like. Reds, dark purples and yellows are very complementary. Red has an air of confidence about, naturally it complements well with yellow.
Additionally I added a green and a darker blue. The reason for the choice of red and green was the relation to the illustrations of the collars on my dogs. Which was down to it suits their fur colour, as strange as that may sound. To bring a common element to the opposing red and green, the palette is tied together with yellow.
I had the idea to kind of have friendly mascots which I could dot around the website. It was also a huge challenge for me to do these, as illustration is something I work to be better at.
They are based on my dogs, so it’s quite personal to me and it helps to put across a bit of my personality throughout.
I wanted to try communicate the design tutorial aspect of the website. I focus on using Illustrator, so it becomes more apparent why the tools and screen have an Illustrator looking app.
As mentioned I wanted the header image to adapt, but not be squashed. Progressively it reduces but retains as much detail as possible. You can see the design in the app change slightly too. This kind of gives more of a responsive design message.
Finally, my blog is an area for me to experiment, and allow myself to constantly learn and improve. Type is a passion of mine, so lettering naturally made sense. It complements the design and illustration, as well as adding a little bit more fun.
Over the previous design, this design has seen an average increase of 10% more pages per visit. The first month saw a 29% increase in page views. This has continued to average 10% more page views each month.
These results are great for a blog where the majority of people are finding articles through searching for a specific problem and leaving. To be able to make people think twice before leaving is a difficult problem to solve.