Project Goals
The Stay Swole Gym site was a fun demo site I designed and built to test my creativity and newfound development skills. Lifting is a personal hobby of mine, so I had some fun with this one and pulled inspiration from the lifting culture. In that same vein, I kind of went to extremes with this one employing bold color choices and using sharp angles to break up the sections. I sourced the photos from stock sites and designed all the icons myself using an off-print style to add interest. The goal was to make it fun and functional. I also experimented a lot on the development side and learned when some great design ideas aren’t very feasible with code. This played a big part in how I went about designing and creating the three columned bundles section to display the pricing options.
My Process
01
I discuss with the client what information they would like to present, images to use, color assets, and typefaces. After I get a feel for all the content and number of pages for the site, I start to formulate a plan to execute.
02
I start with a wireframe using Adobe Photoshop. This will be used as a template to show where the images, icons, and the provided verbiage will go as placeholders. Then I will flesh out each page using the discussed assets such as typefaces, color scheme, imagery, and icons.
03
After creating and laying out the design that includes all the assets, I use Adobe XD to prototype the site’s functionality. This will include how the navigation will function, the buttons hover effects, and where each button and link will lead to.
04
Once approved, I will slice each graphical element so I can store and add them to the site. I will reference the designed pages and page building modules and some custom code to create each page. Finally, I will test each version of the site for desktop and mobile options.
Project Details
Font Family
Roboto
AaBb
Color Swatches
#50dc01
#2cc245
#000000
#ffffff
Software Used
Adobe Photoshop
Adobe Dreamweaver
WordPress
Stay Swole Gym Website
Home Page
The home page displays a unique hero and easy to digest info, promos, and pricing for the gym.
Contact Us
The contact us page offers three distinct methods to contact the gym for more information and requests.