Swole and Flexy Design

I created a digital publication for Crossfit diehards that highlight my abilities in Mag+ software.

Brittany Keller
Brittany Keller UX Creative
7 min readMay 7, 2017

--

Crossfit Journal Cover

I chose to do a Crossfit themed magazine to push myself to create something different and out of the box from my current design habitat. One goal of the project was to teach people something, and to push yourself out of your creative comfort zone. I wanted to achieve these requirements, by making a fitness magazine — something I was not very familiar with. I do have a decent general knowledge of Crossfit (I have been a crossfitter off and on for about 5 years.) I thought a good challenge would to create a fitness magazine that was beautiful and sleek, while also informative and engaging.

I started out the design with a decent idea of what I wanted to do, and with some inspiration already in mind. First I created a list/web of all the requirements I needed to reach, and what content I wanted to include in the publication. Then I began sketching out each vertical and what I wanted to include on each page in that vertical. I would draw out a few different layout ideas, so I could pick the right one, and maybe use the others in different parts of the magazine. Starting this project out, I had a better idea of my limitations with the software (this was my second publication using mag+, check out my first publication: Sundance Magazine.) So I was able to plan out better what I could do, and what I wanted to include without having to change too many things as I actually began working.

Information Web and Cover Design Sketches
Vertical Layout Design Sketches
Vertical Layout Design Sketches
Vertical Layout Design Sketches

Now I did have a better idea of what I could and couldn’t do with the software, but that does not mean that I followed exactly what I had planned out on the sketches. Many of my ideas changed and shifted as I actually began working on the publication. There were quite a few obstacles to overcome throughout the course of this project, some I trudged through and got working, others I found work arounds for, or just completely trashed.

The first frustration was the software itself, when setting up the new magazine files and folders. Mag+ is very sensitive, if one thing is off, nothing works and madness ensues. I was having major problems exporting my verticals to test on my ipad to see how everything would look, and if it was working correctly. It took me a few days of trial and error, and rearranging files, or deleting and starting over to fix it. But once I got everything settled and back on track it was smooth sailing for the next couple of check points.

I was able to collect plenty of assets, to use, and ended up making a sort of template design for each vertical. I incorporated bright colors, and diagonal lines to give it a sense of motion and energy. While also trying to incorporate simplicity with the fonts and layout.

Fonts used in publication
Final Index Layout Design
First Vertical Final Layout Aspects
Second Vertical Final Layout Aspects
Third Vertical Final Layout Aspects
Fourth Vertical Final Layout Aspects
Fifth Vertical Final Layout Aspects
Sixth Vertical Final Layout Aspects

I was able to create most of the verticals with little to no problems, the only thing I has issues with was embedding HTML content that I had made in Hype. No matter what I did, I could not get it to work, when I would insert it into my document I would break the entire thing, and I would have to start over again. Even using the specific Mag+ feature builder was a headache in itself, and the stuff I made in it just wasn’t up to par for my liking. So I decided to just bag HTML altogether, and fake it with videos instead. I ended up dedicating a large chunk of my time to creating videos for my publication. Some, I would edit together, from clips I found on youtube. Or I would hunt down exactly what I wanted and insert it in. For the cover and the ad in my magazine I created some animated typography using Hype again, but this time exporting it as a movie, instead of HTML. This worked great, and after a few tweaks to optimize the videos for my ipad screen and resolution (read my CODEC’s article to learn about optimization) I ended up with some pieces that I was very excited to use.

Magazine Cover with Animated Typography
Reebok Advertisement Animated Typography

As a whole, this magazine was much more intensive and tiring that any other project I have worked on so far. Towards the end it was hard to find inspiration for the final touches and video work that I needed to include. But I pushed through, and just kept working and designing. Some things I trashed, some things I kept and worked on until I thought they were good enough to include. Overall I am very proud of my design, and the final product I was able to produce. I hope to inform readers about Crossfit, and hopefully inspire others with my design.

--

--

Brittany Keller
Brittany Keller UX Creative

UX/UI Designer @ Anonyome Labs. Photography dabbler. Student at UVU. Sarcastic charmer. Art lover. Handy with a laptop.