27 11, 2018

Cohesion: Key To Great Web Design

By | 2018-11-21T13:51:47+00:00 November 27th, 2018|Categories: Higher Education, Web Development, Creative Design|Tags: , , |

Does this sounds familiar?

You’re exploring a website and click into a major navigation menu item. The new page loads and, suddenly, you feel like you’ve been transported somewhere completely different. Nothing about the experience on the new page ties back to the page you just came from. The type face is different, the navigation menu is completely unrecognizable in both style and selections, the color scheme is brand new, as is the overall page layout. You check the URL… yep, still the same domain.

This confusing experience is replicated surprisingly often across the web. In fact, this issue crops up fairly consistently for colleges and universities, as well as other large organizations.

What gives? It’s 2018! Doesn’t anybody know how to design and maintain a good website?

Putting our incredulity aside, it’s important to remember that the reasons behind a bad user experience aren’t usually intentional. No one sets out to confuse their audience on purpose.

In most cases, a confusing website is just a result of competing needs. Sometimes you need to add a new landing page quickly. Sometimes, staff turnover makes replicating older page templates challenging. Sometimes, you’re asked to try something new and different just to see if it works.

All of these reasons are plausible enough. Also, the web is a fast-moving place. The instincts to evolve, try new things and move quickly are usually the right ones.

That said, nothing on your website should be a one-off. If you want to implement change, you have to have a plan.

Creating & Maintaining a Cohesive Web Design

It should go without saying that a cohesive website design will keep your users engaged, on task and able to replicate their sessions easily and intuitively. So, how can one create and maintain cohesion through the design process and beyond?

The first objective is to create consistency for the user throughout their journey. This is best accomplished by establishing your brand elements and maintaining predictable page layouts and navigation. Predictable doesn’t have to mean boring. You can have a great page, with lots of great, engaging content, that still follows an intuitive layout.

The other on-page elements that you must painstakingly keep constant throughout your site include:

  • navigation menus
  • header and footer
  • type face
  • color palette
  • accent graphics
  • imagery (quality and tone)

There are aspects of your higher ed website that can be tailored to highlight special features of various departments or schools. The above list, however, is absolutely hands off.

Elements of Cohesive Interior Pages

While the homepage introduces your users to your brand, the job of landing and interior pages is to deliver information that your users are searching for and help them complete a specific goal. These objectives are best accomplished by different means, and this should be acknowledged by your design.

Branding is done best through visual elements. As such, homepage design leans heavily on imagery and graphics.

Interior pages are concerned with delivering hard information. As such, the design and layout need to reflect the text-heavy nature of these pages. Branding can be injected through the use of consistent header  and text styles, button colors, voice and tone of the text.

Visual elements, while still very much important, are, nonetheless, a secondary priority – they help break up the text and keep the user’s attention on the page. Despite the reduced emphasis, the visual elements help tie interior pages in with the branding of the rest of the site.

Elements of Cohesive Landing Pages

Landing pages are a cross between the homepage and an interior page. When arriving at a landing page on your higher ed website, your users should feel like they’ve just flipped open to a start of a new chapter in a book. There’s an introductory feel, but also hard information presented for consumption.

Due to the dual-nature purpose of landing pages, they tend to integrate a bit more graphic elements than interior pages. The landing page are really a continuation of the user experience from the homepage. As such, they tend to carry over some of the visual design and interactive elements of the homepage.

Beacon Knows Higher Ed Web Design

Want to know how your higher ed website stacks up? Not sure if you need a refresh or a complete overhaul? Request a complimentary website audit from Beacon’s expert team. We’ll be happy to discuss your most pressing needs.

13 11, 2018

Visual Storytelling: Designing an Effective Homepage

By | 2018-11-13T12:25:03+00:00 November 13th, 2018|Categories: Higher Education, Web Development, Creative Design|Tags: , , , |

Brands are big in our society. Wherever we go – out to dinner, to a concert, for a cup of coffee with a friend – we see branding. In addition to communicating (sometimes) complex ideas, branding is also used as an identifying element. It’s how we know that the store we’re walking in to is the place we mean to be.

The same is true online. We’ve discussed the idea of the website as the centerpiece of higher ed marketing strategy previously. If your website is your digital storefront, how do your visitors know that they’ve come to the right place after typing in your school website URL or clicking on a link?

Of course, the user’s expectation is that they’ve arrived at their intended destination. The homepage, then, first and foremost, needs to confirm that expectation. The easiest way to do that is to lean on your school’s branding.

