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.

22 04, 2013

Considering Drawer Style Site Navigation

By | 2016-05-27T10:13:29+00:00 April 22nd, 2013|Categories: Web Development, Creative Design|Tags: , , , , , |

Lately we have been utilizing a drawer style navigation in our designs to provide a better user experience in our websites. The request for quite a bit of content in the drop downs themselves (mega drop downs that span the full width of the site no matter which tab you have clicked) in some of our more complex higher-ed sites also creates the problem of covering up the content of the site and proving tricky when the site responds to mobile screen sizes. Putting the navigation in a sliding drawer is proving to be a unique solution that translates beautifully to mobile in responsive design.

If you look on Mashable, a popular news article site, the nav drawer does not shift the page down, but is a full width mega drop down menu. Compare to the University of Wyoming, a site recently developed by Beacon, which has a drawer based nav.

Mashable mega drop down navigation

University of Wyoming drawer based navigation

Whether or not this is the right nav for your site will probably be based upon a lot of factors like what type of content is in your drop downs and what type on content is on your homepage. If you have a lot of content in your navigation it may be worth while to put that navigation in a slider so that the homepage remains visible, even when the navigation is open. Also, you need to think about what your navigation does on mobile devices and tablets and how to best integrate this with your drop downs. Mashable.com serves up a different navigation for it’s tablet users, for example, simplifying the menu, so they put it in a side drawer. On the higher ed sites we develop here at Beacon, we need to provide a consistent navigation for users on every type of device, so we might use a similar drawer on both mobile and desktop, but just change the navigation to stack taller on smaller devices and open and close subsections. This also can allow us to integrate deeper navigational tiers in the main nav on mobile devices so we can keep the content area cleaner and simpler.

This solution can be elegant and it even translates very well to touch devices that do not have the ability to open menus on-hover. This keeps the experience more consistent through all the screen sizes by utilizing an on-click drawer.

Ultimately decisions like these need to be made on a case by case basis.

16 11, 2012

GIF wins Oxford’s ‘Word of the Year’

By | 2016-11-23T10:52:04+00:00 November 16th, 2012|Categories: Creative Design|Tags: , , , |

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

9 07, 2012

On Hover Alternatives for Touch Devices

By | 2016-05-31T16:50:39+00:00 July 9th, 2012|Categories: Web Development, Creative Design|

Even though touch screen devices make up only a small fraction of users that visit your site, the number of these devices hitting your site is only going to increase. This doesn’t just include mobile devices, but also tablets that are being served a full site version. Your site should take this into account and any mouse hover effects need to be rethought and accommodated by some other means.

Designers are trying to come up with clever ways to deal with this issue. But sometimes the simplest answer is the right one. Especially in this case, where the user is expected to know how to use the site, it’s best to keep things clear and intuitive and not throw them any type of interaction with the site that is outside of the norm.

The simplest ways to deal with hover actions on a site are to replace them with:

Direct Action This removes the content from the hover and instead places it directly on the page itself. This makes sense for some things and not others, such as small bits of info or tooltips. This content can be integrated in the page itself as long as it doesn’t make the page awkward and cluttered but maintains and elegant usability.

On Tap Menus This is a quick and easy fix as long as the content of the hover menu makes sense to be presented to users with a tap and it doesn’t interfere with the use of the site.

Separate Pages This is a better solution for hovers that would present the user with extensive amounts of extra content. The content may be so much that it warrants it’s own separate page.

 

So this seems like a Sm, Med, Lg approach where how you serve up the hover content depends on the amount of the content, but the way in which the user will expect to use the site needs to be factored in as well so that usability is not compromised.

No matter which solutions are used, it’s important to remember throughout the design process that the devices that are being used to browse the web are becoming more and more varied and even though we don’t have to eliminate hover completely, we do have to accomodate devices that don’t allow this action.

6 03, 2012

Free Social Media Vector Icon Set (including pinterest and google plus!)

By | 2016-11-21T17:21:13+00:00 March 6th, 2012|Categories: Creative Design|Tags: , , , , , , , , , , |

First I would like to say I am a Web Developer here at Beacon so Design is not my specialty. However, I’ve gradually been getting annoyed by the round corners that are on most social icons. I think there is always the ‘too much’ factor and for me I’ve been given too much round icons. So the only thing that looks fresh and appealing to me anymore is square. I’ve looked at other free icon sets out there and still have yet to find a basic and simple square set. So I decided to give it a shot :).

