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.
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.
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.
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.
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.