The homepage is where the user journey starts on your website. For colleges and universities, this is where prospective students gain their first impressions of your school. As a digital doorway onto your campus, the homepage needs to display your institution in a visually striking way that resonates with your future students. It needs to scream your school brand… loudly.

Show Them, Don’t Tell Them

How do you create an authentic brand experience? Making use of compelling campus imagery is a vital first step. The goal is to relay your school’s narrative mainly through visual elements.

Letting your prospective students enter your world via stunning and interactive visuals allows them to become part of your story. They want to see themselves there, reflected in the student body. That’s why shots of students walking through a busy part of campus is such a fixture on higher ed websites.

Aspects that exemplify the personality of your school are also perfect muses for the page. Be it an iconic landscape, a specific department, or a philanthropic spirit, these hallmark additions draw users in and make a big first impression.

Imagery serves as a great alternative to extensive text. While packing your homepage with tons of written information may seem like a good idea, it can actually hurt the overall experience. The job of the homepage is to wow your prospective students, and then guide them to the next step in the recruitment process – campus visits, application, or a deeper dive into the academic offerings.

Make It Easy, And Tell Your Story

You know what prospective students are searching for… maybe even better than they do. So, help them out. Since the homepage is almost always designed for the prospective students, tailor the homepage experience for their needs. Structure the page to match the questions and interests of this audience group.

That doesn’t mean that your campus events are not important. They are. It just means that the homepage is probably not the ideal place to feature the events widget prominently.

The layout of the page should create an easy to follow narrative: This is who we are, this is why you want to be here, here is what you need to get started.

Keeping with the theme of easy, provide direction and navigational guidance for your visitors. Be sure to include CTAs like “Apply Now” or “Schedule A Tour” at appropriate panels throughout the page. Be cognizant of where your buttons are. Placement is key for visibility and engagement.

To ensure you are on target, use Google Analytics data to monitor your CTA engagement levels. You can always tweak the appearance or wording of your CTAs to optimize performance.

Don’t Forget That Your Audience Is Mobile

A lot has been written about adopting a mobile-first approach to website development, including our recent post on the topic. But, what’s the impact on homepage development for higher ed websites?

While online college applications typically get filled out on the bigger screens of desktops and laptops, your prospective students are just as likely to first check out your school website via their mobile devices. As such, the homepage needs to be optimized for the mobile experience.

That doesn’t mean that the homepage should be stripped of any complex functions. It just means that your foundational page elements need to scale easily and efficiently to smaller screen sizes.

Beacon Does Web Design

Feeling overwhelmed? Don’t know where to begin your homepage revamp efforts? No worries, Beacon is here to help. Request a complementary audit from our expert team today.

9 08, 2018

Design Is More Than Meets the Eye

By | 2018-08-09T15:20:34+00:00 August 9th, 2018|Categories: Higher Education, Web Development, Creative Design|Tags: , , |

Undertaking a web re-design can provide the liberating feeling of starting anew, from scratch. But, most of the time, that’s not really the case. Pretty much all of the websites undergoing a re-design still have a base of existing users.

So, while you do want to focus your re-design around fresh, modern and relevant elements, you should make sure that your new website still accommodates your loyal followers.

You can do so by analyzing your Google Analytics data and taking note of the browsers and devices your current users utilize. We’ve parsed GA mobile and audience analysis in an earlier post. These data points can have a significant influence on your design. After all, what good is a shiny, new, website, when it doesn’t display or load correctly on the devices your primary audience use most.

Designing for Mobile

In today’s mobile-heavy society, designing a website using a mobile-first approach is a must. With search engines placing particular emphasis on mobile-friendly capabilities, it’d be foolish to ignore how your website looks through a mobile screen.

That said, while everyone typically buys into the mobile-first approach, as the design/development process stretches out, sometimes the focus shifts to other priorities. Most often, the design approach morphs from mobile-first to mobile-constrained.

What’s the difference?

Instead of the mobile experience driving design, mobile elements (like smaller screen sizes) guide the initial design parameters and then take a back seat to content concerns deemed more important. This is what web design insiders call progressive enhancement — or, a focus on core content first, and adding richer elements that enhance the user experience second.

This isn’t necessarily a bad thing. As long as key elements are geared toward the mobile experience, like responsive templates and main navigation built for smaller screen sizes, you should be in good shape. Just make sure the website works for all the devices your audiences use (yes, even the old ones).

Designing for Browsers

