Lemieux Design

Flash | Interactive | Web | Graphics | Brand | Video

Brand Thinking

Posted on: February 13th, 2017 by alemieux No Comments

NY Trip

1. The Trump Building on Wall Street. 2. A view looking down Wall Street. The NY Stock Exchange is on the left of the Church building. 3. The residence of president George Washington, before there was a White House. 4. The boardroom at the NY Stock Exchange where the team met for the first time. 5. A view inside the NY Stock Exchange. 6. Below the flag is a balcony where they ring the bell to start the trading day. No trading starts until the bell is rung. 7. The live set of SQUAWK ON THE STREET. 8. The boards at the NY Stock Exchange. 9. The ringing of the bell to start trading. 10. The South Tower reflection pool. The names of the deceased are carved and illuminated around the outside. The water cascades down endlessly. 11. A view from the Observation deck on the Freedom Tower of Lower Manhattan. 12. The altar at Our Lady of Victory church near my hotel.

I had an opportunity last week to meet with other designers from my company in New York to talk about and kick the tires on a new brand direction. The company did some research and found that their current brand wasn’t reflective of how the users perceived the company. As anyone in brand knows, moving in a radical direction for a big company can be risky. When Tropicana made a big change to their orange juice packaging, their sales dropped dramatically and they were forced to revert to the old design. Other branding endeavors ended in fiascos, like the London Olympics. The challenge of setting standards and visually identifying the company’s values and appeal to its target audience is rigorous.

A core team set out to define a framework for the new brand initiative and shared that with a group of stakeholders who reacted positively to the direction the team set out on. We got to test that direction by applying those assets to everyday corporate assets – PowerPoint and email templates, website and UI/UX elements, event graphics, and video assets. Through discovery and adaptation, each working group found problems and solutions to working with the new brand assets.

What amazed me is the process, strategy and thinking that has to go into a brand. First, overall, what kind of image or idea that a brand should convey to its clients and to the public. The imagery, colors and graphics that are created can create a tone. Think of Apple’s branding and logo. Their approach is minimalistic, with vivid imagery and finely tuned typography. Even without their logo, their ads and billboards have a sense about them that unequivocally says Apple. That idea is captivating and most companies are scrambling to attain something that’s on par, if not better.

Apple Ad

Advertisement from Apple, Inc. Even without the logo, the typography and imagery tell that it is from Apple

The second thing that stood out to me is that a brand can’t be strict and unchangeable. If it’s so tight, it gets stuffy and difficult to work with. A brand that is nimble and flexible can afford itself multiple applications and still sustain its overall look and appeal. Nike has a variety of applications in the sports world – from running to soccer and xtreme sports. Yet their logo, quality fabrics, graphical treatments still represent a recognizable brand.

Nike Ad

As long as the logo is represented, this ad from Nike uses powerful imagery and effective typography to adhere to its brand.

There are so many considerations that go into a brand and its usage. Our working groups brought questions back to the core team about color when it’s presented on screen, for example. One of the chose colors in the palette didn’t end up working in presentations. We also had questions about graphics interfering with the logo positioning. We collaborated on possible solutions and it was energizing! We focused on a goal of getting the brand to work in a variety of situations. It was exciting!

Smooth Scrolling – With Bootstrap

Posted on: January 16th, 2017 by alemieux

Sending users to in-page targets with an ID can be jarring. They might lose context of the page when they move further down and they lose site of what came previously. A smooth scrolling animation can solve this issue and looks great!

This Pen has a great example: http://codepen.io/chriscoyier/pen/dpBMVP However, the page I was building also included Bootstrap Panels (Accordion). Since the target is any ID on the page, that will include the targets in the Panels, so it broke the functionality. I did some brief searching and found a StackOverflow response that tweaks the code to refine the targeting so as not to affect Bootstrap Carousels, or Panels. Here’s the full code:

$(document).ready(function() {
  $('a[href*="#"]:not([href="#"]):not([data-toggle])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html, body').animate({
                scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
  });
});

