AttackPattern homepage on laptop and mobile

Spacetastic Responsive Site, Super Custom WordPress Build

AttackPattern is a tight knit team of app developers, hailing from the ranks of Netflix and Microsoft. Initially focusing on WIN8, they wanted to expand their offerings into iOS and Droid and rebuild / rebrand their online swagger. Requirements included a custom WordPress build to serve more as a real CMS, evolved portfolio pages to highlight their work, and a killer company blog to drop all that open source wisdom. Everything else, from design to copy to admin build, would be up to us.

Take a Peak

Space is the Place

Something about the AttackPattern crew reminded us of NASA’s Apollo era. A team of super smart guys, exploring technology to build amazing things. This idea stuck and would become the project’s overarching theme. Luckily, NASA has a Flickr Common’s page chalked full of great imagery of the Mission Control fellas, shuttle launches, satellites in space, and so on. These finds were used to build dramatic full wrapper hero sections on each page, further enhanced by a shuffle text animation of the headers. From page load, the H1 and H2 tags shuffle from Binary 1′s and 0′s into the title text. A little touch to provide themed visual interest. Pretty sweet.

For the Headers, we used a great newish font, Lovello Black. A Futura derivative, it’s geometric sensibilities perfectly complemented all the space stuff. Color palette was also a major identifier, with light and dark blues repeated throughout.

AttackPattern about page AttackPattern about page our process icons AttackPattern services icons on tablet AttackPattern homepage mobile

Custom Iconography

When we say a ‘farm to table” approach, we mean that all of the site’s assets are hand crafted. This of course includes all graphics and iconography. From the beginning, we wanted to craft a unique icon language that pulled from the overarching Apollo-period theme. The end result was a line-based icon set we dubbed Spaceicons.

Spaceicons Line-based Icon Set by SoSweet! Creative

Big Flat Icons

While the line icons were used for section headers and service points, a few big ole’ flat icons seemed like the natural paring. We went through a few ideas on this front, ranging from conceptual to literal. In the end, it was decided that cohesion and immediate recognition should be the highest priority. But, these days it seems like everyone and their mom is dropping flat icons sets, so we wanted to make sure that ours were unique, fresh, and not soon to be found in 100 Amazing Free Flat Icons Vol 3!. Fortunately, the space and science stuff lends its well to all kinds of graphical representations.

The Almost Flat circular icons on AttackPattern

Animations and the Unexpected

It was decided to use a scroll-based approach for the layout, condensing more info onto fewer pages. The idea was to reveal the Attack Pattern story section by section. For this to work, it’s important that you keep the user on their toes along the way. Surprise them with little unexpected treats. Put effort into all the little details. So a variety of animated elements are rocked across the site. This includes some all-sexy-like page transitions, scroll triggered fade-ups and ins, an orbiting satellite, and animated icons illustrating workflow process. We accomplished this with a bunch of CSS Keyframes, a bit of Jquery, and even a few GIFs.

AttackPattern icon animation

1. Design

AttackPattern icon animation

2. Develop

AttackPattern icon animation

3. Deploy

Mobile Layouts

A ton of consideration went into the mobile layouts. From the offcanvas mobile nav, to the full wrapper heros and grids, to maintaining well defined vertical rhythm and modular scale typography. Nothing gets pulled out, just reworked for optimal viewing at smaller resolutions.

Various Mobile layouts for AttackPattern's new site

The Blog Grid

The blog section of the site had to be a priority, so AttackPattern could not only share their notes on the industry, but also code snippets and other awesome open source stuff they build. To make it stand out, we built a blog-specific, full width responsive grid for the index, wherein the posts would output into rows of boxes. Using Barrel’s awesome MixItUp plugin enabled sorting based on category. For the actual posts, we opted for a modern single column. And, everything was super automated on the admin side. Just upload your image, add some text, save, and boo-bam.

Portfolio Templates

We wanted the portfolio pages to go beyond the boring series of screen grabs that we’ve all seen before ad nauseam. Ideally, each folio page would tell a story of the project, in a visually enticing and unique way. However, hand coding and styling each page independently was not an option. In fact, the entire process of creating a new port item had to be code free.

We wanted the portfolio pages to go beyond the boring series of screen grabs that we’ve all seen before ad nauseam.

So we started with designing a nice page template, that covered aspects of the project in different sections. Then on the admin side, we used custom post types to create and manage the portfolio items, and custom fields for adding the content. The fields were form inputs and image uploaders that essentially mimicked the frontend, allowing one to go through and add content step by step. Additionally, we added a few conditional options to output unique elements on the page if so decided. To sweeten up the UI of the Wp admin, we created a little plugin to make it all look pretty snazzy.

AttackPattern's Portfolio page template and corresponsing wordpress admin

But enough from us, go give Attack Pattern’s shiny new site a gander.

Take a Peak