Boston Sports Advertising Website Redesign

bsa-homepage1.png

Project Details

Project Responsibilities
Ui and Front-end Design.
Graphics Programs
Photoshop, Sketch.
Tools Used
Atom, BitBucket and WordPress.
Coding Languages
HTML, CSS and SEO.

Project Background

I had originally created a sports blog for the Advertisers at 98.5 the Sports Hub Boston utilizing the WordPress blog platform and advertising 98.5 the Sports Hub Boston’s services using Google Pay Per Click service. The program was so successful that the station out ranked the parent company CBSBoston.com. in Google Search.

Project Challenges

To create a professionally branded website marketing presence that can sell advertising services. The website now has the ability to scale across device platforms in an easy-to-navigate interface.

Project Solutions

The decision to use the Wordpress CMS was due to its proven effectiveness and then chose a responsive 3rd party template that could be easily customized through CSS. The client had a very specific brand identity that mimicked the colors of the American Flag. Additionally, animated banners were put on the front page to advertise the different services. I then created well organized service categories with custom made icons to go below the animated sliders. Below the services categories I placed the affiliate logos that were optimized and standardized. I developed landing pages with service forms that could be linked directly to Google Pay Per Click ads.

Boston Sports Advertising Website Redesign

bsa-original-homepage.png

Project Background

I had originally created a sports blog for the Advertisers at 98.5 the Sports Hub Boston utilizing the WordPress blog platform and advertising 98.5 the Sports Hub Boston’s services using Google Pay Per Click service. The program was so successful that the station out ranked the parent company CBSBoston.com. in Google Search.

Responsive Website Redesign

Visual Design for Desktop

jpd-imac-frame-tab1-bsa

Visual Design for Tabletsbsa-ipad-site-layoutVisual Design for Mobile Phonebsa-mobile-site-layout

Project Responsibilities

Responsive Content Development

Tools Used

Plugin: Responsive Slider
Code: Short Codes
Graphics Programs: Photoshop, Fireworks

Project Details

It was important to have a similar viewing experience when viewed though different hardware such as desktop, mobile or a tablet. This was accomplished by using a responsive template and using short codes to create webpage layouts that would be similar on different devices. All media assets were created to be scalable so that the end user could navigate the website easily on different mediums.

Branding

Simple Website Logo

Animated Slider

Iconography

Favicon 57×57 PNG Image for Apple Touch

Favicon 32×32 PNG Image

Color Swatch

Typography

Arial, sans-serif;

h1: 36px,

h2: 30px

h3: 24px

h4: 18px

h5: 14px
h6: 12px

Project Responsibilities

Responsive Content Development

Tools Used

Plugin: Responsive Slider
Code: Short Codes
Graphics Programs: Photoshop, Fireworks

Project Details

The client wanted to brand his company in the patriotic colors of the American flag.

Challenge

To create a constant site-wide brand identity that has a high quality design and feel.

Solution

I decided to create a brand identity that combined patriotism and sports. For the logo I utilized the sports illustrated typography “Impact” font. I then mimicked the colors of the American flag and darkened them to intensify the color scheme.

Animated Slider Banner Development

Streaming  Audio and Video Animated Banner

Digital Advertising Animated Banner

Sports Radio Animated Banner

Professional Sports Marketing Animated Banner

On-site Marketing Animated Banner

Project Responsibilities

Graphics, Imaging, Copy Editing and Slider Programing

Tools Used

Plugin: Responsive Slider
Graphics Programs: Photoshop, Fireworks, Illustrator

Project Details

It was imperative to advertise the clients different services on the front page of the website above the fold of the web page. An animated banner using a responsive slider was used in order to accomplish this. Each banner showcases custom designed graphics, a short description about the specific services offered and a service page button call-to-action.

Iconography

Sports Radio Advertising Icon

Digital Advertising Icon

Streaming Audio and Video Icon

On-site Marketing Icon

Professional Sports Marketing Icon

Project Responsibilities

Graphics Development

Tools Used

Graphics Programs: Photoshop and Fireworks

Project Details

It was important to offer service icons that illustrated the categories so that the customers viewing the website could make quick purchasing decisions. The icons were designed in photoshop utilizing a 150 x 150 canvas so that all the logos would have similar dimensions. All images were exported in PNG format for better loading time.

BACK