The kind of browsers your website audiences utilize can also impact your re-design. Not everyone automatically updates their preferred browser when new versions come out, no matter how many times the IT guy recommends it. The impact of old browsers can be felt in a couple of ways.

First, older browsers simply won’t be able to support some of the newer design elements  — or, won’t be able to handle them well. If you know that a large portion of your users relies on an outdated version of a browser, that can limit your design choices and nix that really cool feature that you wanted to include.

One tool that developers use in cases like this is caniuse.com. This site allows users to see what versions of browsers support a particular feature through a simple search.

The other concern with outdated browsers is security. Browser updates are often issued in order to patch up vulnerabilities in the underlying code. If users don’t update their browsers they don’t just leave themselves exposed, they spread the risk to the entire ecosystem.

One way to protect your site is to remind user to update their outdated browser via an “old browser alert.” A pop-message can be set to trigger anytime a user with a vulnerability logs onto to the site, and encourage them to update.

Lately, coders have even made an effort to encourage users to update their browsers in order to protect not just themselves, but everyone else, too.

Beacon Knows Web Re-design

If you’re observing declining traffic or cratering conversion metrics on your website, it may be time to consider an overhaul. Request a website audit by our knowledgeable digital marketing team and see how you’re doing.

29 11, 2017

Sean Connery’s 5 Design Elements That Make Sites Look Outdated

By | 2017-11-08T13:28:06+00:00 November 29th, 2017|Categories: Creative Design|Tags: |

How do you know when your website looks outdated and needs a refresh? When your engagement metrics slide, that’s a pretty good indicator. Sometimes, it’s even more obvious than that.

Such is the case with the website of a well-known celebrity. It’s the perfect example of a digital public face in dire need of cosmetic surgery.  Or a car wreck you can’t turn away from. This, in a nutshell, is SeanConnery.com.

As a public service, I offer my observations to you and the beloved actor. In the interest of pure fun, each anecdote references a famous James Bond quote. Guess the movie and win a prize. (Mr. Connery, you don’t qualify).

Without further ado, I bring you the 5 design elements that make any site look outdated:

#1 Design Layout

“Well, one of us smells like a tart’s handkerchief.”Sean, I hate to be the one to break it to you but it’s you. The layout you’ve chosen is right out of the 1970’s. The design is anchored in the upper left corner. Its three column layout with two side gutters is positively nostalgic. That’s not a good thing, Sean. The type becomes very small and hard to read. The URL is in the header. I haven’t seen anything like it since the McCarthy hearings.

#2 It’s Not Responsive

“Good morning, gentlemen. ACME pollution inspection, we’re cleaning up the world, we thought this was a suitable starting point.” – All the top Hollywood gossip sites are mobile friendly, which should tell you all you need to know about this audience’s behavior, Sean.  If I were assigned with ridding the internet of digital pollution, I’d start here.

#3 No Video

“Ejector seat? You’re joking!” – You’ve appeared in over 60 films, won an Academy Award and 3 Golden Globes. And yet Mr. Connery, you have no video on your site. You must be joking. Video drives engagement. You need the attention. You’re not exactly getting a lot of parts these days. Where’s the paparazzi when you need ‘em? Probably on YouTube.

#4 No Social Media

“Do you mind if my friend sits this one out? She’s just dead. – Celebrities thrive on attention. In this day and age, there are no better or more necessary channels than social media outlets such as Facebook, Twiiter, Snapchat and Pinterest. Hell, Pierce Bronsnan has a social media presence and he can’t act his way out of a paper bag.

#5 The Website Requires Flash

“Red wine with fish. Well, that should have told me something.” – Yes, it’s a website with Flash. That’s the software Adobe will discontinue in 2020. ‘Nuff said.

 Just Say Dr. No.

If SeanConnery.com reminds you, dear reader, of your website, just say “no”. It’s time for a redesign. NOW. If you have any questions on anything above, wish to add a comment or contribute another example of web atrocities, please leave a comment or email me here.

Answer key to quotes above:

#1 Diamonds Are Forever

#2 Diamonds Are Forever

#3 Goldfinger

#4 Thunderball

#5 From Russia With Love

30 06, 2017

Top 5 Accessibility Items to Review in a Website Redesign

By | 2017-07-17T07:14:26+00:00 June 30th, 2017|Categories: Higher Education, Web Development, Creative Design|Tags: , , |

