Topp Brocales // Web Designer // Vancouver

COASTAL.COM RESPONSIVE WEB DESIGN

Project Brief

Responsive web design allows websites to provide great user experience across many devices and screen sizes while serving the same content. Coastal.com's traffic data shows that mobile conversions are increasing every year so the website has to be optimized in order to cater to the demand.

Details

Initial stages of the project involved intense research about Coastal.com's website analytics, user database and which framework we should go with. It also required us to think about the user journey and address each pain point before even coming up with wire frames and mockups.

After deciding to go with Foundation, we've started rebuilding the site while maintaining consistency of existing website tools. We have taken this opportunity to introduce new functionality such as Eye Help and update existing ones like search and newsletter sign up.

The project is still on going with late 2015 as its completion date. Head over to Coastal.com to see the responsive site.

Services

Marketing and IT Team Coordination

User Experience

User Interface Design

User Testing

Foundation

Responsive Images

HTML5, CSS3 and jQuery

DREAMWORKS & COASTAL.COM – MR. PEABODY & SHERMAN CAMPAIGN

Project Brief

Dreamworks Animation partnered with Coastal.com to advertise its latest blockbuster animation, Mr. Peabody & Sherman. The campaign primarily promotes healthy vision for children, with Kids See Free as the leading promotion.

Details

The partnership includes a variety of promotional activities such as exclusive collector edition eyewear, mobile app, and free glasses for children. It also features a contest that includes a free trip to Rome and pre-screening of the movie.

Check out the campaign website here.

Services

As the lead web designer, my tasks were to support all online aspects of the campaign, including landing pages, website, email and display ads.

Graphic Design

Web Design

Campaign Coordination

CLEARLYCONTACTS.CA WEB AND MOBILE LAYOUT REDESIGN

Project Brief

ClearlyContacts.ca launches series of campaigns every quarter. And with its homepage updating almost every week, the design team needs to have a creative strategy that is efficient and scalable in order to keep up with these changes.

Details

I introduced HTML modular templates for ClearlyContacts.ca's website hotspots. It's a modified version of the 960 grid. The big difference is width is measured in percentages, not pixels. The template is also partly based on Brad Frost's Atomic Design. Combining these two methods produced a highly flexible and adaptable product.

Check out the Spring Glasses Trends Page on desktop and mobile.

Results

Having standard reusable containers for the hotspots increased efficiency in delivering successful campaigns and also made rapid deployment possible. It also translates well for mobile.

Services

Web Design

User Experience

User Interface

960 Grid

Atomic Design

Usability

RESPONSIVE IMAGE BANNER CASE STUDY

Background

Responsive websites rely on banner images that are dynamic and fluid enough to be visually responsive to any screen, from small to large format. There are plenty of techniques that involve cropping and resizing to fit within the screen. I've combined those two to form a hybrid solution that works well for responsive banners.

Details

Before going into the details of responsive banners, you have to look into your website's analytical data and figure out breakpoints for your responsive site. You'll notice there are maximum and minimum screen resolutions that viewers use. They should be set as end break points. This also goes without saying that you should still look at the current standard break points as your guideline.

Your website should have its minimum width the same as the smallest size of that particular screen. For this example, let's focus on the large screen.

You've determined that the large breakpoint is at 1024px or 64em. This will be the responsive banner's smallest cropped size, anything lower than that value, it will either have to be resized or swapped using media queries. This will also be the banner's text safe area.

When resizing from the breakpoint, text and buttons on the banner should adjust along with it. Relative positioning and percent sizing will make those elements fluid. They should dynamically adjust until it reaches the maximum content width, which is basically the largest width of the website.

The banner can be extended beyond the max content width in order to cater for higher resolution monitors. However, It should only be the background image that should extend past it.

This method does not require JavaScript in order to work. Head over to Coastal.com to see it in action.

Services

CSS @media queries

Fluid images

Foundation

SVG

Logo Design