web design Archives - Jones.in' for a Blog

Merry Christmas from the Joneses

I hope everyone is having a wonderful holiday season. My wife and I decided to try a new take on the traditional Christmas card thing. We’ve decided a website card is more our style. Since we still have abbyandchristopher.com from our wedding website, we’re going to update it each year with a year in review and Christmas greeting for friends and family.

For me, it’s a great way to experiment with some Web design techniques. This year’s site uses the “full-page” trend that’s so hot now. It was fun to experiment with and I’m pretty happy with the final product. I was careful to craft something responsive since so many people will be looking at it on various devices. I wasn’t able to test on everything, but from the testing I did do, it works well at any size. I look forward to trying something new next year. I think I’ll archive each year’s site, which will be fun to look back at as time goes progresses.

Merry Christmas, everyone!

A Responsive Retrofit: Frostic School of Art

Frostic School of Art Homepage A long, long time ago, in a gala… I mean when I was but a mere student of graphic design, I designed a really cool website for the Frostic School of Art along with fellow student, Max Millermaier. When it was time to build the site, I was hired on after graduation to do so. So in the summer of 2009, I was so psyched to launch, what at the time was, a bleading-edge, video-background website. Fast forward four years and the site was starting to feel sluggish, dated and disjointed.

A few months back I started thinking the Frostic School of Art’s site was a prime candidate for a makeover. I didn’t want to completely remake the site. Instead I decided it just needed to take advantage of the latest trends and technology. I dropped the dreaded use of Flash for videos and replaced them with HTML5 video, thanks to BigVideo.js.

iPhone screenshot of Frostic School of Art website The next step was to make it mobile friendly. I’m a huge fan of responsive websites and have dabbled with them for a while now. I recently did a project that used the Skeleton boilerplate and found it to be very easy to use and produce great results with. I set off to re-write the whole site on top of the Skeleton. It wasn’t a small task, but in doing so I removed a lot of messy and redundant code. Like I said, the original site was made in 2009. A lot has changed in the Web world, and I’ve learned a lot too. Now the site looks awesome whether you’re on a desktop, a smartphone or a tablet.

Another goal I wanted to complete during this process was clean up. Over the years, files, directories and content became a mess. By starting from scratch, I was able to cleanup a lot of the mess. Now the end user should have an easier time getting around the site and finding what they’re looking for. There’s still some work to be done, but it’s already improved leaps and bounds.

Overall, I’m quite pleased with this retrofit. It’s not always an easy task to take an existing site and slap on a responsive framework. I suppose in a way, I didn’t really do that. I more or less rewrote the site, staying within the design guidelines of the original, but replacing almost all of the underpinnings. It was interesting to revisit a design from four years ago, and I’m happy with the results. What do you think?

Screen Shot 2013-05-15 at 2.48.09 PM

Project: Partners in Dance

Screenshot of WMU Partners in Dance website.

I recently launched a website project at work for Partners in Dance, which is a community support group for Western Michigan University’s Department of Dance. It was a fun project because there wasn’t a ton of content and I could have a little fun with the design.

I opted to keep it very clean and simple with a big, bold area for photos. The dance department provided me with some great shots from previous performances. I noticed most of the pictures had a natural “fade to black” quality to them. I capitalized on this by creating a black band at the top of the page. I then set it to randomly choose from a variety of images that all make it seem like the photo exists across the entire top of the page.

The “Partners in Dance” logotype at the top carries over from a brochure they had made previously. The rest of the type is a Google web font called Lato. I was trying to find a nice sans-serif with a good mix of weights and Lato seemed to fit the bill.

Below are a few more screenshots, but be sure to check out and explore the live site. Feedback? Questions? Leave them in the comments.

Screenshot of WMU Partners in Dance website.

Project: University Theatre 2012 Season Site

At work I’m often playing within strict guidelines. The university is moving everyone into the same look and feel on the web as part of their massive branding effort. It makes sense but it can be dull when you’re working on it day after day. Sometimes it feels like I’m just going through the motions.

University Theatre Season website screenshot

