Style Guides for Web Design and Development

style-guide

Developers, designers and web administrators are always looking for ways to improve how they manage the look, feel and complexity when building a web site. This can be difficult when we have multiple team members or new members involved in ongoing projects. So how can we help maintain global branding and development patterns for sites that all users can utilize? Style guides.

What is a style guide?

A style guide is a document of code standards that details the various elements and patterns of a site or application. It is a one-stop place to see all visual styles of the site such as headers, links, buttons, color pallets and any visual language that is used on the site.

2015-09-15_1518

Check out a few of the other style guides below published by some great brands.

Why should you use a style guide?

Style guides take extra time to develop up front but we have found that they have numerous beneficial factors for developing.

  • Faster build time for new sections and pages.
  • Design consistency is easier to maintain
  • Designers, developers and content owners have a one-stop guide to reference.
  • New team members joining the project can refer to the guide for the exact style use.
  • Keeps both code and design consistent throughout the site.
  • The guide allows us to standardize our code (CSS, JS, HTML), keeping it small and quick to load.

Steps to building a style guide?

Template

Start your guide with the sites foundations. These will include elements like color palette, fonts, headers, body text and grid layouts. These basic elements are the foundation global elements of your site that set the tone for your style guide.

Patterns

Next start adding in your site patterns. These would include buttons, logos, images, icon library, form styles, etc. Any element that belongs on your site should be included.

2015-09-15_1511_001

Documentation

Documentation is essential to make a style guide successful. Your documentation is the key to keeping a consistent style and development pattern throughout the site. Documentation can be done in the code itself with comments or using interactive modals or tool tips in the style guide.

Cascade Implementation

After completing the base code you can start integrating it into your CMS system. Not only can we use a style guide for visual and front end documentation but also for how the content functions within your CMS.

The following elements can be added to help guide developers in with the site setup:

  • Formats
  • Blocks
  • Template regions such as header, footer, navigation, widgets and dynamic feeds for news/events.
  • Build out full examples of your data definition regions. See example below of Cascade Server data definition containing all site content input areas.

2015-09-15_1526

Using the guide

So you have completed building your style guide. Now what? The first step is talking to your team about how to use the guide and what updates should continue to be made during projects to it. As new member join your team reference the guide as a way to introduce them to your site styles and code languages. Utilize the style guide when testing new code or modules on your site or just as a way to present new design elements to the team. The possibilities are endless.

Your style guide will never be complete and should continue to evolve as your site does.

References

 

Keana Lynch
Keana Lynch is the Director of UX Design & Development at Beacon where she has provided leadership and consultation for over 35 Higher Education projects. She specializes in the analysis, design, and implementation of websites. Keana is very passionate about design and development strategies focused on user experience, accessibility, multi-device interactions, and technical best practices. Outside of work Keana enjoys spending time with her three dogs, hiking, kayaking and volunteering with local animal rescue groups.
By | 2017-06-16T12:24:15+00:00 September 17th, 2015|Cascade CMS|Comments Off on Style Guides for Web Design and Development

Top Ten Ways to Prepare for Your Higher Ed Website Redesign

After recent experience with several higher education website redesigns, I’ve come up with a list of the top ten ways that you, as a higher education client, can prepare for an upcoming website redesign project.  Though these items aren’t technically required right at the beginning of a redesign project, they are all eventually needed and the sooner they are brought to the table, hopefully the more satisfactory the project results.

  1. High resolution .eps or .ai files of  all variants of the official logo (including reversed text, for example)
  2. An official “style guide” (preferred) or, minimally, a list of brand/official fonts and colors (with hex codes please)
  3. Considerations of all target audiences to be addressed by the website (prospective students, alumni, faculty/staff, community, media, etc.)
  4. A variety of high resolution images of the campus, students, faculty/staff and activities, in both portrait and landscape formats
  5. User id and password (read only access is usually fine) for any secure areas of the site that will be redesigned
  6. Documentation of any dynamic/database driven pages currently in use (a data-driven, searchable academic catalog, for example) as well any forms and 3rd party sites linked to the live site (a third party site for prospective students to apply, for example)
  7. Any  print or electronic marketing materials/brochures that have a graphical presence that should be considered for the website redesign
  8. Requirements for search engine optimization and analytics tracking
  9. List of websites with a similar look and feel to what you are trying to achieve with the redesign (do not have to be .edu sites)
  10. Bonus points:  review my previous blog “Terms you need to know for your website redesign

With these items in mind, I hope that your upcoming website redesign is very successful… Best of luck!

By | 2017-08-08T08:27:13+00:00 February 6th, 2015|Higher Education|Comments Off on Top Ten Ways to Prepare for Your Higher Ed Website Redesign

How To Make The Most Out Of Your Web Design

