Elegance. Functionality. Effectiveness.
These are the core ideas that guide Creative Sarasota when we design and develop a client website. These are also the principles that guided us as we designed and developed our own new website.
Launched in June of 2022, this site design is a reflection of a combined 60+ years of creative and technological skill, experience, and talent shared between the company’s two owners: Max Kelly and Christopher Austin. Here are a few features of the site that we think are noteworthy.
Home Page
Starting at the Home page, we wanted to capture the visitor’s attention immediately and guide their attention in a particular way. To do this, we combined luscious photography with timed, animated messaging, and interactive hover effects. This is how it’s done…
As the page loads, a striking image from our Selva Grill photo shoot fades in. Its black background offsets an array of colorful and delicious-looking food and drink items. Immediately after the image fades in, our tag lines reveal themselves one at a time with a simple animation. This inspires the eye to read the message in order. As the final slogan finishes, our unique navigation boxes fade and flip in to view. Their simple presentation overtly states what services we offer and encourages the visitor to “Learn More”.
Home Page Animation Video
Tech Notes:
For those web geeks who are interested, every bit of the animation and trigger effects on the Home page are 100% hand-coded html and css. It employs no javascript or jquery. This makes the page very light weight.
When the visitor runs their mouse over a service box, they trigger a transition. The transition presents four things: links to that services’ details and portfolio; a new, striking image that cross-fades in to view and replaces the original image; a brief description of the project that the image is associated with; and a testimonial quote from one of our many satisfied clients.
For those who have visited the site before or simply do not wish to sit through 4 seconds of animation, we provide a hamburger menu at the top so a visitor can get straight to business.
Home Page Hover Effect Video
General Page Features
Each page on our website has some sort of special effect or layout that is unique to that page. But all pages have a few things in common.
Simple Messaging
Many businesses try to stuff as many words on a page as they can… regardless of the necessity of the copy. This may be due to some attempt to build their search engine rankings. We wanted our page messaging to get directly to the point. This is so a person doesn’t have to filter through a bunch of drivel to get at the core information. To that end, our copy follows a simple equation.
- Keep marketing gibberish to a minimum.
- Briefly describe what the service is with clear headings.
- Briefly describe why it is special or unique.
- Provide client testimonials to establish our quality.
- Provide unobtrusive mechanisms for more information.
Fade In Animation
All sections on all pages have been coded with simple yet elegant animations. These animations are triggered as the section scrolls in to view.
Navigation
The navigation in the header is a little different than navigation you may see on other sites. Wanting to maintain the clear presentation of our services, we echoed the simple layout and styling of the boxes from the Home page. This includes the texture and coloring, unambiguous headings for each service sector, and 2 links for each sector: services and portfolios.
Web Design
Services Page
The unique feature for this page is a portfolio carousel. Using the Smart Slider 3 software, we created a simple carousel of our recent projects. Each project has a greyscale screenshot of the website (to keep the color clutter to a minimum) and the title of the company below. When you mouseover any particular project, the image fades in to full color. Each project links to the associated portfolio post.
Portfolio Page
Web design projects often have a lot of moving parts. We wanted to highlight project details so visitors have a better idea of what we do. So, our website design portfolio is a blog. The portfolio page presents the latest project as the header of the page. Below that is a grid of boxes. Each box contains a screenshot of a project, the client name, and a list of the services we performed for them. Clicking on the project, of course, links to that project post for more details.
Breaking up the monotony of the grid is a banner half way down. This banner advertises our Worry-Free Hosting packages.
Photography
Services Page
The unique feature for the photography page is fun feature. In addition to showing examples of our photography, we also wanted to show photography in realworld situations. To that end, we chose four projects for case studies on this page. When a case study link is clicked, a section drops down below it. This exposes 3 photographs and a monitor image with a screenshot of the project home page. When one of the photographs is triggered by hovering, the monitor image changes to show a scrolling web page on which the associated image appears.
Photography Services Page Case Studies Custom Programming Video
Portfolio Page
There are 3 primary categories to professional website photography: people, places, and products. Our photography portfolio provides examples of each of these categories. In addition, a visitor can filter the images by each category.
Graphic Branding
Services Page
The unique feature on this page is another carousel. This carousel, however, has a special twist. The carousel displays logos of brands that we have helped developed and implemented in web and print media. When a logo is clicked, it is presented in a lightbox. But, a series of images are available to scroll through in the lightbox. Those images are different examples of our graphic branding specific to that client. This way, a visitor not only sees the client we worked for and a simple logo. They can also scroll through realworld applications of the graphic branding.
Portfolio Page
Sometims simple is much better. The portfolio page is nothing more than a simple checkerboard gallery of logos. It just doesn’t need more.
Graphic Branding Page Multi-Level Portfolio Carousel Video
Mobile Navigation Design
As with all of our work, we take great care in designing for mobile devices. Because our navigation was out of the ordinary, we had to give great attention to how it scaled down to mobile phones.
For mobile devices the image hover layout is abandoned. The box navigation becomes the visual focal point and a traditional hamburger is added for easy navigation.
The secondary nav becomes all about functionality. Specifically, the “Call” link allows the visitor to tap and call us directly. The social network links become prominent circle icons mirroring the design of the hamburger. This layout make navigating with your thumb easy as pie.
