The overall goal with Athly was to create a design that was current in today's age and to engage with potential users and educate them on the Athly process. By using clean imagery and icons along with preview text leading to more info Athly can communicate their message in a quick and easy way. Our designer has created a layout that feels uncluttered while also providing an informational resource for their clients.
For this mock up we opted for a simple scheme of blues and oranges. However, colour is very flexible and Geek Power would be happy to try some other colour schemes too. Colour can very drastically change the mood of a design, so we advise to consider it.
We have selected a grounded and simple sans-serif typeface for all the type on the design for a terse look. This font is web safe and will render correctly across all browsers and platforms.
A responsive design allows Athly's interface to be more accessible to their visitors. The design stretches and forms itself to every screen size, so that every user gets the best possible experience.
Our designer created this logomark for the brand. It's crisp, clean lines and classic typography lend do a contemporary look rooted in a established corporation. Like the website as a whole, the colours used in this logomark can be altered for a very different feel.
The top of the website is optimized for ease of usability. This is where the main navigation, including the drop down menu functionality, is located to create a navigational hub for the whole site. A special feature with the particular navigation bar is that it stays fixed to the top of the page at all times which reduces scrolls on the page.
This form allows Althly's clients the ability to search through the site with any location keywords they wish to find places all around the world offing lodge for athletes. Located above the fold as the main item on the page this creates a focus and incentive for users to create an account or login.
One of the most important functions of the home page is to direct the user where to go. This is why much of this design is dedicated to this purpose. Actionable Items in the form of content boxes and contact formrotator help to inform the user and entice them to explore the site further to create conversions.
The tablet version of the design is similar to the desktop version, except that all the graphics get condensed to fit much better at the smaller resolution.
For mobile devices, all the content moves in to a one column layout so that all the images and text can remain large enough to be seen on a much smaller screen. Also many functionalities have been simplified for a touch interface, such as the main navigation.