Now I have the functionality I want for scrolling to targets and the Panels still work.

JavaScript ES6 and the JavaScript 30

Posted on: January 4th, 2017 by alemieux

JavaScript 30

As most developers, I’ve dabbled enough in JavaScript to know that it’s a weird language (scoping, constants, strict typing, etc.). ECMA Script 6, the new face of JavaScript is looking to change all that. I’ve been going through Wes Bos’ (@wesbos) JavaScript 30 course and it’s awesome! You build 30 things in 30 days with JavaScript. Some of them are short and informative, others are lengthy and there’s a lot of code involved, but you always end up with something that you can reference and possibly use in projects.

Wes is quick and the code examples are very good. He shows you how to build out the code the old way, and then slowly builds up to the new way, with arrow functions and ternary operators. It’s fast paced fun and I’ve been thoroughly challenged by it. I highly recommend you give it a shot.

5 Things I Learned in Web Design 2014

Posted on: December 22nd, 2014 by alemieux

Looking back on this year, I’ve learned some things for web design that’s made coding a bit easier if not more enjoyable. Some of these came about as a set of circumstances and others I just stumbled on. I hope you find some value in these too.

Bootstrap

Bootstrap

After wrestling with WordPress for so long, I started looking into some HTML frameworks for some boutique sites that I needed to build quickly. I heard about Bootstrap from a co-worker and she was using it for a the apps that her team was developing it. Once I started in, the full breadth of it was impressive and it took a while to get used to the grid system, but once I did, I saw the potential.

There are some really great things about Bootstrap that are baked in, like Buttons, forms, navigation, responsive images, and some great JavaScript components. I’ve used Bootstrap for a few sites now and beat up on it pretty good. It’s pretty stable / reliable and I really like the fact that there’s plenty of examples and good documentation on their site.

Media Queries

Media Queries

I must admit, that I was struggling with this one for a while. I understood the basic concept but its practical applications eluded me. I spoke to a friend about it and he simplified it for me. The trick is to start by creating all of your standard styles for mobile view first and then add media queries to support larger layouts. It made great sense and I still use that advice now.

JQuery

JavaScript & JQuery

I used JQuery heavily in a game that I created for a conference at work. Selecting elements and manipulating them with JQuery is so easy and JQuery offers some really powerful libraries to get things done. I was able to quickly create a working prototype with JQuery and then take that into full development.

John Duckett’s JavaScript & JQuery book offered some more great insights into JQuery that made me appreciate the language more.

.net Magazine

.net magazine

While wandering around Barnes & Nobles, I stumbled on .net magazine and was instantly hooked. This web resource magazine is packed with insightful articles, tutorials and information on best web practices and tools. The subscription price tag is pretty hefty, but the content is great. The November issue on Responsive Web Design was particularly helpful.

They have a great section of the mag called Showcase, which showcases websites from all over that are pretty fantastic. There’s a brief background story behind how each were built and it’s very inspiring. I highly recommend it.

Firebug

Firebug

I’ve been using Firebug for a while now, but I really started using the Console and debug mode this year. It’s making development easy for me. Not only do I inspect other site’s code, but I inspect my own code and am able to troubleshoot style and code issues. I do like Chrome’s dev tools, but I’m so used to Firebug now. Firebug’s add-ons are great too.

So there you have it, 5 things that made my life easier this year. What tools and sources made your life easier this year?

RWD – Media Queries Introduction

Posted on: December 19th, 2014 by alemieux

Media Query Basics

No, I’m not going to start in on the history of the @media usage in HTML. I’d rather focus instead on the practical uses of the @media property as it relates to Responsive Web Design. But first, a practical tip.

In Luke Wroblewski’s now famous Mobile First approach, we start by designing a site with the smallest screen in mind first. What that really means is that you develop all of your content in such a way that will engage mobile users who, most likely, are on devices that are on slow networks and might not be able to support all the whiz-bang that a desktop browser might be able to handle.