Accessibility is a hot topic and an expansive one, too. I’ve been preparing for some upcoming speaking engagements with accessibility being the main focus. The first of these engagements is the eduWeb Digital Summit on August 6-10. This seems like a good time to share some thoughts regarding accessibility, WCAG guidelines and 508 compliance.

Additionally, I’d like to leave you with a list of 5 important accessibility items to review while in the midst of your next site redesign.

Accessibility Overview

Often, when administrators or oversight committees are asked to consider website accessibility while planning their institution’s website redesign, they think only in terms of addressing under-served users such as the elderly or visually disabled. Accessibility doesn’t simply address the needs of the disabled user. Adaptations and modifications made to address under-served users have broader implication, frequently enhancing the experience for all users. Designers and developers understand this and design with the idea that what is good for one is most often to the benefit of all.

Accessibility almost always enhances a website’s usability.

For example, incorporating design for those with diminished motor skills is always a good idea. It will enable all users to view your website without having to use a mouse. By doing so, you’ve also made it easier for any user to navigate the site and spend some time there. User engagement improves and, if you’re operating an online storefront, sales go up as well.

It goes without saying that any and all websites should factor accessibility into their design. To that end, WCAG recommendations and 508 standards have been established as guidelines to ensure a positive user experience for all. These guidelines have peripheral benefits, as they often overlap with best practices for mobile design and SEO. Still, there are many, many sites that remain inaccessible to a large number of users even today.

5 Accessibility Items to Review

With this in mind, I’ve comprised an abbreviated list of important accessibility items to consider when redesigning one’s website. Bear in mind that while I’ve listed 5 important accessibility items, this list is hardly complete and is meant only to provide a high level overview of what’s involved. Consider:

  1. Clear and Logical Design – This includes clear and intuitive navigation, contrast between text and backgrounds, proper use of color and more.
  2. CMS that Supports Accessibility – You’ve already considered functional requirements. Not all content management systems meet WCAG accessibility requirements. Know this from the start.
  3. Content Structure – Use headings and lists so as to clearly organize information. Use clear title attributes and page titles. Consider skip navigation for users of screen readers.
  4. Keyboard Accessible Functionality – Users with motor skill deficiency depend on keyboard accessibility to navigate your site. Other users benefit from added efficiency thanks to keyboard accessibility guidelines.
  5. Accessible Forms – Using JavaScript in forms often means that they are not accessible by keyboard alone. Testing your forms for keyboard accessibility is an imperative.

Once the items listed above have been fully considered and incorporated into the new design, the all-important testing phase begins.

Testing for Accessibility

Accessibility and usability are undeniably congruous. The benefits extend beyond just the user experience and into SEO and mobile performance. So take the time to test and test again. It’s time well invested. Fortunately, the WC3 provides a list of recommended web accessibility evaluation tools.

A Few Final Words

I look forward to seeing many of you at the upcoming eduWeb conference in August. I’ll discuss the topic of accessibility in more detail at that time. In the meantime, please comment below. Share your thoughts and experiences. We’ll pick up where we left off at the conference. See you then.

1 04, 2015

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

By | 2016-11-22T09:56:54+00:00 April 1st, 2015|Categories: Creative Design|Tags: , , , |

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.

 

15 04, 2014

The Ripple Effect in the Design Process

By | 2016-04-22T15:39:58+00:00 April 15th, 2014|Categories: Web Development, Creative Design|Tags: , |

When I learned to paint, my teacher would always emphasize the importance of working the entire canvas at the same time. A lot of people have the natural inclination to zero in on the small area they are currently working on, and really develop it before working out to the rest of the piece. The problem with this approach is that a lot of time will pass as you work from one end to the canvas to the other, and your style will change with time. You hand will tire and get looser, the colors in your palate may not be mixed quite the same way, and you may take a break here and there and when you return to your painting, your flow is just not quite the same. So what happens is, you get inconsistencies in style and feel across the canvas leading to a touch of disharmony. The solution to this is to work the canvas in it’s entirety from corner to corner at the same time. Lay in big chunks of underpainting, scatter those accent colors and highlights across the whole piece as needed when you have that perfect hue at hand, and keep your stroke styles consistent across the piece. This also allows you to plan out the space and layout better since you start to block in all the elements at the same time. As you work the canvas, you may add touches of a color in one area, and find that you need to carry that color across the whole painting in spots as needed to create unity and harmony.

ripple web design

