What’s New in Web Design for 2016?

As we plunge into 2016, many designers and developers are excited to see what innovative ideas will arise. It is up to us to deliver fresh and atypical ideas which provide a foundation for the progressive nature of our industry. Many are looking ahead and predicting different trends we may see in 2016. Some of the trends from 2015, will linger around for a little longer, while others will fade out. HTML5 and CSS3 have opened the door to many realms of possibility and continue to eliminate needs for Flash and jQuery plug-ins.

Below you will see trends I have found to emerge into mine and many designer’s lists of what to expect in 2016 and beyond.

1. Usability is King.

It is in our human nature to want things quick and as simple as possible. We are getting more mobilized with our web browsing and want information “on the go”. As designers focus more on simplistic and minimalistic styles of web design, developers are focusing on functionality to make designs and user interaction more fluid.

a. Flat Design – A trend here to stay

i. A couple years old now, Flat Design is a trend we see continuously getting applied to web designs. It’s bold and vibrant colors, easy to read Sans Serif fonts, big images, and minimalistic approach provide users with an easy to read style of simplistic design. The website http://riiotlabs.com/fr/accueil is a great example of flat design and also a good example of how animation is beginning to get incorporated into background images.

b. Material Design – User Interface Defined

i. Introduced in 2014, Material Design was started by Google as a foundation for User Interactive design for cross platform use. Similar to the minimalistic appeal to Flat Design, Material Design focuses on shadows and depth which allow the user a better visual perception. The use of these shadow effects creates a 3D environment for devices when displaying objects, animations, and responsive interactions. Android introduced this style into its theming for the new Android 5.0 and many App designers are beginning to follow suit. For more info on Material Design, visit:

https://www.google.com/design/spec/material-design/introduction.html.

2. Typography

a. Designers are beginning to turn more focus on their choice of fonts. Whether it is for better readability or for unique ways to artistically spell out the title of a company, Google fonts has opened the door to huge a huge library of font selection. Typography is one of the biggest playmakers in successful design, as designers find ways to find legible and creative ways to spell out their content beyond the normal styles. We will begin to see bigger and bolder typography throughout the year. http://www.getzeroapp.com/ gives an example of how designers are implementing big bold text into their websites.

3. Cinemographs – It’s Alive!!!

a. Cinemographs are images that show movement in a still photograph. Since the first one in 2011, these images have become increasingly popular. With the implementation of Apple’s Live Photos into iPhone 6 cameras; Cinemographs have sprung a higher awareness to society. Many marketing and advertising agencies see this trend and are incorporating these compelling images into their use in social media and web design.

To check out some awesome cinemographs, visit http://cinemagraphs.com/.

4. Storytelling – Once Upon a Time….

a. One way to portray content is through the unique style of storytelling when designing a web site. Storytelling can be very effective in marketing as long as it is done properly. The key is keeping the user engaged and making them want to explore the depths of the web site. Many designers use long-scrolling along with scrolling effects to tell a story as the user moves down the page. Others, like this great example by Nike, are great ways to really engage the user to make them feel like they have control on how it all plays out.

5. Responsive Design – The Mobile Age

a. Responsive Design has been a trend for a while now. People are finding themselves using mobile devices like smart phones and tablets for their internet browsing more than they use laptops and desktops. The introduction of the Apple Watch and new arising technology of virtual reality goggles and Google Glass will introduce a new demand for more user interface layouts and screen sizes that designers will have to accommodate. One example of these wearables is Wove – a flexible touch display watch. These many different wearables will unleash a demand for specific device styling to keep usability fluid.

6. Rich Animations

a. The use of animation is becoming very popular in multiple ways. Designers are incorporating small scale animations that require no user input into minimalistic, flat design. Loading animations are being created for users to enjoy themselves for a brief moment while content loads. Multiple kinds of user effects are being used to control animation like scrolling effects, galleries/slideshows, hover effects, and pop-up notifications.

b. Videos are becoming popular as full page background images. This is tricky for designers though, as video backgrounds can become disturbing when it comes to good readability.

http://www.because-recollection.com/rita-mitsouko is a sweet website that shows animated backgrounds and also produces great user interaction and is set up like a storyboard.

Alan Horwatt
With a B.S. Degree from Clemson University and a Masters Degree in web design and technology, Alan Horwatt joins Beacon as a UI Developer. Outside of the workplace, Alan enjoys tournament bass fishing, snowboarding and investigating new technologies.
By | 2017-08-08T08:39:15+00:00 January 12th, 2016|Web Development|Comments Off on What’s New in Web Design for 2016?

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

