MacGuru Consutling's New site

So Flat and So Clean
Responsive WordPress Build

MacGuru Consulting is a Los Angeles-based company providing personalized, one-on-one training, support and consultation for the complete cast of Apple products. Run by Sean Graham, who previously worked as a composer for Hans Zimmer’s Media Ventures, we have a ton of respect for anyone that strikes out on their own. Appreciating the huge role a website can play for a small business, building Sean a great digital product was a whole heart affair.

Sneak a Peak

MacGuru Consulting V2.0

We actually met Sean a while back, when building Version 1 of his site. At that time, Responsive design was just starting to take off and I used the first release of something called Bootstrap, by the Twitter lads. Since then, I’ve learned a lot about RWD, developing my own best practices and frameworks along the way. As such, V2 is a completely handcrafted effort, from graphics to markup to custom WordPress build… well, minus a modified version of Foundation’s grid system.

Since Sean’s business revolves around the world of Apple, the flat and clean styles of iOS 7 were the jump off for the site’s UI. Lacking any concrete images to pull from, the story is told through a display of related objects and Apple devices. To keep things a tad more interesting, a variety of subtle scrolly effects and fixed position backgrounds are toyed with.

Flat Icon Animations

When approaching the redesign, my first step was to create some big ole’ flat icons for the homepage, representing MacGuru’s core services. In fact, most my projects now begin with the iconography to set up a clear visual language while establishing the overall tone of the site (Often starting with a Dribbble Shot). By introducing some animations for the icon’s hover states, the snazzy factor was raised a smidgen. First run had the animations as a constant (sans hover), but that looked pretty crazy.

Training

Support

Consultation

Case Studies


To highlight examples of Sean’s happy clients, we created a Why Me? page, that employed a unique tab element to divide sections for Testimonials and Success Stories/Case Studies. As the case studies were quite short and without imagery, I consolidated them to a single page and created a series of full wrapper images representing the concept at a glance as you scroll.

Mobile Layouts


Since iOS7 UI was a big inspiration for the site, every last element had to look great on mobile. We wanted a super clean and crisp look, placing special emphasis on tight modular scale typography, vertical rhythm, good use of white space, some nifty translucent elements, and just an all round finger-tappin’ good time.

Various Mobile layouts for MacGuru Consutling's new site

A Simple Mac Blog

A blog is a great way to keep targeted content flowing through a site and communicate with current and prospective clients. However, I’ve found that many find the WordPress admin a bit discouraging, resulting in dreaded inactivity. To combat this issue, I wrote a series of functions to automate the process down to a few simple steps – Type the post, drop an image into the editor, click publish. Featured images, read mores, WYSI styles… you guys can kick rocks.

The blog layout follows a modern single column that looks great from desktop to mobile. Supporting the blogging strategy is a custom MailChimp template designed in the likeness of the blog.

Go on now and give the new MacGuru Consulting a little peak.

Sneak a Peak