A similar phenomenon happens during the design phase for websites. I like to call it “the ripple effect”. Typically you have a starting design that then goes through iterations. Often these iterations are based on client requests for design changes. Perhaps that blue was not quite right, and they want it to be more of an indigo. Maybe their marketing team has decided to revamp the logo towards the end of the homepage design process. All these design requests may seem like simple isolated changes, but they have a ripple effect that creates a need to change elements across the whole site design. This is because, just like the canvas, the design needs to be worked from corner to corner at the same time in order to ensure balance, harmony, and to maintain an appropriate visual hierarchy between elements. That simple header background color change may then effect the color of the navigation elements and the border and gradients of a newsletter sign-up box. Then subsequently, the footer navigation links will need to be changed for consistency. Perhaps that new logo is a more subtle and diffused style, and now everything else on the page seems to overpower it. The only solution is to take the elements on the page down a notch so that the logo doesn’t get lost.

It’s important for people to be open to these ripple effect changes throughout the design process and to also consider how their design change requests may impact the whole of the design. Because they have such a large impact the design, it is important to nail down things like your logo design and color palates early on in the design process to ensure that their style is carried over into all the elements throughout the site.

 

8 04, 2014

Placeholder Images – The easy button

By | 2016-11-29T14:21:44+00:00 April 8th, 2014|Categories: Web Development, Creative Design|

Ever hate having to find various stock or other imagery to fill in example image placeholders in earlier design/development stages?

The easy button has arrived!

Placehold.it – http://placehold.it

No more saving and moving and uploading. In fact if the size changes you will never even open up image editing software!

All you have to do is define the src of the image using the following syntax:

http://placehold.it/widthxheight&text=whateveryouwant

So using this I can make an image with the following src and it appears like below: http://placehold.it/400x200&text=Image:400×200

Placeholder Image

This is also beneficial for the following uses:

  • keeping focus on layout not images
  • making image dimensions clear to an end user
24 01, 2014

More Free Social Vector Icons! (flat icon set)

By | 2016-11-22T18:23:43+00:00 January 24th, 2014|Categories: Web Development, Creative Design|Tags: , , , |

This is a new set to go along with:

You can download this set by right clicking on the below preview and using ‘Save Image As’.

This icon set includes the following flat icons:

social-media-icons-set2

  • Khan Academy
  • Aim
  • Quora
  • Kickstarter
  • CodeSchool
  • MongoDB
  • Backbone.js
  • Coderwall
  • HTML5
  • CSS3
  • Responsive Web Design
  • W3C
  • Codecademy
  • Yelp
  • IMDb
  • jsFiddle
  • Vevo
  • Codepen
  • Eventbrite
  • A List Apart
  • Instagram
  • Google Drive
  • GrubHub
  • Spotify
  • Dropbox
  • Vine
  • Paypal
9 08, 2013

Redesigning Without Frustrating Your Users

By | 2017-06-16T13:05:30+00:00 August 9th, 2013|Categories: Web Development, Creative Design|Tags: , , , |

Your users rely on your website to get things done. They are used to doing it a certain way. So when things change, people get frustrated. Nevertheless, change is necessary. So the job of your web design and development team is to try to make the changes go over as smoothly as possible.

Communicate with Your Users

Testing is a valuable tool to help you figure out where the problem areas of your website are. Gathering information by polling or asking your users to give their feedback can be incredibly valuable. But, keep in mind that sometimes what a user tells you about their experience with your site may not exactly match what really happens when they are actually on the site. There may be inconsistencies with a users intent and their action because of the contextual factors involved. Every time someone uses your site, the situation is different and therefore the results are different. Monitoring and using things like Google Analytics metrics will give you facts to compare to your collected empirical data.

Types of Change

Design changes are more immediately noticed, while workflow changes may take time to be detected by your users. Dissatisfaction with design changes may not be enough to keep them from using the site, but if the functionality of the site is compromised users may be discouraged. Therefore it is vital to ensure that any workflow changes will benefit the user in the end. Workflow changes can bring short term user dissatisfaction but valuable long term gain. Ultimately people are able to learn and adapt to the changes within a few days, and as long as the benefits last longer than this relearning period, their experience will ultimately be positive.

When is change necessary?

Change is always necessary when it solves a problem or serves a specific purpose. Ease of use, being the ultimate goal. Increased and varied functionality is only valuable when truly needed. You also need to consider the types of users you are designing for. There is no need to hold back for a small portion of your users, while inhibiting the experience of most of your users. Maintaining core consistencies with your old site, such as keeping things in the same general location and using familiar visual cues, will assist your user with making a smooth transition to your new design.

Load More Posts