There are some pretty staggering statistics of mobile phone usage in third world countries. Most internet activity is achieved over mobile networks with an array of devices that aren’t that sophisticated and can’t handle most modern website features.

There’s also an important movement to improve website performance for such devices and platforms as illustrated in Scott Jehl’s new book Responsible Responsive Design. Certain design trends offer huge, full-width imagery or video. Learning what’s served best on the mobile platform is trial and error, but the basic idea is the limit the use of heavy graphics, video, and JavaScript effects for smaller devices. More importantly, the content needs to be tailored for small screens so that what’s hierarchically most important is easy to find and is most useful.

With those limitations in mind, start by building the site in a mobile view. You can resize your browser to its smallest width possible. In Firefox, you can use the Responsive Design View and choose the 320 pixel width, which will be the smallest screen size. Load up your page and start coding.

One handy tip that I learned straight away was to include all of the essential styles outside of any media query. You’ll want to establish your font sizes, colors and navigation first, working towards what will work best on the small screen. I thought that I would only put those styles into a media query that targets small screens, but that’s not the Mobile First workflow.

Once you’ve established your base styles and things in the mobile view are looking good, you can now start to resize the browser or switch to a wider layout (possibly to target Tablets).

Max and Min Width

The key components to a media query are max-width and min-width. Let’s define what those mean:

max-width Anything less than the value you have after it.

Ex.

@media screen and (max-width: 780px)

What this query is targeting is anything less than 780 pixels.

min-width Anything greater than the value you have after it.

Ex.

@media screen and (min-width: 1920px)

This targets anything greater than 1920 pixels.

It seems backwards, but this is the way that media queries work.

In Responsive Web Design, your HTML structure and CSS styles should be flexible enough that when the layout changes to accomodate different screen sizes, that the text reflows and images and videos scale. What it doesn’t account for is when layouts break. Say for example, you have a 4-column section on your site that has the bios of 4 different speakers for an event. Those columns are floated to the left and sit right next to each other in a desktop layout, but what should they do on a mobile screen? The floats should be removed so that the columns become stacked. That’s where you’ll need a media query.

Targeting and Breakpoints

The whole idea of using a Media Query is to change the layout at a certain point where it’s no longer viable on a certain device, as in the example above. When that happens, we define a breakpoint. This is your target and now you’ll need to write your media query. Following the example given, we may want to reduce the 4 columns long before we come down to a 320 pixel width. You might target anything under 480 pixels like this:

@media screen and (max-width: 480px) {
.bios { float: none; }
}

So, anything below 480 pixels and the floats are removed from the Bio section and those columns now get stacked.

See the Pen Media Query Example by Al Lemieux (@alemieux) on CodePen.

Using proportional units is best, so we can convert those pixels into ems:

480 / 16 = 30

So our media query now looks like this:

@media screen and (max-width: 30em) {
.bios { float: none; }
}

The exercise continues — resize the browser, find points that break your layout and then add breakpoints to adjust.

Base Font Size

One final consideration is base font size. We already talked about font sizes and line heights in this series. We’ve established that the base font size is 100% or 16px and the line height is 1. You can adjust the base font size up or down in your media queries. 16px body text and 36px headlines might be too large on a mobile device. You may have your base font size reduced in your body declaration to some percentage as it is comfortable to read on a small screen:

body { font-size: 70%; }

Then, in your media queries, you can increase that base font size for larger screens:

@media screen and (min-width: 80em) {
body { font-size: 90%;
}

@media screen and (min-width: 120em) {
body { font-size: 110%; }
}

I hope you’ve enjoyed this primer on media queries. We’ll get deeper into it next time, but this is a good foundation and is common practice these days. Be sure to check out the other articles in this series:

RWD – Vertical Rhythm Part 2

Posted on: December 15th, 2014 by alemieux

Last time, we looked at a method using the Golden Ratio to arrive at a vertical rhythm in our designs. This time, we’ll look at a few other methods for arriving at a vertical rhythm.

Typographic Scale

Another method utilizes a Typographic Scale. The Golden Ratio we used last week on modularscale.com, could’ve been replaced with a musical scale, like a Major or Minor third. Finding a scale, we need to use that value for the line height throughout. This consistent value then balances everything on the page.

In this example, our body text is set to 1.063em or 17px. In order to get a comfortable measure, the Line Height was set to 1.25 or 20px. Remember that the Line Height value can be unitless, which is a unique characteristic of this CSS property.

A formula to get to the Typographic Scale in this example, is to multiply the Font Size by the Line Height:

1.063 x 1.25 = 1.32875

We can then round this down to 1.3 and this becomes the Typographic Scale. This value then becomes the unit by which we space everything out on our page. This Typographic Scale can then be subdivided for smaller increments to add to margin or padding values:

3/4 Scale .975
1/2 Scale .65
1/4 Scale .325

Since 1.3 is the scale, we can revisit the Line Height value. In order to define the Line Height with the typographic scale, we divide the Line Height by the Typographic Scale, so 1.25 / 1.3 = 1.223, a slight difference from 1.25, but more accurate to the scale.

Using the scale, we can find the font size and line height of other elements on the page. For example, an H3 on the page needs to be larger than the body font size, but smaller than an H2. To find the font size, multiply the body font size by the scale:

1.063 x 1.3 = 1.382em

To get the line height of the H3, divide the font size with the scale:

1.382 / 1.3 = 0.94

Since this may be too tight, we can use the subdivisions we calculated before and add them to the line height. We could add a half value to the line height, which would be:

0.94 + .65 = 1.59

We still need to do the math to get the line height right, so divide the font size by the scale again to get the line height:

1.59 / 1.3 = 1.22307692

If this is too much space for you, you can try another calculation with another sub-value.

The important takeaway with this method is that once you find the typographic scale, you consistently use it for all of your font size, line height, margin, and padding values. Here’s an example of this method in use:

See the Pen yyYdbj by Al Lemieux (@alemieux) on CodePen.

Base Unit

This method comes from using a baseline grid in print for vertical rhythm and again its central component is the line height. The first thing to do is find a comfortable font size and line measure. In finding the measure, you’ll need to find the proper line height value that offers enough space between lines – not too much and not too little.

Let’s say for example, that we come up with 22px for the line height and 18px is the font size. To utilize this method, we will need to use multiples of the line height value, so to find a better increment, we can use half of 22px which gives us 11px. If our font sizes and line heights are multiples of 11px, our base unit will work to give us the vertical rhythm we’re looking for. Here’s a sample style sheet with this method at work

body { font-size: 18px;
line-height: 22px;
}
h1 { font-size: 66px;
line-height: 66px;
margin-bottom: 22px;
}
h2 { font-size: 44px;
line-height: 44px;
margin-bottom: 22px;
}
p { margin: 22px 0; }

Of course all of this needs to be converted to ems to work and you know that formula already. In order to arrive at the appropriate line height though, we need to take the font size and divide it by the line height. In this case, since the values for font size and line height are identical, they’ll always equal to 1. Why do we do it this way? Our context has changed. We don’t divide by our base font size of 16px, we divide by the font size of the element we’re working on.

You can see an example of this method at work here:

See the Pen Typographic Scale by Al Lemieux (@alemieux) on CodePen.

Summary

This series on Typography has really opened my eyes to design and text treatments everywhere. I find that I’m looking at menus, posters, brochures, and websites with a more critical eye now. I can see where type works and where it doesn’t. I think the genius in these methods is in finding that consistency that works throughout a project that really holds well.

I want to thank Jeremy Osborn, Val Head, Tim Brown, Eric Meyer, and others for hashing out these topics and making them understandable and usable to all. I’m not done with this topic, but for time, we’ll start in on Media Queries.