That’s why I was so excited to have a project that breaks the mold. The University Theatre at Western Michigan University was interested in a website to feature their upcoming shows for the new season. Luckily they fall under one of the areas I work for so I was happy to oblige. The overall design of the posters and other materials were done by interns in the Design Center (oh the memories). They were a great jumping off point for a new website.

I tried to keep the overall “awaken” theme the interns had come up with in their work but translate it to the web. I filled the site with the pertinent information about each show and how to get tickets. It is an extremely simple site and there were still some stiff requirements but compared to the templates I usually work in all day, it was creative field day. It’s nice to break away from the constraints every once in a while and think creatively. Make sure you explore the University Theatre 2012 Season Site and let me know what you think.

Designing a Wedding Part 2

If you haven’t seen Designing a Wedding Part 1, I went over how we got started with our invitations. After that design hurdle was jumped, we moved on to our website. Wedding websites are all over the place these days and there are plenty of free templates to get you started. Because we already established a very unique look (compared to a traditional wedding at least) we opted to design our site from the ground up.

abbyandchristopher.com homepage

We started with a splash or welcome page. It very closely resembles our invitation design but with more simplified information. We added our links to bottom to allow our visitors to get to the more specific information they’re looking for.

Our Story webpage

We tried to keep it simple and had only five links. We did one for our story which gives a little background on how we met and how our relationship developed. There’s a page for the locations of our venues with convenient links to maps and directions on how to get there. An accommodation section lists nearby hotels. We decided that an online RSVP form would be more convenient for guests and us (a win-win you might say). The back-end of that is powered by Google Forms. I was able to completely customize the look, which I discussed in this earlier post. Finally, we added a page with links to our gift registries.

locations page of our wedding website

The “secondary” pages all have the same design. They use the top from our invitations and homepage and turn it into a unifying header. The links turn into a simple menu to the left to allow visitors to navigate from page to page very easily.

The whole design is very simple and compliments our invitations very nicely. The invitation directs recipients to the site so we thought it was important to give a unified experience. While it’s not massive or even very complicated, I think it turned out to be a nice little site with all the relevant information easily accessible.

We haven’t made it this far but I do hope to incorporate the designs into our program and thank you notes. As those progress I’ll throw up another post about them. I always think it’s fun to see a whole design package and how all the pieces fit together and this particular project has been extra special for me. I hope you’ve enjoyed this look at our wedding design process.

Meaki is Pinterest for Web Designers

Pinterest is quite a big deal right now. It’s branched out beyond just ladies pinning crafts and has even become popular with companies and sports teams. I’ve had an account for a while and I think it’s a great services. It’s a great way to keep track of cool stuff you find on the net. That said, I don’t use it. It doesn’t fill the one need I really wanted to use it for, pinning websites. On Pinterest, you’d need to screenshot a website, then upload that screenshot and paste in the link of the website. That’s a lot of work just to pin a cool looking webpage. After that realization, I pretty much pushed Pinterest aside and all but forgot about pinning.

Enter Meaki. It does exactly what I was looking for. Instead of just pinning a single image from a website, it actually pins the whole site. It’s perfect for web designers. I often come across websites with a cool feel or a neat trick that I’d like to remember for later. Inspiration is all over the web and as a designer it’s nice to have a collection of said inspiration easily accessible when your next project comes along. Meaki makes that easy. You just get their “Clip-it” bookmarklet and then “clip” any cool websites you come across. When you go back to your collections on the Meaki website you can see the whole site you clipped, not just an image from it.

A possible issue I see is what happens if a site makes changes after you’ve clipped it? Does Meaki actually save the site when you capture it or just embed the site? I haven’t been using it long yet but so far Meaki is a very promising service and I think it will fit in to my workflow quite nicely. I could even see creating a collection of sites for a particular project and then sharing that with a client as an online mood board. While their interface isn’t quite as slick as Pinterest yet, Meaki is still a very young service so I expect it to get better over time. It might not ever gain the widespread and mainstream success of Pinterest but I think within the niche market of web designers (and those who prefer visual bookmarks), Meaki could really take off.