All these icons are vectors I created within Adobe Fireworks CS4. For most of these I used the method mentioned in this post (http://trentrichardson.com/2009/04/11/convert-bitmaps-to-vectors-in-fireworks/) and others I copied the company provided vector into fireworks and modified from there. Feel free to download and do what you’d like with them. I have them all within one file for ease of creating/posting but again each is its own vector so you can copy it into another document or slice them out from the file.

Download Here

This Vector set includes:

  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
  • WordPress
  • Google +1
  • RSS
  • SlideShare
  • Goodreads
  • GitHub
  • Forrst
  • Amazon
  • Blogger
  • YouTube
  • Dribbble
  • Skype
  • Vimeo
  • Delicious
  • Technorati
  • Last.fm
  • StumbleUpon
  • Yahoo!
  • MySpace
  • Foursquare
  • Flickr
  • Tumblr
  • Meetup
7 02, 2012

Design Freebie: Photoshop Tessellation Patterns

By | 2016-05-27T09:42:01+00:00 February 7th, 2012|Categories: Creative Design|Tags: , |

While working on a site design recently I played with creating some tessellation patterns (I’m pretty sure I had been looking at M.C. Escher that morning).  I never did use these graphics for the site design I was working on, but I thought I would colorize them and create some seamless Photoshop pattern files to provide as a download. Enjoy!

Download Tessel.pat.zip

13 10, 2011

The Redesign Bug

By | 2016-11-22T18:07:35+00:00 October 13th, 2011|Categories: Web Development, Creative Design|Tags: , , , , , , , |

We recently launched the Beacon site with a new design which included a handful of jQuery animation, many of which had replaced the the previous design’s Flash-intensive content. We have recently come across an issue with the jQuery library with some builds of IE7 and IE8 that resulted in an extensive trail of debugging. We concluded that it was a browser issue (even in different OS environments) that was only fixed by re-installing IE. Here I will outline the issue and the debug trail–and hopefully maybe even think up some potential fixes that weren’t explored when testing was originally performed.

The Issue

In IE7 and IE8 we found that refreshing the homepage would crash IE and sometimes handle restoring the tab, other times not.  Microsoft has acknowledged this error in an KB article.

Error Screenshots

Initial view of most common error displayed.

Error message that would periodically show right before the tab recovers.

Details of error.

Advanced error detail screen.

When tab is not recovered, this screen is shown. Had to repeatedly refresh until this error occurs.

Just-In-Time Debugger error found from a different machine.

The Debug Trail

  • Initial replication of issue in IE 8.0.6012 on one of the test machines using a Windows XP environment.
  • Attempted browser-configuration changes that might’ve caused issues including:
    • Privacy Settings
    • Security Settings
    • PrivateBrowsing
    • Add-Ons disabled
    • Just-In-Time Debugging (picked up from a slightly different error that was sent to me as a screenshot from Mark Dirks — last one on right shown above) Unfortunately not of these seemed to be the culprit.
  • Disabled JavaScript in IE altogether–which of course fixes it but not what we we’re aiming for. This confirms it is a JavaScript/jQuery related issue
  • Attempted using different versions from currently used (1.6.1) to most recently published version from jQuery site (1.6.4) – tried both compressed/uncompressed versions without any success.
  • Checked a  changelog of jQuery since version 1.6.1 onward for IE7/8 errors. *Anything related to these browsers I had checked out scripts for any instances of (CSS background-image in jQuery and other function calls)
  • One Google search led me to a site that reported changing the jQuery file name had corrected their similar mshtml.dll error—-not the case here)
  • Double checked the in-line JavaScript as well as .JS file functions dependent on the jQuery library contained no redirects or any instance of the window.location method Since the IE8 error that comes up sometimes on the test machine says the browser attempted to load more than twice) – the only instance of this I found is a comparison checking if ‘#beacon-video’ is in the URL and if so, it runs a function to scroll the Beacon video into view and sets the tabs display(css) values. The window.location value is never assigned anywhere.
  • Checked that there weren’t multiple instances of window.onload or jQuery(document).ready()
  • Ran the jQuery library file through a beautifier to get a better look at the pin-pointed trouble spot you found and checked for any obvious issues. Justin Klingman found that in the compressed library he could comment out the last half of the code which removed the crash so before ‘beautifying’ the code I had marked this position with a comment and looked in the region after the code was cleaned up.
  • Removed all other scripts from the page to see if those dependencies may have had an impact on the crash, but removing them all (including the JavaScript function calls in the body,) except for the jQuery Library. No difference, same crashing effect.
  • The only change that did successfully fixed the crashing tab to load was removing jQuery from the page, however, when the content of another root level page (the SEM pages) into the root default document, that loads/refreshes fine without crashing. The only difference between interior/homepage in terms of JavaScript is the presence of the homeScripts.js file and the inline function calls on the homepage. After further testing this, removing only homeScripts.js still crashed the tab on the homepage (unless jQuery was also removed) — All internal pages use the same copy of the jQuery Library and they don’t crash, so the exact source of what’s crashing the page/tab is still not clear to me.
Load More Posts