February 4, 2016No Comments

Web design in 8hrs

We've all been there. Client calls with a hot project and needs an immediate turn around. After a few groans, we put on out big kid pants, turn on the coffee and start cranking away. It's all part of the job right?

Recently, I had a client call needing a site design for one of there recently acquired companies. I had just finished designing a logo for them, so I figured a new website was around the corner. What I didn't know was that they would need two design options for a home page and secondary page for a stakeholder presentation, with only 8hrs to turn it around.

Stressful but doable right?

But hold up there's a few curve balls. All you have to go on is a logo, a headline for the home page and the creative direction of "think luxury". There is no content. There is no image direction. There is no style guide. Just design a website. Excuse me while I go to my safe place.

So first things first: start the research. The client provides specialty insurance for a luxury market. I began looking at, what I considered, "specialty retail" sites such as Lloyds of London, Tiffany's, etc. After a little digging I decided on my plan of attack.

Approach 1

For my first approach I decided to go with a darker color palette, high impact imagery to pay off the headline, clean/modular layout, and use of flat icons. I felt the darker colors would add a sense of mystery and luxury. The large header image would help the client to see how they could create high impact on first glance, even if they change the content later. The use of the serif font provided a nice juxtaposition to the sans serif body copy and added a sense of elegance.

Once inside a typical interior page, I used modular sections for easy scalability, and to help with future section additions for other interior pages. The white background of the body area helps give the impression that the user has "opened" the site, once they navigate from the home page.

Vantage Home Option 1

Vantage Home Option 1

Vantage About Option 1

Vantage About Option 1

Approach 2

For my second approach, I wanted a layout that focused on white space and a clean aesthetic, similar to sites like Apple and Tiffany's. I moved away from using two font families, focusing on a simple sans serif font. The navigation was laid out as a more traditional navigation bar, incorporating icons to make if feel more modern. The main image for the banner was cropped so that it mirrored both a spotlight effect, as well as giving a nod to the spire/arch in the Vantage logo. For the bottom article sections, I removed the flat icons in favor of more realistic object based imagery.

The interior page plays up the use of white space, offering a clean, modular layout. The layout reflects the ease of adding sections throughout the page, without having if feel heavy.

Vantage Home Option 2

Vantage Home Option 2

Vantage About Option 2

Vantage About Option 2

So there you have it. Two site design concepts in 8 hours. Overall, the client was happy with the designs and felt that it captured what they were looking for. And I became better acquainted with the office Keurig machine.

February 24, 2015No Comments

2015 digital marketing conference picks

To be a graphic designer in the digital marketing arena, is to be in an industry of constant change. New technologies, new trends and new ways of communication are constantly introduced. In order to stay relevant, it is important to keep your skills and knowledge up to date. One of my favorite ways of doing this is by attending digital marketing conferences. In my experience, digital marketing conferences are a much more engaging, and many times a more cost-effective, way to continue design and marketing education. Digital marketing conferences offer other benefits such as:

  • Discussing common issues in your field
  • Learning new skills and techniques
  • Growing your network of peers to enhance your professional knowledge base
  • Discovering new technologies
  • Getting out from behind your computer screen and engaging in social interaction
  • Rekindling your passion for design and marketing

There are dozens of digital marketing conferences offered every year. While I would like to attend as many as possible, unfortunately a little thing called a job gets in the way. Were time and money not an obstacle, I would attend the following digital marketing conference in 2015.

Summit. The Digital Marketing Conference

When: March 9-13, 2015
Where: Salt Lake City, Utah
Summary: Reinvention is a journey. Continue yours at Summit. The digital landscape is changing and marketers need to reinvent themselves and their strategies to succeed. Join over 5,000 marketing leaders at Adobe Summit to explore the latest trends, ideas, and best practices for getting better results from your digital experiences.

Click Z Live New York