What is UX and Why Does it Matter for Your Customers?

User experience (or UX) can be a little difficult to define because it describes not only a professional practice but also the results of that practice. The concepts behind user experience have been around for a very long time but the term itself has only been around since the 90s. In the mid 20th century Henry Dreyfuss wrote –

“when the point of contact between the product and people becomes a point of friction, then the industrial designer has failed. On the other hand, if people are made safer, more comfortable, more eager to purchase, more efficient – or just plain happier – by contact with the product, then the designer has succeeded.”

mobile-hand

User experience puts science and research behind the design of products and services to improve the quality of the experience a user has with that product. Methods are used to discover what the user needs and to ensure that the final end product or service meets those needs in a manner the minimizes friction and maximizes pleasure. Deliverables are created through the UX process but they are not the end goal. It is more important to perform quality research to develop a true understanding of the needs of the user.

UX encompases a lot of factors including:

At Beacon, we always like to compare the web design and development process to building a house. User experience design is like creating the blueprints. First you have to find out what type of people will live in the building. You have to understand their needs and gather knowledge about them and about the neighborhood in order to get a better understanding of what type of house you should build. If you think of UX as the house plan, graphical design would be the equivalent of choosing the flooring, paint, and fixtures. Development is the ultimate construction process, and testing is the building inspection and walk through.

The most important skill of a UX researcher is knowing how to listen. There is no set of best practices that get robotically implemented – each project is unique and requires solutions that are reflective of the real needs and problems to be solved. The end result is the creation of a product that delights users and also functions well which can result in improved conversion rates, greater numbers of users, and ultimately a higher return on investment.

 

By | 2016-11-22T09:56:54+00:00 April 1st, 2015|Creative Design|Comments Off on What is UX and Why Does it Matter for Your Customers?

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?

Free Responsive Web Design (RWD), HTML5 and CSS3 Vector Logos in PSD, AI and PNG Formats

I was working on my personal website over the weekend and decided I wanted to use the HTML5 and CSS3 logos within my portfolio. When I went to do this I realized I had no visual way to display Responsive Web Design. I searched and couldn’t find any official RWD logos or a version that I felt would go along with the HTML5 and CSS3 logos like I wanted so I decided I was going to have to make it myself.

 

Here is the process of how I created the RWD logo:

  • Downloaded the vector versions of the HTML5 and CSS3 logos
  • Used Gotham Ultra to create the base for the ‘RWD’ in black
  • Tweaked the RWD slightly to match the ‘HTML and ‘CSS’
  • Used the shape and size of the ‘5’ and the ‘3’ as an outline to create the R
  • Used a color schemer online to choose a color that complimented the first two logos

 

I’m really excited with how it turned out so I would like to share it with everyone. Feel free to use it however you wish!! The RWD logo’s I did see were a lot of the time in a shade of dark gray so also feel free to change the color if black becomes the new RWD signature color.

This vector set includes:

  • HTML5 Logo
  • CSS3 Logo
  • Responsive Web Design (RWD) Logo

 

Preview

html5-css3-rwd

Download Links

 

Also if you have any ideas to improve the R within the RWD logo please comment below! I struggled with it following the same structure as the 5 and the 3 but still looking like an R.

*Please note this is in no way an official logo or design for Responsive Web Design. Given RWD is a practice or methodology of a combination of multiple things I’m not sure there will ever be an official logo created for it. I did this as a way to display RWD visually next to the HTML5 and CSS3 logos within my personal website.

By | 2017-06-16T13:14:01+00:00 September 23rd, 2013|Web Development|1 Comment

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

GIF wins Oxford’s ‘Word of the Year’

I really was looking for some nice serious techie news to blog about today, but this article was just too irresistible to ignore: GIF wins Oxford’s ‘Word of the Year’.  Despite the hilarious sub-title “JPG and PNG decline to comment“, I really did learn a lot  in the guts of the article.  For example, I didn’t realize that our friend the “GIF” (graphic interchange format) has been around for 25 years (almost as long as me!) and that nearly every Internet browser ever made supports it (and believe me, that’s A LOT of programs, cause we test our sites in most of them).  The acronym has also evolved from a noun to a verb (“Most recently many media outlets were live-GIFing the 2012 presidential  debates.”).  According to the article “it’s the easiest way to share a quick animation.”

And as a completely un-techie side note, who even knew that Oxford Dictionary selected a “USA Word of the Year“???

A GIF of GIF

A GIF of GIF

By | 2016-11-23T10:52:04+00:00 November 16th, 2012|Creative Design|Comments Off on GIF wins Oxford’s ‘Word of the Year’

