Archive for the ‘Web Development’ Category
Balancing Creative and Technology, Innovation and Experience
Today I was inspired by a recent article on Forbes online…called “Are You Making the Right Connections?”. It got me thinking about how we strategize internally at LB and some of the things we discuss on a regular basis about ensuring we remain creative and inspired so that we deliver amazing experiences for our clients.
Holly Green is the contributing author and I found her angle interesting: “What do Velcro, barbed wire, and chainsaws have in common? They were all patterned after structures found in nature.”
I would also argue these ideas were developed out of constraints and the need to solve a problem. Looking at something familiar and applying in a different way.
Here are her three great examples of innovation inspired by nature:
1. “Velcro was invented in 1941 by Swiss engineer Georges de Mestral. After returning home from a hunting trip, he noticed a large amount of cockleburs stuck to his clothes and his dog’s fur. Out of curiosity, he stuck a few under a microscope and saw that each bur consisted of hundreds of little hooks that caught on anything with a loop, such as clothing or animal fur. He surmised that if he could duplicate the hooks and loops with other materials, he could bind them together in a similar fashion.”
2. “When ranchers first began raising cattle on the wide-open plains, they used the Osage orange as fencing material. But the thorny bush took a lot of time and effort to transplant and grow. Eventually, someone hit on the idea of fashioning wire fences patterned after the Osage’s sharp thorns. This innovation made it affordable to fence vast areas of land, and led to the practice of animal husbandry on a much larger scale.”
3. “Nature also provided the inspiration for the modern chainsaw. In 1946, a man chopping wood in Oregon noticed several timber beetle larvae chewing through the logs around him. A short while later, he developed a chain with interlocking links that mimicked the chewing action of their teeth. This led to the development of the first chainsaw that could cut with, or against, the grain of the wood.”
As Green points out, “Original ideas come from recognizing new connections between familiar things and transforming them into something new. So the next time you see a pattern — whether it comes from a beetle grub chewing through a log, or the pile of junk mail sitting on your countertop — pause for a moment and ask yourself, “How can I relate this to something I already know well?” You’ll be amazed at what you can come up with!
We believe in balancing innovation and experience as we embark on this journey with our clients. We are often inspired by physical offline objects that might lead to design inspiration for an interactive engagement and ultimately create an amazing user experience in the online world. We like to believe the greatest creativity sometimes comes from constraints that are bookended with limitless possibility.
Look around you. You never know what might become your muse for creative inspiration.
Photo courtesy of swurl.com.au
The Desire to Inspire
Inspiration doesn’t always come easy. In the midst of our personal lives, professional pressures and our own expectations for ourselves, there come times when we all feel overwhelmed and as if that spark of creativity is short-circuiting. But all is not lost. Sometimes the best thing to do to help your work is to stop working.
Now don’t necessarily turn off your brain, but instead, find that thing that you do or that place that you go that clears your thoughts and gives you a new perspective. Everyone has their own way of doing this, but sometimes you can find what works for you in looking at what others do. This week I examined some of the different methods out there for getting inspired, including what some of our own LB team members do when their brain needs a breather.
Again, there are a vast variety of ways that people get inspired. Some involve “getting away from it all” in a quest for solitude while others focus on surrounding oneself with more people of which to feed off. It’s all about what works best for you.
LB designer Justin Miller says that for him, “it’s all about getting away from the computer and getting outdoors in the fresh air.” He achieves this by simply going outside and taking his dog for a walk around the neighborhood or jumping on his bike and cruising the streets while taking in the scenery. Getting design off of his mind leaves room for ideas to enter his head that have the potential to lead to new designs later. There can be times when the issue with your work isn’t doing too little, but rather doing too much.
Justin isn’t the only one who finds the outdoors to be stimulating. Others have similar muses like the ocean or the sunset or restart their brain by doing outdoor activities such as running or driving. Surrounding yourself in an environment that starkly contrasts with your usual workspace can put your mind in a different place that allows for new thought and inspiration. Physically taking yourself “out of the box” can lead to the kind of out-of-the-box thinking that inspirational ideas are made of.
For LB developer Chad Davis, music does the trick when his creativity needs a kick-start. “It can be live music or playing music or even just listening to music on my headphones,” says Chad. One of the great things about music is its power to transform a situation and have you look at your environment differently. Even better, if you aren’t in the position to leave your desk, music creates an escape that involves no physical movement (but feel free to dance a little). Also, it’s up to you which tunes you choose to set your desired mood.
Inundating yourself in the creative work of others can foster your own creativity and inspiration. Looking at art that already exists helps you build on what is already out there; it’s like a jumping point. Consider the fact that those artists probably ran into walls during their creative process too, but they got through it and so will you.
As for me, I like to surround myself with people and just watch. Observing others can be invigorating and reminds me that there are so many other ways of doing things. We all have the tendency to get lost in our own lives and forget that insight can be found by examining the lives of different people. People watching can happen just about anywhere that there’s… well, people. Malls, airports, parks and concerts are all great places to see strangers in their element. Inspiration often happens when you take some time to look at the world through the eyes of someone else.
These are just a few ways people find inspiration, and maybe one of these could work for you, too. Just remember that when you run into a wall, don’t give up. It’s important to make time to let inspiration develop naturally by doing what it is that frees your mind from the stresses of work and gives you time to think.
Find what takes you there and get inspired.
By Savannah Harper
Smashing Magazine Web Design Challenge
Justin on Justin Discount Boots
Smashing Magazine recently issued a challenge in which we were excited to participate— they asked their readers to justify their design approach. Seems easy enough, but in reality, understanding your choices and articulating those reasons to clients is a challenge that we all face. As stated in the challenge, “being a great designer is not enough. You can produce outstanding work and be the envy of your peers and yet struggle to convince clients of your approach. The reason is that clients do not understand design the way you or your colleagues do. Therefore, you need to be able to articulate what makes your design right.”
Design can be in the eyes of the beholder, but a good approach can be the one thing that serves as a tipping point when trying to develop a concept for a client and subsequently convincing them it is the best approach.
At Lifeblue we were excited about this challenge and the possibility to discuss our approach to a recent client engagement— Justin Discount Boots. Oddly enough, our designer’s name is also Justin. What are the odds? So here’s Justin on Justin Discount Boots.
While Justin is all too familiar with the grueling peer critiques of formal design classes and must often present his work to clients for feedback, his education and professional experience have made it to where many of his design decisions are rather subconscious; because of his training and experience, he believes his instinct knows what would look good and what would work. But as was foretold in the challenge, effective designers must be able to not only understand the “why” of their designs, but they must possess the ability to explain it to others who didn’t spend years cultivating this skill. So last week, we took another look at Justin’s latest design creation, the website for Justin Discount Boots, and asked him, “why?” The following details his defense.
Layout:
The client had predetermined the elements that were to be included on the homepage, but it was up to Justin to decide how those elements were to be placed. He first evaluated the importance of each element, determining which were more relevant in aiding the shopping experience (the main function of the site) and those that served as a call to action and encouraged consumer engagement, and positioned these items with more precedence above the fold to receive more user attention.
The client requested an animated marquee that showcased images and information on the company’s selection that Justin positioned on the top left of the page. To the right of this, he chose to present the company’s “Exclusive Custom Boot” option, strategically banking on the fact that the animation to the left would demand attention in itself, and the reader’s eye would then instinctively read to the right and acknowledge this special feature. This feature serves as one of the client’s more unique points of difference, and Justin wanted to make sure that his design did it justice.
His decisions on layout support the selling function of the site as well as other goals Justin Discount Boots hopes to achieve through it, like customer involvement and the facilitation of a two-way dialogue with their consumers. The user-based approach to this site is reflected in Justin’s decision to place common functional features like the search bar and the navigation in their more expected spots closer to the top of the page. So even at a glance, users receive the most important information in a comprehensive and organized manner provided by Justin’s layout.
Grid:
Design decisions related to the grid were made based on the concern of making a site with a good amount of information still appear clean, well-spaced and uncluttered. Justin felt that a 10-pixel padding and 20-pixel margins effectively display the page’s content in an appropriate manner that provides proper space to distinguish separate page elements from each other, but also avoids appearing cluttered without wasting space.
Color:
The colors used throughout the website were strategically chosen to induce the emotions and attitudes tied to western culture and even more specifically, the client’s particular part of Texas, according to Justin. To provide pleasing aesthetics and give a cohesive feel to the site, Justin pulled color from the browns of certain product images and the red from the company’s logo. These colors continue to reinforce the western appeal of the site while impressing the elicited emotions on the company itself and its products.
The textures chosen follow suit with this theme and provide a rugged demeanor that appeals to the men in the client’s user target. The slightly contrasting colors and textures towards the bottom of the page are, as Justin explains, to give the site a polished, modern feel that identifies it as an up-to-date website design despite its vintage look.
Type:
Justin is well versed in typography and his font choices were definitely intentional. The use of slab-serif carries on with the overarching western idea for the site without coming off as too stylistic and cliché. This large and bolded font commands attention in the content where he felt was necessary in regard to identifying functions and intriguing the user.
This type was contrasted and complimented with the use of a simple san-serif for supplemental information within the content. All caps were often used to provide consistent form for titles and short lines of content so the blocked text would appear clean and easy to read at a glance. Decisions made on kerning were based on proper frame fitting and crisp alignment, and Justin’s choices for line height are primarily focused on providing clear readability for the user.
Imagery:
Product images for the site were chosen by the client, but the real challenge Justin had in regards to imagery lied in selecting the encompassing homepage background image, which would play a large part in setting the general mood. The client felt strongly about selecting an image that captured the look and feel of their location in North Central Texas. Several available photos were evaluated on their ability to convey this image.
The scenic image used in the final design is one that both the client and Justin agree successfully captures the preferred mood and general feel for the site and effectively portrays the personality of the client company. It’s geographically representative, lighthearted and genuine, but not distracting.
Styling:
Styling of the site’s screen elements was executed in attempt to match the western-centered design while still appearing clean and comprehensible. Justin achieved this in using some subtle textures but with extreme focus on keeping features like the search bar, the navigation and in-content buttons simple, clean and above all, functional and obvious to the user. Justin’s concern with styling focused on walking the thin line of reinforcing the western theme while taking special care to not have “too much going on.”
He sprinkled in flair with elements like the aged tag for the website login and the seemingly sewn-on leather patch that houses the option to subscribe to the client’s newsletter.
Why This Project?
We are very proud of the work that Justin did with Justin Discount Boots, but we also know “no good thing is ever perfect”. We would love to get your thoughts and feedback on the site and our design approach. Let us know what you think.
http://www.smashingmagazine.com/2011/09/21/are-you-ready-for-a-web-design-challenge/
Begin With The End In Mind - Designing For The Future