I spend a lot of time inside and outside of work studying design. I think it gets to a point for everyone where design becomes difficult to ignore, as it influences our every day decisions. It’s important to understand design elements and how they not only affect you on a day to day basis, but your customers as well. You can ask yourself the following questions:

How does my target audience perceive my brand?

Does my website’s design go hand in hand with my content?

What kind of experiences are users having when they land on my website?

Is my design making an emotional connection with my customers?

Because websites are so multi-dimensional, there is no one way to answer these questions. It’s an ever changing industry and with new technology comes updates on how we approach design. Lucky for you, Beacon has been in the industry for 16 years. We love answering these questions because these are the questions you have to ask to get to a successfully designed website.

Since being in the website industry, I’ve had the opportunity to wear many hats. This has helped me approach website design and development from every angle with all considerations in mind. Below I have listed a few elements to consider when designs a website.

 

User Experience

  • A beginners guide to UI design. Read more.
  • How to beat the paradox of choice in UI design. Read more.

Fonts

Colors

  • An introduction to color theory for web designers. Read more.
  • How to get a professional look with color. Read more.
  • Five web design colors that encourage visitors to click that subscribe button. Read more.

Images

  • How to use images effectively in websites. Read more.
  • How to use photography in web design. Read more.

And finally…

 

In today’s world, your website is one of your most vital marketing tools. If you would like to find out more about how redesigning your website can push your business forward, let us know!

By | 2017-08-15T15:50:26+00:00 April 11th, 2014|Cascade CMS|1 Comment

Holyoke Gas & Electric Redesign Launched!

Beacon Technologies is very proud to announce the launch of the new Cascade site for Holyoke Gas & Electric at http://www.hged.com! This site is visually a dramatic improvement over the old.

BEFORE

homepage

Holyoke Gas & Electric Website “Before”

AFTER

Holyoke Home Page After

Holyoke Home Page “After”