When: March 30-April 1, 2015
Where: New York, New York
Summary: With over 15 years of experience delivering the most cutting edge digital marketing events around the world, ClickZ Live (formerly SES Conference & Expo) provides an unrivalled forum to hear from world-renowned speakers as they deliver an action packed, educationally focused agenda on the latest digital marketing tips, tricks and tools that will blow your mind, make you re-think your strategy and provide actionable takeaways to revolutionize your marketing campaign.

An Event Apart

When: May 11-13, 2015
Where: Boston, Massachusetts
Summary: The design conference for people who make websites. An Event Apart Boston is an intensely educational learning session for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.

SmashingConf New York 2015

When: June 15-18, 2015
Where: New York, New York
Summary: After the great success of last year’s New York conference, we’re bringing the SmashingConf back to the Big Apple. The rules haven’t changed: “2 days, one track, 18 brilliant speakers, and hands-on, practical and useful talks.” As always we have phenomenal speakers lined up.

Inbound 2015

When: September 8-11, 2015
Where: Boston, Massachusetts
Summary: INBOUND fuels the passion that drives the most innovative and successful business leaders of our time. INBOUND's purpose is to provide the inspiration, education, and connections you need to transform your business. This September, we will host thousands of marketing and sales professionals from almost every industry imaginable and from all corners of the globe at the Boston Convention & Exhibition Center. In 2014, we had 10,000+ attendees from all around the world and we're excited to be bigger than ever this year.

July 21, 2014No Comments

New makeover for JustinHerren.com

Every so often we get an itch to change things up. Maybe it's a new haircut or wardrobe. Maybe it's redecorating your home. For me it was redesigning my personal website JustinHerren.com. While I enjoyed the previous look and functionality of JustinHerren.com, like Kim Kardashian, it was in need of a makeover.

Since my site uses WordPress for its content management, the first thing I needed to do was select a theme. I knew I wanted a theme that met the following criteria:

  • Vertical layout
  • Responsive functionality
  • Lends itself to a more "flat" design approach
  • Multiple page layout options
  • Widget ready

After combing through hundreds of free and premium themes, I decided to go with the Interface theme by ThemeHorse.

Now that I had my base to start with, it was time to do a little customization to make it my own. Even if you're not an advance developer, there are several things you can do to customize a WordPress theme and give it your unique flavor.

1. Create a child theme.

If you're going to make adjustments to your WordPress theme, it's important to create a child theme. A child theme allows you to make changes to your themes files without overwriting the parent files. This way, when your theme has updates, all of your hard work adjusting these PHP and HTML files will not be overwritten. This saves a lot of headache and heartache down the road.

2. Select your color scheme.

Color is one of the easier things to change in a WordPress theme. All you need to know is a little CSS. The previous JustinHerren.com design used grays and orange as its primary color palette. I carried this color palette over for the redesign, but also incorporated the light green from the Interface theme presets.

3. Utilize the widgets.

Widgets help a WordPress theme come to life. While each theme has different preset widgets included, you can get even more functionality by using plugins such as Jetpack. Some of the widgets I incorporated into JustinHerren.com include custom menus, Twitter feed, tag clouds, custom html, and services.

4. Install some plugins.

Sometimes you just can't get all the functionality you want from a theme template. Plugin's allow the less developer inclined to generate more unique functionality to our website. A few plugin's that I've found helpful include:

5. Customize your footer.

You want your site to appear official and branded as your own. To help with this, it's important to customize your footer to be branded with your identity. For JustinHerren.com, I included the copyright date and removed the "powered by WordPress" and "theme by" content areas. This is where I needed a bit of coding experience. Every theme is different and some footer's are easier to edit than others. In this case I had to edit the functions.php file for my child theme. This is another example where having a child theme is beneficial. If I only edited the functions.php file in my parent theme, the next time an update is installed, my footer would revert back to the default language.

Now that all the customization and testing is done, I am proud to unveil the new and improved JustinHerren.com. Take a minute to poke around and enjoy the new experience.

June 24, 2014No Comments

Interactive designers: 3 creative picks for June

