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

Beacon goes to Moogfest 2014

Beacon had the opportunity this past weekend to participate in Synthesis, an event by NCTA, at Moogfest in Asheville, NC. This portion of Moogfest was a high energy tech expo featuring a wide range of technology companies. Live entertainment was there, in true Moogfest spirit, and various speakers from the tech field presented throughout the day.

moog1 Beacon was able to participate in the various Moogfest workshops and presentations as well as enjoy all the live music the festival has to offer. The one thing that unites all the performers and speakers throughout Moogfest is the use of technology and innovation in their art and music. It was fascinating to see how technology is being used in both audio and visual experiences and to envision where these technologies will take us in the future. Excitement about interactivity and communication was a common theme throughout Moogfest. At the Google Creators Panel Discussion, the Google team talked about creating tools for mobile devices that allow users to create their own music. Mobile apps are enabling people to have easier access to all sorts of tools, breaking down barriers, and giving people new ways to create and learn. They also showed a project that used data (from Google Maps), combined with images and music to create an audio/video experience that was personalized to the user’s childhood neighborhood. This took the music used in the project to a new personal level. I think personalization and interactivity are always marketable things to integrate into a software product. When you can build a relationship between the user and the experience, then there is attachment there that helps build loyalty and this relates back to user experience and brand loyalty.

moog2 Moogfest is mostly about music, but there was definitely a lot to take away about design and user experience. NCTA’s Synthesis event was a great avenue for people to see how technology is applied across a wide range of areas. A big thank you goes out to NCTA for putting on this event and bridging the gap between technology in the business world and technology in the music world.

 

By | 2016-11-18T14:15:38+00:00 May 2nd, 2014|Beacon News|Comments Off on Beacon goes to Moogfest 2014

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

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?

How to Override the Max Width of Twitters Embeddable Timeline Widget

According to twitters instructions the embeddable timeline widget has a maximum width of 520px. If you need your widget to be wider than 520px you will not be able to use the width attribute. If you need it wider you’ll need to override the max width using the following CSS (change width accordingly):

By | 2017-06-16T12:22:23+00:00 June 6th, 2013|Web Development|Comments Off on How to Override the Max Width of Twitters Embeddable Timeline Widget
Load More Posts