Greensboro Housing Authority Site Launch

We’re proud to announce the release of the Greensboro Housing Authority redesign!  As always, Beacon was right on-time with our deliverables, which is always our goal.  The client chose a soft launch date of December 1, 2011 because they wanted to show the new site to their Board of Directors at their annual meeting that day.

Their Web site was designed and constructed in-house several years ago, which meant that it was time for a completely new look.  The site also had content that was very out-of-date, so the client took it upon themselves to do a complete rewrite of the content, and restructure the site to be more intuitive.  Also, they wanted to get away from having to update the site by-hand using HTML, and wanted it in a content management system.  Finally, they wanted a new Web hosting partner.

Enter Beacon:

  • We provided them with a brand-new graphical design;
  • Developed it to display perfectly in multiple browsers;
  • Implemented the new site into Cascade Server (content management system) to allow multiple users to update the content with an easy-to-use solution;
  • Incorporated a new search feature;
  • Imported approximately 60 pages of content, including 20 fact sheets about each of their properties;
  • Transferred their Web site to a shared hosting package here at Beacon.

Several Beacon staff members made this project a success:

  • Wendy:  Without much direction from the client, Wendy put together a design that they liked on the first try, which is phenomenal.
  • Stephanie:  She was instrumental in getting the project off the ground, attending the initial meetings and providing meeting notes, the business requirements, and proposed site hierarchy.
  • Zed:  He was thrown into the fire, as this was his first development project here.  He developed the front-end HTML/CSS/jQuery, and implemented the site into Cascade Server (which he picked up on very quickly), and entered most of the content.
  • Tiffany:  Provided assistance and training to Zed.
  • Justin:  Project Management and Cascade Server documentation & training.
  • Beacon’s Technical Support Group (TSG):  And finally, no site hosting transfer is complete without the efforts of TSG, specifically Caleb and William, for setting up the hosting and troubleshooting some DNS issues over a weekend.

This is another high-quality design to add to our portfolio, and another non-profit site we can be proud of.   Thanks to everyone involved!

Before

After

By | 2017-08-15T15:53:10+00:00 December 19th, 2011|Beacon News|Comments Off on Greensboro Housing Authority Site Launch

Beacon Technologies Through the Eyes of an Intern – Week 10

Well sadly, this is my last blog post at Beacon.  It’s been a great 10 weeks.  I really have enjoyed my time here.  Looking back, I can’t think of anything negative to say about my experience.  I want to take the chance to kind of do a recap of my time here.

When I came in the first day, I will admit that I was pretty nervous.  I hadn’t really had a lot of exposure to the kind of work that Beacon does so well.  I knew what most of the terms were from talking to a friend of mine who has been doing similar work.  However, the WMS team here helped me learn the skills I needed.  Everyone took time to show me how to do certain tasks and helped me with understanding the clients I worked on as well as what needed to be done for each client.  As the weeks have gone by, I have grown more confident in doing SEO work, managing social media campaigns, and working with PPC campaigns.  I know that I still have a lot to learn in these areas, but Beacon has given me a strong foundation on which to build.

I know that people traditionally think of internships as being filled with a lot of grunt work.  Getting coffee, running errands, doing tasks that no one else wants to do themselves.  That is far from the case here at Beacon.  As you can tell if you have been following my blog posts thus far, I have been an equal member of the WMS team.  I have shared the same responsibilities as everyone else.  I’ve done the same tasks for my clients as they did for their clients.  Often times, interns don’t get to offer advice and feedback during meetings as it is intended that they learn by watching.  Again, this is not the case at Beacon.  The WMS team meets weekly to brainstorm ideas for clients as well as share interesting articles or other helpful information and tools.  The leading of the meetings rotates each week and regardless of the fact that I am an intern, I led the meeting twice during my time here.  I also contributed equally with the team as much as possible.  I will admit that I often did sit back and listen during meetings.  I know that I do not have nearly the amount of knowledge or experience in this field, and as such I wanted to try to learn as much as possible when everyone was together sharing ideas.

Looking back, I have gained a lot of valuable experience.  There are several tasks and projects that I was able to work on and contribute to during the 10 weeks.  I can honestly say that anyone who is looking for an internship should consider Beacon.  The atmosphere, company culture, and employees all lend themselves to a great work environment.

Thank you to everyone here!  It’s been a great experience and I have learned a lot from you all.

By | 2017-08-11T16:07:39+00:00 July 22nd, 2011|Beacon News|Comments Off on Beacon Technologies Through the Eyes of an Intern – Week 10
Load More Posts