As a designer, I enjoy seeing work produced by other creatives. It inspires, keeps me current, and makes me re-evaluate my own design approach. Since I believe it's important to stay relevant in whatever industry you're in, each month I will offer a list of my favorite creative pieces from that month. These pieces will include any field of design from interactive to video to print, etc. So without further ado, here are my creative picks for June.

Twitter Email for Business

Twitter animated email for business creative pick
My first creative pick for June, is an email newsletter from Twitter. I'm not going to lie, I usually gloss over most emails I get from Twitter for business. It's not that there's anything fundamentally wrong with them, they just usually don't grab my attention. However, this particular email gave me reason to pause. Animated GIFs are nothing new to email design, but the animation in this email surpassed any I have seen before. While the file size of the GIF is larger than generally recommended for an email, you can't deny the crispness and quality produced. At first, I thought it might actually be an embedded video targeted to Apple Mail clients. Twitter took a chance by breaking from traditional email design and recommendations, and in my opinion the risk paid off. It may not have caused me to take action, but it did change my behavior for how I interact with future communications.

FCB Webstie Redesign

FCB website creative pick
My next creative pick comes from FCB. Recently, DraftFCB decided to drop the "Draft" and rebrand as FCB. As is common with most rebrandings, a website redesign followed. And frankly, it's never looked better. The FCB site is responsive, vertical, user-friendly, and engaging. The simple design plus attention to typography makes the site feel fresh and modern. The site is easy to navigate and uses subtle animation effects to provide a smooth transition between pages. In the creative industry, it is necessary to give your site a little refresh from time to time. FCB's website update is the type of facelift that even Joan Rivers would approve of.

Litmus TEDC Email

Litmus email creative pick
Litmus is one of the foremost authorities on email design, development and delivery. So it's no surprise that when it comes to their own newsletters, that they deliver such quality work. Their email announcement for the upcoming "The Email Design Conference" is no exception, and is my final creative pick for June. This email uses a subtle GIF animation that fits with the sleek and modular design of the email. The email is responsive and single-column, which allows for a similar user experience across devices. The content is laid out so that it is easy to read and navigate through. And though not part of the design, my favorite part of them email was a link to a downloadable letter to give to your supervisor about why you should attend the conference. All of these elements combined to make a fun and engaging email communication.

So there you have it. These are my creative picks for June. If you see a creative piece that inspires you, tweet it to @justin_herren. Let's see what inspiration July brings.

January 13, 2014No Comments

Attack of the single page site

Along with flat design, typography and large images, single page web design has been trending hard. And so far in 2014, it shows no sign of slowing down. For those not in the know, a single page website is a site designed to fit on a single web page in order to provide the user with a more fluid experience. Instead of asking users to click between multiple pages to find the information they need, everything is contained within one page load.

Currently, there is still debate on whether single page sites are the wave of the future or merely a design aesthetic fad. Advocates of single page design argue that they are not merely websites, but smart sites. By smart sites, they mean that the design is more digital in nature versus thinking in traditional print conventions. Some advantages of single page sites that appeal to designers and programmers include:

  • The ability to tell a story
  • Interactivity between the site and user
  • Affordability
  • Uniformity across devices
  • Creating an app like experience
  • Easier to update
  • Encourages sharing
  • Increase in conversions

While the above reasons may sound great to some, opponents feel that single page sites are lacking in other areas. For one, SEO optimization is not entirely reliable. Opponents also feel that the learning curve for navigation can be a detractor. The use of multiple programming languages to create a single page site, may also make website owners feel too dependent on developers for updates and changes.

So which style is right for you or your client? As with anything, you should always assess the needs of your site and the goals associated with it. If designers and developers keep pushing with advancements in pageless sites that answer the above concerns, I can see this trend becoming a digital revolution. Below are links to some examples of single page sites as well as more information about this topic.

What do you think? Is single page design a digital evolution or revolution?

Examples and further reading:
8 reasons why pageless design is the future
3 reasons why I hate the one page design trend
21 inspiring single page websites
AWWWARDS - Best single page websites

Let's connect.

© Justin Herren 2022 | Creative strategist + design lead