–>

Gregbaan.com

Website Design

2020

Greg Baan-Meiklejohn is a musician and music teacher in Victoria, BC. He asked me to design a website for him that marketed his singing lessons, and all the other musical services he offers. Here's the story of how it was done.

Creative Direction

Greg was very open about the creative direction of his new website (which is an absolute dream scenario for a designer). What he wanted was a lot of colour, and some original illustrations.

For me, it was very important to design a website that not only matched Greg's upbeat personality, but communicated the amazing musical skill that Greg has, and offers to his students and clients. This meant that I needed to make sure the branding of the website was a balance of playfulness and professionalism.

Logo Design Designed by Lucas Bell Graphic Designer in Victoria BC Canada

Gregbaan.com

The website was built to highlight Greg's different musical services. Each service was organized into its on section of the page, colour coated and customized with copy, visuals, samples, and 'call to action' buttons.

Below are a couple website prototypes that you can scroll on and take for a spin. Or if you'd like, follow the link below to visit the live website.

Visit Gregbaan.com

Right Arrow Icon Design for Lucas Bell Responsive Website Design
desktop website design
Image of a macbook pro you can scroll to preview the website designs

Desktop Site Prototype

Scrollable Typography Design
mobile website design for greg baan
Image of an iphone you can scroll to preview the website designs

Mobile Site Prototype

Scrollable Typography Design

Responsive Design

The layout of the website was designed strategically to adjust to different screen sizes (designers call this 'responsive web design'). Having a responsive layout ensures that people have a seamless experience while browsing Greg's website, regardless of the device they're using.

Below is a series of mock ups showing how different sections of Greg's website respond to different devices.

full screen menu design for greg baan .com

iPhone 11 Pro Vertical

website design on laptop for greg baan .com

iPad Pro Horizontal

website design on small laptop for greg baan .com

Macbook Air

Responsive Modern Website Design Designed by Lucas Bell Graphic Designer in Victoria BC Canada

Apple Pro Display XDR

iphone five website design for greg baan .com

iPhone SE Vertical

website design on macbook pro for greg baan .com

15" Macbook Pro

website design on ipad for greg baan .com

iPad Pro Vertical

website design on horizontal iphone 5 for greg baan .com

iPhone SE Horizontal

Nuts & Bolts

There's more to gregbaan.com than just the web page. Working behind the scenes, there is content that was designed to boost the site's functionality on the web.

A branded 'favicon' and 'touch icon' help identify the website in web browsers, and help with the site's performance on search engines like Google. And branded 'open graph content' controls what appears when the site's URL is shared in social media posts.

favicon design for greg baan .com

Favicon

touch icon design for greg baan .com

WebClip Bookmark

open graph image design for greg baan .com

Open Graph Content (Facebook)

Interface Design

Fonts, colour pallet, and icons were chosen specifically to make the website's design modern, minimal, friendly, and fun. The ability to function clearly at different scales was also considered when selecting the right fonts and designing the icons.

branded fonts for greg baan .com

Branded Fonts

colour palette for greg baan .com

Colour Palette

user interface design with icons for greg baan .com

Icons & Navigation

Illustrations

I created a series of digital illustrations for Greg's website inspired by the themes of the different sections, as well as Greg's interests, like fishing, and Pokémon.

illustration of charizard for greg baan .com

Charizard & Smartphone

illustrated portrait of greg for greg baan .com

Skype Singing Lessons

Fun Illustration Band Art and Website Design Designed by Lucas Bell Graphic Designer in Victoria BC Canada

Jamming Band

illustrated spotlight for greg baan .com

Spotlight

illustration of greg fishing for greg baan .com

Greg Fishing

Behind The Scenes

One of the steps before programming the website was to create a 'wireframe' design of the different sections. These layout plans act as blueprints for programming the final webpage.

Responsive Website Wireframe Design Designed by Lucas Bell Graphic Designer in Victoria BC Canada

Desktop VS Tablet Wireframe

Website Wireframe Design Designed by Lucas Bell Graphic Designer in Victoria BC Canada

Tablet Wireframe

Responsive Website Wireframe Design Designed by Lucas Bell Graphic Designer in Victoria BC Canada

Mobile Footer Wireframe

Results

Greg and I worked well together to build a website that now acts a home page for his business, online. Through strategic design choices, the website was designed to not only deliver important information to the viewer, but to communicate Greg's personality and technical skill as well.

Review

“Lucas, so far, is my favourite designer I have ever worked with. He takes the guess work, stress, and worry right out of making a project. He's a great listener, wonderful designer, and really works with you to make your vision come to life. Would 100% work with him again, and in fact, I plan to. a very easy 5 stars."

Greg Baan-Meiklejohn

Keep Browsing

brand identity design thumbnail

Branding

Right Arrow Icon Design for Lucas Bell Responsive Website Design
print advertising for psych and soul music festival

Advertising

Right Arrow Icon Design for Lucas Bell Responsive Website Design
Craft beer label design dark horse stout

Packaging

Right Arrow Icon Design for Lucas Bell Responsive Website Design
logo design for outdoors hiking apparel company hey bear

Logo Design

Right Arrow Icon Design for Lucas Bell Responsive Website Design