━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Gym website designs with a lot of varied work, including
The order of sets here is reverse chronological, meaning it starts from the bottom with the final pieces up at the top of the page.
Schedule Page
Group Exercise Schedule Page
One of the layouts for the 2nd version of the website I designed.
The design worked in a click-response manner.
• You see the blackened item? That's the "mouse over" state for the item.
• Click it and the detail view (as shown with the Yoga bit) comes up.
If you want to see it a tad bigger. Flickr lets you do that.
The backend (below) was built as a mix of JSON and Markdown.
Expanded JSON view of the calendar tool's back-end.
(kept working on it after I got canned, on my own dime out of curiosity)
Temp frontend so I don't have to deal with the JSON files (never did a proper UI for it)
JSON Backend
While the site was built on WordPress, pulling all the calendar data from the main database for each gym would unnecessarily burn resources and slow down the site in high traffic conditions.
Each day for each gym had its own JSON file with all classes for that day. When PHP puts the page together, it only gets the elements absolutely necessary for rendering the page. Once the page loads, JavaScript downloads the JSON file for each day and has the details ready when the user clicks on a class to learn more.
This approach not only saves bandwidth and traffic as the JSON files for each day get stored in the browser's HTML5 App Cache, it also makes for faster, more responsive pages. On mobile devices that means the site is visible a lot quicker since a lot less HTML has to be parsed by the browser initially. Loading all the JSON files in parallel means the content is ready almost instantly after the page has loaded. Off-loading them to the App Cache further speeds things up on subsequent visits.
The iPad mini shot above is just a little makeshift front-end I made for myself. I often do these things as web apps that I can put on my device's home screen. Which I think is a pretty neat way to deal with information while working with the data. Like purpose-built mini screen. And yeah, the layout kinda shows my roots in FileMaker Pro :)
━━━━━━━━━━━━━━━━━━━━▏### ▕━━━━━━━━━━━━━━━━━━━━
Instagram Integration
Instagram Integration
One-way pull using the Instagram API to get semi-live posts from the client's Instagram account. JSON feed via PHP parsed and cached on the back-end to make for a more responsive (as in being faster) site. The JSON rendering part has its own HTML template for easy changes.
━━━━━━━━━━━━━━━━━━━━▏### ▕━━━━━━━━━━━━━━━━━━━━
Second version of the logo after the color changed from red to orange. More on the modeling and lighting process on the Luxology forum.
Modeling view. Catmull-Clark Subdivision surfaces in Modo 601. It's a bit more work than just extruding an illustrator file but opens up a lot of possibilities. High quality CNC milling / 3D printing to super sharp print-resolution renders with smooth edges are quite often worth the initial trade-off.
Logo Enhancement - Final
The process here was kinda awful, but maybe someone here has a better one. I calibrated the display (so it's fresh) set up a Just Normlicht next to my display with the correct Pantone chip in it and dialed the lights and material properties in by eye.
Ideally I'd like a plugin that gives me several options on how to achieve the correct colors (fit by diffuse color, fit by lights, fit by environment, etc.). Since the Modo's viewport already measures the color, this should be possible.
━━━━━━━━━━━━━━━━━━━━▏### ▕━━━━━━━━━━━━━━━━━━━━
First version of the enhanced logo. More on the Luxology forum about how that was made. Same thread as the above logo version.
First Version of the Logo Enhancement
Red, White & Blue… lots of blue.
In order to at least sort-of make the September 1st launch date despite having close to zero content, I came up with an interim site design that was all built on large visuals, in the hope to distract from the content-free-zone dilemma. As you'll note, back then the logo was still red.
The stray dots there were from a live rendered star field. But more about that here (best in Google Chrome).
Home Page, Main Site
Free Pass Registration Page
Detail View
Free Pass Tool
The free-pass registration front-end fed into a custom tool which parsed the data. A basic check for plausibility and completeness via JavaScript and again on the server in PHP.
The tool then sent two emails out, both fully customizeable (template based) — one to the customer, the other to a group of managers of the selected gym. It also backed up the data to a CSV file in a password protected directory on the server.
Trainer Bio Page (Empty)
Trainer Bio Page
As no content was available at the time, this was rather sparse and never went live. You can see the logo looking slightly different. At first I was using JPEGs with embedded ICC profiles and masking them with a PNG. Worked great in IE and WebKit as IE has its filters and WebKit a working CSS3 property for it. Firefox just couldn't do it though and so it was back to untagged PNGs.
The trick with getting the translucency right was simply to pre-multiply the alpha channel, so the colors wouldn't be affected by Photoshop's idea of alpha channels.
The trick with getting the translucency right was simply to pre-multiply the alpha channel, so the colors wouldn't be affected by Photoshop's idea of alpha channels.
For this concept the idea was to have the ID Card be a masked, scrollable area highlighting key points of interest for each trainer.
Schedule View
Image Based Schedules
Instantly shareable and easy to re-post, these schedules had to be constantly updated. Interesting considering that each glyph was hand-kerned to snap right into the pixel grid where the overall shape looked the sharpest, but not too crisp to read.
━━━━━━━━━━━━━━━━━━━━▏### ▕━━━━━━━━━━━━━━━━━━━━
iPad Screens
iPad screens from the first version of the site, hot and cooling versions.
The launch screens were set for all iOS devices at all sizes and all orientations for the iPad launch screens.
━━━━━━━━━━━━━━━━━━━━▏### ▕━━━━━━━━━━━━━━━━━━━━
iOS 6 Passbook Pass
iOS 6 Passbook
One of the side developments entailed figuring out how to support Apple's upcoming (at the time) iOS 6 directly from the site's backend where new trial registrations were handled. It never went beyond a fully functional demo.
━━━━━━━━━━━━━━━━━━━━▏### ▕━━━━━━━━━━━━━━━━━━━━
From the first sketch all the way through a couple of experiments.
Early Draft
At some point I was asked to contribute my own idea of an SF signet. This was an early draft. I never got to finish it though. Shame really, I kinda liked the flow. There's no 3D in this, all painted up in Photoshop over a sketch I made on the iPad with SketchBook Pro. I ended up reworking the provided logo in 3D though.
This was my first an only brush with SketchBook Designer. The vector reshaping tools are lovely but for a designer the extra cost over Illustrator isn't worth it. Especially now that you get the pro version of Manga Studio for $79 which has similar features.