It also incorporates the following fantastic functionally:

  • Responsive Design— The new site is a lovely, colorful responsive design, that looks great in the largest monitor and the smallest phone
  • Audience-based site maps—When a visitor clicks on one of the audience based icons in the site footer (like “Residential”), they are directed to an audience-based site map (http://www.hged.com/site-map/residential.aspx), displaying the pages that the client has tagged as relevant to that audience within the CMS.
  • Emergency Notifications—Two different messaging options to alert customers. One is for severe emergencies and pops up in an ajax window on every page of the site and the other is a banner message that doesn’t require visitor interaction but appears on every page of the site. There’s even a very cool animation effect for the emergency message when it is in effect.
  • Google Translate—Easy to access Google translate widget in the footer of every page of the site
  • Weather feed—Weather related info for the Holyoke area displayed from a 3rd party tool in the site footer. Note the effort devoted to make it match the site design perfectly!
  • Call to Action buttons—Editable buttons that display on the home and optionally on any interior page under the left navigation.
  • Contact Information—Editable contact information that can be displayed on any internal page under the left column navigation (http://www.hged.com/customers/start-stop-move/default.aspx)
  • Optional right column area—All internal pages can display an optional right column that includes widgets for content, images, videos or external links (http://hged.com/about/history/default.aspx)
  • Internal animated banner images— Can be incorporated on any internal page on the site (http://www.hged.com/telecom/default.aspx)
  • Department-specific design—One department at HGE required an alternate, but similar, design for marketing purposes and it can be seen here: http://www.hged.com/telecom/default.aspx
  • Google Map integration—Client can enter location details into Cascade to display an interactive Google map (http://www.hged.com/about/contact-us/delivery-instructions.aspx)
  • Custom “calculators”—These two pages are custom .NET forms that allow the visitor to calculate their own energy costs– http://www.hged.com/customers/save-energy-money/energy-efficiency/carbon-foorprint-calculator.aspx and http://www.hged.com/customers/services/gas-service/gas-conversion/default.aspx
  •  Spectate integration—Any internal page can display a Spectate-based online form as created and maintained by the client (http://www.hged.com/about/contact-us/default.aspx)
  • Web and social media tracking– The site makes extensive use of web and social media tracking tools so that the client can be well informed of all client interaction with the site.

The client is just thrilled with the beautiful site– “Everyone here at HG&E is so very excited about this project! The design is amazing, the CMS is great, I have had very positive feedback from all our employees!”  Congrats to the entire Beacon team for a job well done!

 

 

By | 2016-11-21T18:18:11+00:00 December 16th, 2013|Beacon News|Comments Off on Holyoke Gas & Electric Redesign Launched!

Is Flat Design For You?

As technology and the familiarity with it grows, designers and developers are now more than ever trying to enhance the website design world. Inevitably, this leads to countless passing trends that come and go much like any design industry. Which leaves us begging the question, how do we know what is more than just a trend and does it fit our website needs?

Flat design has been a fairly controversial topic since the beginning. Industry leaders such as Microsoft, Apple, and Google have all jumped on board lending us to believe there may be something more to this. So how can flat design benefit your site?

Flat Design Is Responsive Friendly

writer-responsive-blog-theme

Image credit to: www.wpexplorer.com/writer-blog-wordpress-theme

More and more we are finding people are using smartphones as a replacement for their computers. In 2012, more tablets and smartphones were purchased than computers. Because of this, responsive websites have now become a necessity. With the simplistic nature of flat design sizing elements down to fit a mobile device or tablet becomes that much easier. By using a lot of white space and large buttons flat design becomes very flexible when considering responsive website.

 

Flat Design Is Content Friendly

The mystery of, “What is more important? Content? Or Design?” has been solved. The answer is neither. Both equally important. Design attracts your users, but your content keeps them on your site. So why would you not leverage your design to showcase your content? Flat design’s clean and minimal layouts provide an environment that allows your content to stand out. Content communicated in a simple and clear manner is more easily digested by the user.

 

 Flat Design is User Friendly

Although minimal, flat design has a high level of focus on aesthetics generally utilizing bright colors and large imagery. This coupled with the elimination of borders and shadows entices the user’s eye to flow across your site with ease. Flat design strips down to the most basic form of design that can be appreciated by anyone.

The goal for any website design is to carry the message of your business across to the user. Your design should always highlight the content and focus on the user’s experience. Here at Beacon, we are constantly researching design trends and movements to ensure that our client’s websites are ahead of their time and solidified as legitimate marketing tools.

 

By | 2016-11-18T14:23:20+00:00 November 25th, 2013|Web Development|Comments Off on Is Flat Design For You?

Beacon NetCafe Second Update

My internship at Beacon Technologies is coming to a close but there are still many things to be done before I leave to go back to school. The previous week I completed the requirements and wireframe documents. I submitted the documents to the web designer of the Beacon NetCafe website. So far, the website is going along very well. The designer has setup a test website and it is taking shape. This week I have been working on the content for the website. This is just mostly writing up the various sections of the website. It will be important to finish completing the content for the website and giving this information to the web designer. I can’t help with the design of the website but I can help with the content. The next major step after completing the website will be a system test. With a system test, we will try to crack the website in every possible way. This is important before ever releasing a website to the general public. After the system test, a user acceptance test will be completed by Mark. The system test is from the developer’s side while the user acceptance test is from the user’s side. After all the tests are completed, we will complete a test run of the event or Beta test of the event. The website is coming along nicely but there are still many things to do. I am very excited to complete this project for the company. The website is starting to look complete and every day it looks even better.

By | 2017-06-16T12:20:19+00:00 July 9th, 2012|Web Development|Comments Off on Beacon NetCafe Second Update

The Expressive Web (Beta)

The Expressive Web (Beta) was recently released by Adobe to showcase some of the newest and most expressive features that HTML5 and CSS3 can add to the web today. Personally I found this to be an amazing example of what’s in the future for web designers and developers.

The Expressive Web

The site highlights the following HTML5 and CSS3 features:

 

Each feature page contains:

  • A demo of the feature.
  • Data on browser support.
  • Links to examples in the wild that use the feature.
  • Links to more in-depth resources and tutorials.
  • Detection and fallback strategies for the feature.

 

To read the full article about the development and design of the site visit Adobe Introducing The Expressive Web

Keana Lynch
Keana Lynch is the Director of UX Design & Development at Beacon where she has provided leadership and consultation for over 35 Higher Education projects. She specializes in the analysis, design, and implementation of websites. Keana is very passionate about design and development strategies focused on user experience, accessibility, multi-device interactions, and technical best practices. Outside of work Keana enjoys spending time with her three dogs, hiking, kayaking and volunteering with local animal rescue groups.
By | 2016-11-04T08:52:46+00:00 August 31st, 2011|Web Development, Creative Design|Comments Off on The Expressive Web (Beta)

“CLEAN” is the new black…

Sometime in the last couple of years, “clean” became the new “black” in terms of web site design… I cannot tell you how many times I’ve heard the exact same conversation at the beginning of redesign project…

“So, in terms of look and feel of the new site, please tell me what kind of graphical design you are looking for…”

“Well, I’m not sure, but I want it to be CLEAN.”

Don’t get me wrong, this is a perfectly legitimate request, but it requires some further explanation and thought on the client’s part.  To some, “clean” means uncluttered with lots of white/neutral space on the page.  I would qualify these Beacon-designed sites as meeting this criteria:

RF Micro

RF Micro

Cogent Research

Cogent Research

APEX Expert

Apex Analytix

Volvo Bus SCR

volvobusscr

To others, it means having one dominant color on the page (not just white), lots of photography and minimal text.  This is very different from the designs above and could look something like this:

SEBTS

SEBTS

NMEDA

nmeda

AC Furniture

AC Furniture

IBS Billing

IBS Billing

All eight of these designs came with the requirement that the site be “clean”, and as you can see, our accomplished design team satisfied that task in a variety of different ways– through color, texture, graphics, font and photography.  As a project manager, it is definitely my job to figure out what you are looking for in terms of design and I have lots of questions that I ask at a kick-off meeting to clarify this:

  • What words do you feel best describe the website look you want?
  • What kind of design/graphical presence are you looking for?
  • What are some sites you like or dislike when considering their graphical design? What do you like best about these websites?  What do you like least about these websites?
  • Do you have a “branding package” or other marketing standards that we need to be aware of?
  • Are there official branding/identity standards associated with the company logo, official fonts, company color palette, etc. ?
  • Do you have a brand or logo guideline?
  • Does the company have distinct colors?
  • Do you have a photography and/or graphical resources (database, CDs, etc.)?
  • Would it be useful for us to get some current marketing material (i.e. printed brochures, e-newsletters, etc.)?

However, if you want to make the analysis phase of a redesign project LOTS easier, please think about coming with not only an idea in your head of what a “clean” design is, but some specific examples.  The sites don’t even have be your competitors or even relevant to your industry.  A couple of years ago, our client was inspired by the Obama campaign site and we took our cues from that!   Quick bullet points about each design– what you like and what you don’t– is even better.  Nothing makes me happier than a client that walks in the door with a big stack of website print-outs and a hand written list on notebook paper.  Doesn’t have to be fancy, doesn’t have to be organized, but that list helps us so much to crawl inside your head and figure out exactly what “CLEAN” means to you!

Thanks for helping me to help you!

By | 2017-08-15T16:11:30+00:00 December 7th, 2010|Web Development|Comments Off on “CLEAN” is the new black…

IE6: “I’m Not Dead Yet”

I’ve been with Beacon for almost 11 years.  That makes me feel really old (or dedicated, one of the two).  Thus, it’s really hard for me to fathom that Microsoft Internet Explorer 6 has been with me almost my entire career.  IE6 was released on August 27, 2001.  That was a glorious day back then.  Think about how much IE6 revolutionized how we experience the Web, and how us coders could now start that revolution.  Who knew almost 9 years later, IE6 would be defying our death wishes.

Whenever I think about IE6 and how it should have been long gone from our minds years ago (like Netscape), I think about that scene from Monty Python and the Holy Grail.  You know, the scene where the “Dead Collector” encounters someone trying to put a man onto the dead cart.  Problem is, the man isn’t dead.  He pleads not to be cast off with the forgotten, but his carrier insists that he’s pretty much a goner.  Eventually after a lot of pleading, the man is hit over the head and wheeled away. (If you don’t know what I’m talking about, check out the video below.)

I can’t believe IE6 is still around. And whenever I try to admit that it has to be dead, someone calls and says, “This site doesn’t look right in IE6.”  In fact, according to the W3C Schools browser statistics, 7.9% of users are still on IE6 (April 2010).

Why haven’t those 7.9% users upgraded yet?  I have a few theories, one of which I came up with all on my own, the other I’m quoting from one of our university clients:

  • Many home users don’t know how to upgrade, so they leave well enough alone and continue to use IE6.  I always wondered why we move along so quickly in dropping all other browsers (Netscape, for example).  My theory is that all other browsers do not come pre-installed with Windows,  so it takes know-how and desire to go out and download that browser.  Those users are more apt to keep up with browser versions.
  • At many institutions (such as universities), desktop support personnel lock down machines so that people can’t install other software.  Even if this doesn’t include disabling Windows Update, this feature only downloads & installs critical patches…IE upgrades are considered optional.  Thus, the machine never gets upgraded to the next version of IE.

So what’s a Web Designer to do?  The way I see it, we have two options:

  1. Drop IE6 support altogether.  Give IE6 users a message stating that this site will not work properly in IE6, and they should upgrade.  (Translation:  Join us in this decade.)
  2. Live with it.  Continue to code for IE6, and enjoy the daily challenge.

The good news?  IE6’s market share has been dropping about 1% every month.  If this trend continues, by the end of 2010, IE6 will be gone!  We developers will get to do all of that fancy XHTML/DHTML/CSS 2.0/JavaScript programming without having to worry about IE6’s attitude.

IE6 isn’t dead yet.  But IE6, enjoy your time left:  “You’ll be stone dead in a moment.”

Will we have this same discussion in a few years for IE7?

By | 2017-02-21T11:24:17+00:00 December 4th, 2010|Web Development|2 Comments
Load More Posts