Are we preparing for the next generation of web design and development? Are we developing for the future and keeping the end in mind?
As the move to mobile becomes inevitable, it has become clear to marketers, designers and developers alike that as an information medium, mobile devices have made it to mainstream. According to an article by Greg Sterling, “by 2015, more U.S. Internet users will access the Internet through mobile devices than through PCs or other wireline devices” (Forecast: More US Mobile Web Users Than PC By 2015).
With online capabilities, increasing speeds and millions of users, the mobile platform can no longer be ignored as an integral part of interactive communications and marketing. With the added responsibility of developing a mobile experience that compliments all other communications, we have also had to take into account the quirks and special considerations that come with designing for mobile devices.
Earlier this year Lyndon Cerejo published the blog A User-Centered Approach to Web Design for Mobile Devices on Smashing Magazine’s website that provides an outline for a practical approach to managing mobile, and we think he’s got the right idea.
Cerejo first points out that not everyone needs a mobile website, and that you first need to assess your current situation.
“True, there will be 91.4 million mobile Internet users in the US by the end of this year, but how many of them are in your target audience?” Good question and definitely one you should be asking yourself. There’s a possibility that your website is not one that would necessarily benefit from a full redesign for mobile. Check out available analytics and see how your site is being used and how it is accessed. Consider your audience/users and consider if a mobile site would add any value to their experience.
In another useful article on mobile web design, 10 Key Considerations for Your Mobile Web Design Strategy, author Brian Casel encourages designers to always create with consideration to business objectives and to refer to available information and data from past efforts before moving forward.
Cerejo’s next point seems like it should be obvious, but can often be forgotten: “user-centered mobile design starts with the user.” Classify who your users are and then identify the needs of each kind of user you cater to with your site. Determine if they are accessing your site via mobile devices, how they are using it, what they find important and irritating about using it and what devices they are using. It’s crucial to take everything you find from this evaluation and apply it to your mobile model.
Next Cerejo tells us to figure out what kind of information or services your mobile site should offer. Find out which features are the most important to include with regards to business goals and the added value perceived by the user (and if there even is any).
Once the function of a mobile site has been determined, it’s time to design the thing. But a mobile site isn’t just a desktop website accessed and used on a phone or tablet— it’s a whole different ballgame when it comes to its design and has certain considerations to take into account.
This doesn’t just mean render your site for a mobile device…usability is different and design should take unique usability elements into consideration. Text should be easy to read, navigation should be simple and choices streamlined. And always keep in mind that in many cases mobile navigation is facilitated by touch.
“Prioritize content… be succinct,” says Cerejo. Minimize the input required from users and provide useful shortcut keys. Give the option to stay logged in since mobile devices are more personal. Design your mobile site to remain consistent across channels, both in continuity and user experience. Integrate your mobile site to work with your existing site— mobile should reinforce the other elements of your communications, after all.
“Prototype, review and refine,” advises Cerejo. Create your mobile site, evaluate its performance and the response from users and continue to further optimize the site as a useful and valuable service for your users.
Mobile web design introduces a new way of thinking about how we present our content, but it also introduces a new way to connect with our users. While it does have its special considerations, it presents new possibilities in serving consumers and reaching new ones. As web developers and designers it is our duty to ensure the online experiences we create are done so with the end in mind. Using tools and techniques that will evolve with this new evolution is critical. Ensure what you develop today can address the current mobile needs but that it also has the flexibility and robustness to evolve with the ever-changing mobile landscape.
Seize the opportunity to make mobile work for you.
Photo courtesy of petitinvention.wordpress.com
Visual Goes Virtual
For centuries, the cornerstones of good visual design have been focused on its ability to draw attention, provide a pleasing appearance and lead the eye to the metaphorical water from which we want the viewer to drink in our information.
And during these ancient times, the interaction between the design and the audience could hardly be described as an “interaction,” as the audience played only as passive observers whose most active duties in the exchange were giving attention, reading copy and processing the information fed to them.
The Interactive Age has forever changed the relationship between a design and its audience. No longer simply observers of design, the audience is now referred to as “users”— they use the design.
They call the shots as to whether they defer their interest elsewhere or implore the design for more information.
This newly established democracy of information has justly forced visual design to cater completely to the audience, and rightfully so. The accountability created by this movement has forced us as designers to go beyond how we want our content presented and strive to deliver our information as the user would have it. Visual has gone virtual. And to become viral, you must view all things from the other side.
In a recent article on Smashing Magazine’s website by Jeff Gothelf entitled Interaction Design Tactics for Visual Designers, Gothelf provides us with a useful outline of five key tactics for understanding how to effectively design visually for interactive media.
The first point is hardly a surprise: know thy audience. It’s the first step of any successful design, but Gothelf encourages designers to go further and actually talk to the target. Find out who they are and how they think and relate this information directly back to your design.
“The most important thing to understand when designing an online experience is your audience. Understanding who they are, what they do for a living, how old they are, how they work, what they know about the Web, how they use it, on what devices, where and so on provides invaluable insight into their pain points that you are out to solve.”
The next step is to “orient the user.” Make sure the user knows where he is on your site, knows how he got there and understands the options available to go further or find the information he would want to look for. This practice can provide insight to edits that may need to be made to the layout of the page, the placement of links, the organization of the navigation or the general usability of a site. There could be a big issue that can be solved with just one little button, and it’s better to find out this information sooner rather than later.
“Simple is better,” Gothelf says next. And an increasing amount of designers are adopting his same point of view. This belief can be supported in the success of the near-naked Google homepage that has trumped Yahoo! with its infamous clutter or by considering how Facebook has dominated the social networking world that MySpace once owned but lost when users grew tired and irritated with the overbearing customization, flash and audio.
Make sure that every element of a page serves a purpose in facilitating the interactive experience. While providing aesthetics will continue to be important in the design process, Gothelf wisely advises that “ensuring that the experience is usable first is critical.”
Next, “design for a dialogue.” This is a relatively new thing for visual designers to have to consider, but has become an unavoidable consideration nevertheless. The Interactive Age has given birth to the ability for media to facilitate two-way communication, and the democracy created by the Internet’s widespread availability has users practically demanding it.
Provide a convenient way for users to communicate when they have a comment, question or issue, but do not stop there; ensure that they is a way to respond to their feedback and communicate answers back to them. Sites that do not take the time to focus on improving this process only irritate users and can have them perceive the site (and possibly its affiliated company) as closed-off, uncaring or simply not as dynamic and therefore not as modern as others.
The fifth and final tactic Gothelf suggests is “understanding the before and after.” He states, “Visual design is beautiful. It’s also static. Interaction design builds a workflow from page to page and from state to state. As you design each page, consider what the user can do on this page and how the next step in the process fits into the workflow.”
So deliberate the way your design will react to users imputing information, selecting options or even just moving around the site. Make it first usable, but do not hesitate to incorporate classic design principles to make it look interesting and appealing as well.
The Internet has proven to skeptics that it is much more than a passing trend. And with new online products constantly being introduced into the market and with smartphones well on their way to becoming a universal accessory, the Interactive Age seems to be only in its early stages.
Embrace the opportunities created by this revolution in communications and design accordingly. Or even better, discover the next wave of change that will rock the boat and further advance the connection our designs can have with our users.
Centuries ago, who’d have thought it possible?
Photo courtesy of Virtual Staging Solutions blog.
QR Code: Trendy or Mainstream?
At the core, QR codes help convert a moment of consumer discovery into one of action. But, are people using them?
According to comScore, Inc in a recent study they performed, 14 million mobile users in the U.S., representing 6.2 percent of the total mobile audience, scanned a QR code on their mobile device. The study also analyzed the source and location of QR code scanning, finding that users are most likely to scan codes found in newspapers/magazines and on product packaging and do so while at home or in a store.
“QR codes demonstrate just one of the ways in which mobile marketing can effectively be integrated into existing media and marketing campaigns to help reach desired consumer segments,” said Mark Donovan, comScore senior vice president of mobile. “For marketers, understanding which consumer segments scan QR codes, the source and location of these scans, and the resulting information delivered, is crucial in developing and deploying campaigns that successfully utilize QR codes to further brand engagement.”
So ideally, QR codes are just another great tool to add to your marketing mix if appropriate for your target audience to bring an offline experience online.
Recently Mashable had a great blog post from Matthias Galica, CEO of ShareSquare and he outlined mistakes that can be avoided as you develop marketing strategies that include QR code elements. I agreed with his ideas and have provided a summary of his great information in our blog below:
“Consumer-facing QR codes are hitting mainstream America hard this summer. Despite the idea that a rising tide lifts all boats, many well-intentioned marketers are crippling their campaigns with simple mistakes.
This is a big reason why QR codes still get a bad rap from some folks. QR codes by themselves are fundamentally neither good nor bad, they’re just a means to an end: an offline-to-online delivery mechanism. It’s what’s beyond the code that usually determines whether the experience will delight or disappoint.Unfortunately, many early adopter marketers aren’t yet fully versed in the best practices or optimal use cases. It’s the adventurous consumer that suffers from the growing pains.
Mistake 1: Not Testing the Code
Common sense right? Until you’re able to read a QR code just by looking at it, you should always test the proofs with a variety of smartphones and scanning apps before you release a campaign.
Mistake 2: Getting Too Fancy With Text
If your goal is to get people to a mobile web experience, you should only ever encode a short URL. Don’t include any plain text, since many barcode scanners (even gold standards like ShopSavvy) won’t tease out the link. If you’re hoping a user will copy/paste on a mobile device, don’t bet on it.
Think of the QR code as a physical hyperlink that every barcode scanner should be able to immediately “click.” If your QR code requires the user to do much more than point and scan to arrive at the intended content, you’re probably doing it wrong.
Mistake 3: Serving up Non-Mobile Pages
Your QR code scans successfully but you’ve pointed the user to a standard desktop website, when 99.9% of QR codes are scanned by a mobile device. Fail.
Mistake 4: Putting QR Codes Where There’s No Data Signal
Where your ad will run is just as important as how you implement it.
Tesco’s recent QR code “grocery store” in a Korean subway worked great because those platforms have Wi-Fi. This is not the case in the U.S. Placing QR codes in locations without Internet access is a sure way to make your audience upset. Make sure you know where the ads will be, and if possible, run tests to make sure they are visible and will still work.
Mistake 5: Not Offering Enough Value
This point is highly subjective but also probably the most important. The proper mindset is to reward the user for scanning your QR code. This “reward,” however, will change depending on what you’re trying to promote.When coupled with a clearly articulated call-to-action near the QR code, we’ve found the most compelling campaigns tend to offer one or more of the following:
- Exclusive rich media, videos and photos
- Exclusive or time-sensitive access
- Free downloads or swag
- “Instant Win” contests
- Special offers, coupons or gifts
- “Secret” information
- Deep integration with social media to activate viral loops”
QR Codes are rapidly showing up everywhere, almost as a trend. I recently saw one embedded in a 15- second broadcast TV Spot…now let’s face it…it would take a savvy DVR user to stop the TV, get close enough with your mobile phone, capture the image and then click through to the page…FAIL.
As always, know your audience, know your medium and then use this as yet another great digital marketing tool, when and where appropriate. We look at it as another fun way to provide moments of delight for your end users.
And for the record…Our QR code in this blog goes to our Facebook page – we are shameless and we want you to “like” our page.


RSS Feed
Atom Feed




