Web Design

Flow Design SA otherwise known as Flow State is a Johannesburg based creative agency that specializes in graphic design, web Design, digital marketing and through the line advertising campaigns. A company with corporate creativity in mind and a need to change the industry and push the boundaries of innovation. This is by far one of my most intricate builds, fully optimized for SEO, getting roughly 2000 visitors to the site monthly and an average of 6 daily generic click-throughs straight from search engines. Oh yeah, I should add... That's without any media spend, within a timespan of one and a half month. Far above average for any startup.

flow design sa web design introduction image

Perhaps not apparent immediately, however, this is a massive build. Consisting of roughly 70 portfolio items, each individually optimized for SEO. Interactive page elements and moving banner art. I broke free of generic design and went into a more out of the box solution. Making use of cinemagraphs to animate a seemingly static hero image.


Attention to detail is key. Not always shouting your message but hinting towards an idea. When psychology is involved and users are kept in mind we lead them to an idea, letting them discover it themselves. A treasure hunt to an end goal. That is the purpose of this build.

Behind the scenes

My most desired outcome with any build is interactivity. A site that acts as an informative channel with automated user-friendly features. The site is built using a premium theme yet fully customized and created from scratch. Also allowing visitors the ability to put together their own design packages. This makes it easier for anyone to get a quote and a rough idea of what their project could cost. Also making use of an informative blog to get a massive amount of foot traffic through the site.

Pages

This is by far one of my more intricate builds, each page well written for both the consumer as well as for search engines. Everything has it's place and acts as an informative reference, written and re-written. The pages all individually designed to suit the specific page requirements.

Landing Page



flow state web design pages home preview


Due to the nature of both the theme and business, every single aspect of this site is custom. This is the first pages users will likely see and acts as a quick click through guide. The main page is a semi-one page scroller with to the point company information. Custom imagery and fresh design.

About



flow state web design pages about preview


This goes without saying. Having an "about us" page gives a company a sense of establishment, showing their vision and what sets them aside from the rest. Laid out in a creative way rather than just filling the page up with information. Most pages use cinemagraphs to add a little extra to the imagery.

Work showcase



flow state web design pages projects preview


The site has a lot of project pages, around 70 in total, each project is optimized for SEO and page-specific content. The main showcase uses ajax to load on scroll. Showing beautiful images and well-structured bodies of work. The main project page also has a number of sub-pages all individually laid out according to niche.

Blog



flow state web design pages blog preview


A very under-estimated page with huge potential for mass reach. The blog acts as research specific content. Sharing to relevant users. This has brought in a considerable amount of traffic. Useful information catered for readers. This not only creates share value but up's the page traffic by at least 200%. One of the best SEO tools available.

Contact



flow state web design pages contact preview


An obvious necessity. The contact page gives users the ability to contact the company directly. There are elements built into the site that assures customer satisfaction and automated quote building. However many clients would prefer a direct channel. The contact page houses all relevant information. Straight to the point and easy to understand.

Pricing forms



flow state web design pages custom price preview


The pricing page is specifically set up for automation. Using forms where users build their own design packages, they can easily get a price and also work out what amount would best suit them. The price get's calculated as users add services to their quote, this then gets sent through where the company contacts them directly.

Responsive

The beauty of WordPress is that pages come pre-coded to be responsive. The padding and margins were adjusted as much as possible to suit all handheld devices. With the majority of visitors coming from mobile, a split of 60 vs 40 it is paramount that the site is properly set up for responsive.

flow state web design responsive mobile preview
flow state web design responsive tablet preview

Off page SEO - Open Graph Markup

Adjusting rich snippets according to how Google indexes and adding structured markup for all social media channels. This is a great way to say exactly what you want and fully customize any shareable content on the site.

flow state seo structured snippet preview

Assuring PageRank on a number of niche keywords, the site uses structured data to hone in on exactly what the content on the site is. Custom made title tags, keywords and meta descriptions. This, combined with great page authority sets the site up for success. Making use of business listings and the awesomeness of Google business the site is sure to rank #1 for its niche.


All the extra work is sure to pay off no questions asked. Rich snippets tell search engines what the site contains, this gives any niche a massive boost, a bit more in-depth than most snippets allow. Google shows relevant content based on the keywords searched for. Setting products with markup specific to them allows Google to not only index it accordingly but also to display it exactly as that. Image-rich markup with all relevant information.

flow state seo open graph twitter preview
flow state seo open graph facebook preview

Adjusting all the Open Graph information gives me the ability to use any imagery related to the brand and more likely to get click-throughs. This gives me the ability to fine-tune all links shared completely based on social media channel. The above images show how the site looks when shared on both Twitter and Facebook. This extends far past these two channels.

Technical SEO - Page Speed

A combination of relevant pageviews with low bounce rates, off page SEO and on page SEO sets any site up for success. Structured markup and open graph adjustment tell search engines what all the content on your site is and give you the ability to customize social media content completely.

flow state seo google mobile page speed preview

Faster mobile websites not only boosts your SEO massively but also assures the least amount of visitor loss. The average human being with an average attention span is likely to close your site if it takes longer than 7 seconds to load. The preferred website has somewhat bigger pages and much quicker loading times. The image shows how the site performs on a Google mobile speed test. With a 4 second load time on a somewhat slow server is nothing short of awesome!


The mobile load speed is way above average. I choose to implement this technique wherever possible. Quicker load times regardless of other beliefs has a massive impact on SEO and similarly how effective your website will be.

flow state seo google page speed preview
flow state seo gtmetrix page speed preview
flow state seo pingdom page speed preview

The website shows amazing results and page-speed. The only big issue is hosting. With cloud hosting and an effective CDN(content delivery network), the speed can be massively adjusted to close to one second. Regardless of a bad server response time the site still shows load times far above average.

Analytics tracking

Thorough Analytics and event tracking massively help in future marketing efforts. Knowing what happens with visitors on your site as well as how to structure your content for better user experience and better click-through rates.

flow state seo analytics preview

Using Google analytics to fully track everything from geographic users as well as device usage. Seeing exactly where your traffic is coming from and adjusting all your content according to user preference. This shows you exactly what happens when visitors come to your site. A necessity for any business.

Site Security

flow state secure ssl badge preview

Website security is by far a great necessity. The website makes use of a secure server that also supplies an SSL certificate. Real-time IP tracking and automated brute force attacks. A secure site makes sure no single aspect of the website is ever jeopardized.

Related Projects

  • TROPIKA
  • VODACOM
  • 1TIME AIRLINES
  • CARTRACK
  • MERCEDES BENZ