Login

Main Site

EU Cookie Law and How It Affects the Web


EU Cookie Law and How It Affects the Web
Although most of the rumors and discussions are right now focusing on acts such as SOPA/PIPA, which expand the ability of law enforcement all over the world to fight online trafficking in counterfeit goods and copyrighted intellectual property, the web should for now be concerned with something else happening in the close, very close future. [...]

Advertise here with BSA

Posted in html, jQuery, Tips, Web Developers | Tagged | Leave a comment

Helping Your Clients Build an Effective Mobile Strategy

Advertise here with BSA


Helping Your Clients Build an Effective Mobile Strategy

It can be a challenge convincing clients to add new strategies to their existing Web presence.

In a perfect world, a client would simply say, "You’re the expert. You know what’s best. Do whatever needs to be done to make it happen!" But, unfortunately, it just doesn’t work like that.

Granted, we shouldn’t expect smart business managers to implement every new thing just because we tell them it’s a good idea. That wouldn’t be cost effective. But what if you know in your gut that the future of a client’s business may be at stake?

With Google executives saying things like "I believe that in 3 years desktop computers will be irrelevant…" and studies by Gartner stating that "Websites not formatted for the smaller screen will become a market barrier…" the Mobile Web is one of your gut instincts you want your clients to follow. And follow now!

In a state of desperate urgency, you may be tempted to place all diplomacy aside, and just tell it to them straight, perhaps even reminding them of those other times they put off your advice. I like to call this the "Timeline of Lost Opportunities" tactic.

You may very well have clients who respond to that type of pressure, but more likely, you will need to ease your clients into the idea of a full-on Mobile Web strategy.

Below is a plan that can help. I’ve even included graphics in each step since, as the old adage goes, "A picture is worth a thousand different ways of pleading with one’s clients." (Or something like that.)

Step 1: Show Them the Money

Show Them the Money

The Mobile Web is upon us, whether we like it or not. People are using mobile devices to search, shop and click through on ads at unprecedented rates. And rates that are only expected to grow. Presenting numbers like those shown above, as well as information on how their competitors may already be capitalizing on the Mobile Web, can get your clients listening.

Step 2: Show Them What Their Customers Expect

Mobile device users search the Internet as often as they use apps, so having a mobile-ready website is important. Mobile consumers know what they want from a website, and typically take action once they get there. It’s important that your clients understand that their customers have different expectations of what a mobile website does and provides compared to their existing website. Mobile conversion rates can be impressive, but only if a website caters to the expectations of this mobile audience.

Step 3: Outline Best Practices and Give Them Choices

Outline Best Practices, and Give Them Choices

Once you’ve shown your clients how people use mobile devices, it should become more apparent that they need a mobile version of their website. Mobile website solutions need not be complicated or expensive. Show your clients some options, such as responsive web design or going with a dedicated mobile-optimized version of the site (along with the pros and cons of each) while emphasizing mobile website best practices.

Step 4: Help Them Decide Whether They Need a Mobile App

Help Them Decide Whether They Need a Mobile App

Mobile app usage is impressive, but while people do spend a lot of time using mobile apps, most of that time is spent on games and social networking. So does your client really need a mobile app? You can help them decide by weighing the pros and cons of mobile app development, and presenting ways they can optimize their mobile website as an alternative.

Step 5: Explain the Marketplace and Mobile App Nuances

Explain the Marketplace and Mobile App Nuances

A good mobile app strategy should analyze current marketplace trends and weigh the pros and cons of developing native apps versus web apps. Be sure to explain how the mobile marketplace works as well as the difference between native and web apps. This can help your clients make more informed decisions.

Step 6: Show Them Options and Give Them Choices

Show Them Options, and Give Them Choices

Mobile app solutions vary in price and complexity. Outline options for your client that include using HTML5 or one of the many do-it-yourself mobile app tools available today. Make your recommendations based on the client’s present and future needs.

Step 7: Introduce Other Mobile Marketing Tactics

Introduce Other Mobile Marketing Tactics

The Mobile Web is more than just websites and apps. From QR codes to augmented reality, there are a host of tactics and tools you can implement to help your clients promote their business on the Mobile Web. Help your clients understand the importance of mobile-optimized landing pages. When they are marketing to a mobile audience, it is imperative that clients ultimately send potential customers to landing pages and other sources compatible with the customer’s mobile device.

The goal should be to educate your clients on the "hows" and "whys" of the Mobile Web and to help them understand their options. This approach can ultimately help them make informed decisions as they consider your recommendations.

This article is based on the book, The Bootstrapper’s Guide to the Mobile Web. The graphics used in this article are part of a sharable infographic available at TheBootstrappersGuide.com, where you’ll also find free mobile website, mobile app, and other mobile strategy worksheets.

Related Content

About the Author

Deltina Hay, author of The Bootstrapper’s Guide to the Mobile Web and The Social Media Survival Guide, is a web developer, publisher and small business owner. Hay presently teaches the graduate level Social Media Certificate course for Drury University. Her YouTube video series can be found at YouTube.com/deltinahay. Connect with her on Google Plus.

Posted in Mobile | Leave a comment

Atomicdust: explaining design process

A St. Louis design group announced a special gathering at a local design studio for a program entitled, “Educational Night: The Business of Design.” The evening’s program was hosted by a local design studio that is making leaps and bounds in the local and national scene, so it didn’t take long for the reservations to pour in until there were no more spaces to be had.

The studio, Atomicdust, certainly seemed to have the inside information on success, having been recognized by the One Show, Step, Print, and Create Magazine as well as local and regional Addy awards, so getting some inside information was highly coveted by members of the design group.

The notice read: “Jesse McGowan of Atomicdust is going to talk about the business of design, focusing on what we all went to school for vs. what is usually required of designers in the real world, especially those who freelance or start their own companies. He will touch on pricing strategy, client management and then talk about a couple resources that are out there for small firms/freelancers.”

Obviously, no one could turn such information down. The promise of free beer, wine, and soda certainly didn’t hurt, either.

Mr. McGowan, the Account Director, is a pleasant and jovial guy who started his talk by admitting to being a “graphic designer who learned the business side of design.” One of my big disappointments in our hfield is that most designers, being right-brainers, don’t care to learn being businesspeople, so I immediately perked up to hear what he had to say.


On learning business…

Jesse spoke of his start as a designer and being forced through increasing responsibility to the studio of having to learn to deal with clients. This is not just talking to people but knowing the nuances of negotiations, trouble-shooting, explanations, and everything else involved in running projects as the client contact. Jesse adds:

“My role was moving from that of designer to account executive, strategist, new business developer, manager and HR. While I felt more creative than ever, I was forced to learn an entirely new set of skills that I’d never been trained on before. It was a terrifyingly formative transition that has left me forever hungry for new ways to continue to grow.”

More on Jesse: After nearly nine years with Atomicdust, Jesse has extensive experience in both the development and management of a variety of media. As Director of Account Services, he prides himself on an almost obsessive attention to detail and keen instinct for guiding project teams. Jesse always brings a unique perspective to the table and encourages Atomicdust’s internal team and clients alike to look at projects from new angles in order to produce standout results. “Jesse is”, he writes, “a driving force behind many projects at Atomicdust and behind the wheel of a Honda Civic.” I told you he was jovial!

Mike Spakowski, Principle/Creative Director at Atomicdust and wrangler of a talented crew, relates about having Jesse handling client’s accounts:

“As a firm grows, the role of a principal changes from design focused to design and business focused. It can be difficult to focus on both. People get involved in this industry because they are passionate about design and creativity. But a person goes from being a producer of design to running a design producing business.”

A little more about Mike: More than eleven years after founding Atomicdust, Mike is actively involved in day-to-day design strategy, art direction and studio management. As Creative Director, his drive for design excellence, collaborative attitude and even-keeled temperament set the tone at Atomicdust, which is obviously a fun and energetic workplace.

It is rare that a creative can step up and handle the left-brain business that comes with being alert and savvy when dealing with clients. Both Jesse and Mike seem to have the personalities to be extroverted enough to enjoy dealing with people. That seems to be what separates creatives who can handle the added responsibility of dealing with account service as opposed to most creatives, who are introverts, and deal better with people over the internet. I had to ask Jesse and Mike if they have any opinion as to why they were more comfortable dealing with clients and if they have any advice for those who are not comfortable in client negotiations. The answers were surprising.

“We’re problem solvers,” says Jesse. “I get more excited about helping a client fix something they’ve been struggling with for years than I get nervous about talking to them. If you understand the significance of your role, you start to realize that clients are the ones who should respectful of your time and nervous about wasting it.”

“Starting off eleven years ago, I was not always comfortable around clients,” adds Mike. “For me, it became easier as my experience grew. You become confident in your ability to solve their problems with creativity. Your perspectives on those problems become less and less wavering. A designer becomes comfortable around clients as a result of being confident in your abilities.”

The rest of the Atomicdust staff. From top left to right: Mike Spakowski; Principle/Creative Director, James Dixson; Partner/New Business, Taylor Dixson; Partner/Motion Graphics, Jesse McGowan; Account Director, Kevin Burford; Business Developer, Katie Werges; Senior Designer, Erika Cruse; Account Manager, Jeremy Cox; Motion Graphics Designer, Danielle Hohmeier; Online Account Manager, Tim Gieseking; Developer, Jason Stoff; Designer, Rich Heend; Senior Copywriter, Mike Roberts; Traffic/Project Manager, Beth Porter; Designer, Tara Nesbitt; Online Marketing Intern, Annie McCance; Developer, Jordan Jenkel; Account Executive Intern.


Explaining the process…

One thing Jesse covered is perhaps the most important thing in dealing with clients and the most misunderstood. It seems obvious to me but then again, I’ve held the role of designer, art director, creative director, studio manager, account manager, and wearer-of-many-hats. Dealing with people is hard enough on a daily basis as you drive, shop, and use a public laundromat, so having to maintain a working relationship, bound by a contract, many thousands of dollars, and a process that few, if any, clients understand, is a unique challenge.

The process of a project would seem clear to most designers. The client wants this and to get it, we need to first do that, then that, then the other thing, and finally some last minute this and that and the whole project comes to an end. There were days when a client contracted with a designer or design firm and was presented with a final product in a meeting. Done…pay me!

Lately, that’s not the case. Tough economics, competition between creatives and studios, and the cost of a web site with certain collateral projects has clients worried…not that they weren’t worried before but now it has become imperative to waylay the client’s fears with a lot of “hand-holding,” explaining what will happen when, how, and why. There’s nothing wrong with that. In fact, it makes perfect sense. How often do designers complain about a project going awry because a client injects a want at the wrong time or mushrooms the scope of the project? By explaining the process, in detail at the beginning, both parties should understand the milestones and what can and should be expected by BOTH the client and the creative team. As someone at the meeting interjected, “wouldn’t you want a doctor to tell you why and how he/she was going to operate on you?”

The open space of the converted factory, they now manufacture winning design.

“Having a defined process – and not the type that we brand, hype up and never use – that is engrained in our culture, we not only understand internally exactly how every project will go, but we have the ability to establish the same expectations with our clients,” explains Jesse. “When buying creative services, there is much trepidation around working with free spirited artists. This process removes much of the variability that keep clients awake at night.”

By simply stating, “This is what we do, and this is what it typically costs, is this a good fit?” it eliminates a lot of the needless bartering and wasted time crafting custom proposals for clients. By defining what we do for brands, and what we don’t do, it’s become easier for us determine cost,” Mike relates on how this has impacted the studio both in the bottom line of financial considerations such as profit margins and people hours on a project but also on repeat clients as opposed to one-time clients.

Mike concludes, “Design is a valuable services to clients, and conversations about cost shouldn’t be awkward and embarrassing. They also should happen as early as possible.”


“Enigmatic wizardry?”

Naturally, there are designers who believe that a client should just trust the designer to deliver the best possible product without explaining the process or any interference. As one attendee brought up during the question and answer portion of the evening, he thought that design should be almost kept secret from the client with what he termed, “enigmatic wizardry.”

“Dumbledork,” as he will now be known to the rest of the design group for this profound statement, is undoubtedly one of the introverts referred to in the beginning of this article. Probably more so now that he has been made a public laughing stock. It’s another bit of proof that not every creative is able to deal with clients as does Mr. McGowan and Mr. Spakowski.

The idea of keeping our “magical” designing secret is ridiculous, if it was really ever a practice. Transparency is naturally the best way to run a project, from both the creative and client sides, as well as raising trust from both parties and assuring future work and recommendations of the studio’s professional abilities.

The front of Atomicdust. Transparent windows and work process.

Jesse adds, “the design profession is shrouded in enough mystery already. We try to operate our business as transparently as possible, with our clients, staff, and peers. We can all learn a lot from each other, and closing yourself off from the world will date you more than protect you. Share what you know, inspire others, and aim to push our profession forward.”


Commoditization

Jesse spoke on an issue called “commoditization.” He explains the meaning:

“Process allows designers and agencies to streamline their internal efforts, and helps clients have a better understanding of what they’re buying. But on a more broad scale, it allows us to fight the commoditization of our industry. Let’s be honest, designers are a dime a dozen in a client’s eyes. The market is so saturated that our clients are losing the ability to distinguish between us (designers), resulting in competition based on price rather than talent. Bottom line: they think that all designers are the same, so they hire the cheapest one possible.”

“Process represents a chance to stand out,” he continues. “It demonstrates that a designer understands what it takes for he/she to consistently do good work, and depending on the process employed, may allow them to produce more strategic, educated creative than their peers. Clients will notice the difference and usually pay for it, too.”


Final thoughts

“Ours is an industry that most of us are not truly prepared to enter”, states Jesse. “We may be schooled as designers. We may be passionate about our craft. But one day we will all wake up and find that we are under-prepared for what our day has in store. We will realize that the business of graphic design is just as much about relationships, people management, financial decisions, networking and selling as it is about designing. Many will spin their wheels and burn out. The smart designers will adapt and in all likelihood forge the next mold for smart, cutting edge agencies.”

Check out Atomicdust’s blog and sign up for their monthly newsletter. Follow them on Twitter and Facebook


Speider Schneider is a former member of The Usual Gang of Idiots at MAD Magazine and has designed products for Disney/Pixar, Warner Bros., Harley-Davidson, ESPN, Mattel, DC and Marvel Comics, Cartoon Network and Nickelodeon among other notable companies. Speider is a former member of the board for the Graphic Artists Guild, co-chair of the GAG Professional Practices Committee and a former board member of the Society of Illustrators. Follow him on Twitter @speider

Do you explain design process to your clients or do you subscribe to “enigmatic wizardry?” Has this article convinced you to try a different approach?



Apparel Attack! 4 e-Commerce WordPress Themes! – only $45!


Source


Posted in Business, Design Tips, web design | Tagged , , , | Leave a comment

Creating a Mobile Web Application with Meta Tags


Advancing trends for the mobile web are slowly blurring the line between Internet websites and native applications. Lately there have been many updates to mobile operating systems and web browsers with more capable rendering engines. This means we can work openly with webkit CSS3 effects and even many bits of jQuery code.

Featured Image - White iPhone 4S homescreen apps

However a lot of the customization for mobile web apps is done in the document header. Meta tags are slowly being recognized as the best way to push data out to many different mobile platforms. iOS has Mobile Safari and Android users are rendering on the Webkit or Gecko engines. But ideologies are simply not enough – and the fastest way to learn is by trying out some new code.

What Makes a Mobile Webapp?

If you write a typical HTML4/XHTML/HTML5 webpage it will render pretty well on mostly all the modern cell phones. However it will be displayed as a website where users can generally pinch and zoom into areas. This is perfectly acceptable for most instances, except for responsive websites and mobile web applications.

Additionally you need to offer your visitors a quick way to access your webapp. Mobile Safari is always an option – but what about launching from the homescreen? All of the App Store applications will launch from their home icon, and this is also possible inside a mobile web app. Although we can run through a few of the required tags first.

Device Viewport

Whether your layout is built flexible or hard-coded to a set width(ex: 320px for iPhone) does not ultimately matter. To generate a webapp view we need the meta viewport tag added in-between your website’s <head></head> section. This can setup any number of important options for how our webpage is rendered on a mobile screen.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

This example above should be perfect for any typical boilerplate application. It will set all the default views to 1.0 scale and the user cannot re-size any part of the site, although they can still scroll vertical and horizontal. Within the content attribute are many other values you can toy around with. The Mozilla dev team has written an article on the viewport tag with full explanations and a couple of examples.

Google Android and Apple iPhone 4S

If anything, it’s super important to set your width value the same as device-width. This will force the layout to adjust as your visitors may switch from portrait into landscape view. It’s also necessary if you’re running JavaScript which parses for the current window size.

Mobile Safari Tags

The Apple online documentation section has a piece for Safari mobile apps. This includes a reference to each of their proprietary meta tags and how they should be used on your website. But in truth there are really only 2 more aside from the viewport.

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

By setting the web-app-capable meta tag Safari can detect that your website is able to run as an application. So when users go to save your website onto their device it will launch without the URL bar or any other Safari trimmings.

Slide to Unlock iPhone screen

If you are familiar with iOS apps you’ll also recognize the top bar section of the device screen. By default this is setup with a white/gray gradient, but you may also choose between black and black-translucent. Neither of these values should affect your webapp in any major way other than the color scheme for the top toolbar.

iOS App Icons

There are two important pieces you can mimic in relation to a native iOS app. The first is a home screen icon, and the second is a featured launch png image. The code is very sensitive and you’ll need to use these exact values for rel and sizes. Although feel free to rename your image files anything(or even .jpg should work fine).

<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-startup-image" href="/splash-startup.png">

Although it isn’t stated outright the sizes variable only accepts these two values. 114px is for iPhone retina and 7px for iPad displays. As far as I know there is no new size value for iPad retina displays.

iOS app icons home screen

The startup splash image should be sized exactly 320×460 pixels. For some reason the Apple guidelines do not offer a retina version of this splash screen. I have tried setting sizes=”640×920″ and the whole splash image feature just stops working! So this attribute appears to be very touchy, and I’m hoping Apple will touch up some of these features soon.

Quirks with Internet Explorer

Internet Explorer has surprisingly been getting a lot better with web standards. The developers at Microsoft have been adapting with new Internet technologies both on desktop and with their mobile phones. Meta tags for setting the rendering engine are common – using the MS http-equiv value for example.

Windows Mobile Phone coded 'mango' preview banner

But a recent tag X-UA-Compatible had caught my attention. It’s useful for setting browser engines back to keep your current code backwards-compatible. This is usually the case the Internet Explorer, although in some cases you can reset an older IE to the latest version. That would be using this code below:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

There have been some validation issues when checking your code against an HTML/XHTML parser. I believe this tag is setup through Microsoft and has been slowly leaked throughout the mobile web. This is really a personal choice to work with or not. If you’d like to learn more check this MSDN Blog post regarding X-UA-Compat and pick up on the details of the syntax.

Other Important Tags

There are some other meta tags you do not need to include, but certainly wouldn’t hurt anything if you did. Unfortunately there are just so many standards it would be impossible to list all the options. But you may consider working with just a couple more tags.

<meta name="HandheldFriendly" content="true">

HandheldFriendly was originally created by Palm and BlackBerry devices for managing mobile websites. It is still somewhat useful although not exactly the highest market share among mobile devices. I’ve found a small blog post discussing this meta tag and the viewport content.

Samsung Galaxy Google Android icons

There is also mention of another tag called MobileOptimized. This was originally designed for mobile Internet Explorer and will be carried over for WMP. It’s also known as the meta layout tag from the Microsoft developer docs.

<meta name="MobileOptimized" content="width">

Note that “width” should be changed to whatever your natural display should be on Windows Mobile Phone. This can be tricky to setup, and it may be worthwhile to ignore this tag altogether. The suggested default is 240 pixels for tablet PC and mobile IE devices. But there are definitely other tags related to IE which serve a greater purpose.

Conclusion

I hope these tricky meta tags can be of use to any interested mobile web developers. iPhones and Android devices have changed the way we access the Internet and modern-era websites. And now webmasters are forced to adapt their layouts to suit a changing marketplace.

This is not an exhaustive list of mobile-based meta tags. But it does cover all of the big boys you’ll need in a typical webapp. This should get you started on the right path for mobile web dev, and you can even setup a blank HTML5 template with many of these meta tags initialized. If you have similar ideas or questions on the code please share with us in the post discussion area.

You might also like…

Working with Property Lists in Xcode 4.2 →
Getting Started Building iPhone Apps in Xcode 4.2 →
Creating Pixel-Perfect UI for iPhone Applications →
Tips for Wireframing a Usable Mobile App Interface →
Ultimate Collection of Printable Mobile Sketching Templates →
Showcase of Beautiful and Unique iPhone Apps →
30 Brilliant iOS Applications for Freelance Designers and Developers →



Posted in Mobile | Leave a comment

Maximize Energy, Boost Creativity, & Never Burnout Again

Advertise here with BSA


What if I told you that it is possible to work fewer hours per day, have more free time for fun and leisure, produce more work at a higher quality than ever before and never burn out? If you are anything like me then you would probably say that sounds like a nice infomercial – but you’re not buying. And I wouldn’t blame you because like many of you, I’ve always had a very industrial mindset when it comes to work. Meaning, if the demand is high then you roll up your sleeves and put in the extra time to get the job done. It doesn’t always leave you feeling rejuvenated and sometimes you have to miss out on a bit of fun, but that’s life. There’s no getting around the fact that work takes time and more work takes more time. Right? Wrong.

More Time Is Not The Answer

Here’s the problem with the “overtime” philosophy of work that so many of us subscribe to: Time is a finite resource. There are 24 hours in a day and not a minute more no matter who we are or what we do. So what happens when the demands of our work steadily increase until there is literally not enough time in the day? We’ve all been there. Some of us have lived there or still do and our response is usually something like this:

We get up earlier, drink more coffee, work through breaks and lunches, work evenings/weekends, and push away responsibilities outside of work so as to spend more time meeting our increasing demand. But since that’s stressful, we have a few drinks in the evening to help us relax and unwind. We eat junkfood for quick energy throughout the day and then overeat at night in response to our hunger and as an immediate source of comfort. Unfortunately for us, a poor diet combined with overeating and (of course) no time for exercise results in weight gain and drastic peaks and valleys of both energy and emotion. Alcohol, while immediately relaxing us because it is a short term narcotic (read: downer) is also a long term stimulant. As a result we sleep fitfully and wake up throughout the night or at least a few hours earlier than we need to. We try to fall back asleep but it doesn’t take well because our mind is now racing with anxiety over the day ahead. When we do get up we feel exhausted. That’s when we grab an extra cup of coffee, something sweet for a quick sugar buzz, and we start the cycle all over again. In short, we neglect everything but work and we run ourselves into the ground. The only reason we’re still on our feet is because we’ve overridden our body’s natural rest and renewal rhythms and replaced them with caffein, alcohol, and stress induced adrenaline.

Maximize Energy, Boost Creativity, & Never Burnout Again

The result of this pattern over time is that the quality of our work declines, our passion takes a nose dive, and we get less done over longer periods of work. While our workload may increase as a result of new clients the truth is that most of our “extra” work is simply work that has slipped passed deadline or consumed more of our time than it should have taken in the first place. Not to mention that since we are working non-stop the instances in our days, weeks, or even months in which we get to relax, hang out with friends, spend time with our family, or simply “be” are few and far between – if existent at all. Add to that, that this non-stop cycle of stress and work and band-aid solutions for short term gain have long term negative consequences on our health, relationships, creativity, and happiness.

So the obvious question if you’re in this situation (as I have been many times in the past) is: what can I do to turn things around?

We Need A Paradigm Shift

Enter: The Energy Project and CEO Tony Schwartz who gave an amazing talk at the 99% conference last year that changed everything for me. When I watched the video of his talk on their blog it hit me like a ton of bricks. His mind-blowing perspective on work was a much needed lifeline for a freelancer drowning in stress and deadlines. The scenario above was something he walks the audience through about midway through his talk but it was so right on it felt like he had hired a private detective to study my life. Needless to say, I took his talk to heart and this article is the result of it’s application.

Here are the key points but I highly recommend that you watch the video yourself:

ENERGY (not time) is our most valuable resource: Since time is a limited resource outside of our control, we must look for a resource INSIDE of us; one that we have more control over and one that can be renewed. Energy is that resource.

  • Energy can be EXPANDED: Unlike time, we can actively cultivate MORE energy than we currently have at our disposal.
  • Energy can be RENEWED: In addition to having more energy available to us at any given time, we can renew it when and how we choose. This means that we can maintain our newly gained energy levels through intermittent renewal so we are never caught running on empty again a.k.a. burnt out.
  • Energy can be MAXIMIZED: We can learn to manage our energy better than we currently do. This means that not only are we able to cultivate more energy and renew it throughout the day, but we can teach ourselves how best to use that energy ultimately resulting in more work accomplished, in less time, at a higher quality.

Maximize Energy, Boost Creativity, & Never Burnout Again

Energy can be defined as the capacity to do work. Practically speaking, that means that the more energy we have at our disposal the more capacity we have to accomplish work. So we find that, if we ignore our lack of time (since we have no control over it anyways) and concentrate on energy, the result will be better work, more free time, and the opportunity to lead a more balanced and healthy life.

Tony Schwartz describes four types of energy:

  • Physical Energy: Physical energy is the foundation upon which all of the others are built upon. It represents the quantity of energy we are able to cultivate. If you think of it as the base of an energy pyramid, you want it to be wide and strong so that your total energy capacity can reach its full potential.
  • Emotional Energy: Emotional energy represents the quality level at which we are able to perform. It turns out there is a way we feel when we are performing at our best. As Tony humorously points out, that feeling can be described as “how we feel when we are performing at our best”. His point is this – it is possible to cultivate the emotions that serve us best in the same way that we can actively improve our physical body.
  • Mental Energy: Mental energy represents our ability to focus. The most efficient way to get things done is by fully engaging in one thing at a time for extended periods of time.
  • Spiritual Energy: Spiritual energy, or the energy of the human spirit as Tony also puts it, is derived from serving a purpose that is bigger than our immediate self interests. Or in other words, believing that what we do with our life matters.

Next he exposes myths about the time dominated work paradigm and reveals truths about the energy based paradigm.

  • Myth #1: The best way to get more work done is to work more hours.
  • Truth #1: We are more productive when we build in intermittent renewal along the way. Physiologically human beings are not meant to operate in the same way as our technology (at high speeds for long periods of time) but rather to pulse or oscillate between rest and renewal in a rhythmic way.
  • Myth #2: One hour less of sleep will lead to one hour more of productivity.
  • Truth #2: Even small amounts of sleep depravation have a profound impact not just on our health, but also on our cognitive capacity and effectiveness. Sleep is the most important behavior in our life that we need to get right in order to perform at our best and it is often the first thing we neglect. Shockingly, if we go just four days in a row with five hours or less of sleep each night our mental capacity is about the same as if we were intoxicated.
  • Myth #3: It’s not the number of tasks we are capable of juggling simultaneously that determines how productive we are.
  • Truth #3: We are most efficient when we do one thing at a time, fully absorbed, sequentially. Multi-tasking is yet another behavior of our technology that human beings are simply not capable of performing with a high quality outcome. In fact, we use multi-tasking as a way to feel more productive (because we are involved in a lot of things at once) while the actual result is that we engage several things on a surface level while never deeply focusing on any one task. Additionally, multitasking is extremely detrimental to our limited ability to manage time. Each instance in which we break off of a task to briefly switch our attention elsewhere we increase the total time needed to complete that task by 25%.

Finally, we are left with this illustration:

Right now, under our current work paradigm which is dominated by a “time mentality” we think of our lives as a marathon. In this marathon the goal is to pace ourselves over long hours because as we all know – more time equals more work accomplished. This mentality has not served us well. What ends up happening is that with no end in sight and no rest along the way our initial pace – while reasonable to begin with – leads to eventual burnout, encourages destructive coping behaviors, and never (or at least very rarely) allows us to put our full undivided energy into any one thing.

Under our new energy based paradigm we need to begin seeing life as a series of sprints. A sprinter is able to look down the track and see the finish line clearly. They are able to fully engage at their highest levels of performance in each task set before them because they know that rest and renewal are within reach. The sprinter is powerful, confident, and in total control of their performance. We can be too.

Implementing A High Energy Lifestyle

Before we can put real life change into action we have to take a step back and look at what is really going on in our lives. For me, this meant getting brutally honest with myself about my current lifestyle and performance. I realized that I was out of shape physically, burnt out mentally, emotionally, and spiritually, and that all of these things were effectively ruining my ability to find a healthy work/life balance and to perform at my best. Maybe you’ve been there too? Maybe you’ve thought to yourself, “why is this so hard right now? I’ve done much more difficult tasks or projects in the past. This should be easy!” But it’s not. The reason it’s not easy is because whether or not we were aware of it, somewhere along the way our ability to bring our A-game to work slowly bled out of us in the endless grind of an over-time lifestyle. On top of everything else that realization can be demoralizing.

Maximize Energy, Boost Creativity, & Never Burnout Again

The good news is that not only is change possible, but an increased level of energy is achievable almost instantly. Above I mentioned thinking of the four types of energy as an energy pyramid in which physical energy is the base and all of the others are built on top of it so that the order from the bottom up is physical, emotional, mental, and then spiritual. When implementing a high energy lifestyle though, we need to apply ourselves to these forms of energy in the reverse order (spiritual to physical) as demonstrated below.

  • Connect to your deepest values: By identifying our deepest values we are able to align our life with those beliefs in a positive way. If we believe in what we are doing with our life then we can draw on an incredible energy resource known as purpose. Leading a life full of purpose is the quickest way to increase your energy.
  • Develop focus: By learning to focus deeply on one thing at a time we are able to get more done, at a higher level of quality, in less amount of time. This is the easiest step to explain and often the hardest action point to carry out. You may want to start by committing not to multi-task and develop specific work habits around that commitment.
  • Cultivate high quality emotions: Connecting to a deep and meaningful purpose as well as learning to focus on one thing at time should give us a lead-in to how we can cultivate high quality emotions. As Tony mentioned in the video and I stated above, we feel our best when we are operating at our best. Learn to recognize these emotions and build up responses to negativity that quickly bring you back to a high quality emotional state. The ability to do this is called resilience.
  • Re-define Fitness: Many of us have developed a misperception of fitness which can be defined as how good we are at pushing ourselves to our limits. The problem with that definition of fitness is that we do not take time to rest and renew our capacity. The result is our ability to push ourselves decreases over time until it becomes nearly impossible. More stress on an already depleted body does us no good and we quickly lack the motivation to persist. Re-learning what fitness really is means that we recognize the physiological reality that human beings are designed to pulse between the expenditure of energy and the renewal of energy. In fact, a better guage of fitness than how far and hard we can push ourselves is our ability to efficiently recover or renew energy before its next expenditure. In order to renew our physical energy most efficiently we must take much more than exertion into account. We need to first take back our time for rest and recognize that it is equally if not more important than the time we spend working. A good rule of thumb to begin with is a 15 minute break every 90 minutes of work and a minimum of 7 hours of sleep EVERY night. Diet and exercise also play a significant roll in our ability to renew physical energy. An honest look at what we consume and how physically active we are is very important. If you want to maximize your breaks for optimum energy renewal try incorporating renewal of all energy types into each break. An example might be that on a fifteen minute break you go for a short walk, listen to a song that puts a smile on your face, and remind yourself why it is you do what you do and how meaningful that underlying purpose is.

For me these simple steps have made a world of difference. At this point I’m in much better physical shape than I was a year ago, I sleep about 8 hours a night, wake up feeling ready to go and excited about work, I take weekends off, hang out with my friends more often and I get more done throughout the day than I used to in a day and a half – sometimes two days. I highly recommend that you check out Tony Schwartz’s book The Power of Full Engagement. If this post has been helpful to you then a more thorough exploration of this new energy based work paradigm will probably be right up your alley. I really hope you found this post helpful and if you have any thoughts, questions, or comments that you’d like me to address I’d love to see them in the commenting section below.

Maximize Energy, Boost Creativity, & Never Burnout Again

Sources

The Myths of the Overworked Creative

The Power of Full Engagement

The Energy Project

Bonus Resource

A few weeks ago I was delighted to stumble across this fantastic post in which John Cleese of Monty Python fame lays out his 5 step process for getting into a creative state.

Posted in Creativity, Tips | Tagged | Leave a comment

SASS vs. LESS

"Which CSS preprocessor language should I choose?" is a hot topic lately. I've been asked in person several times and an online debate has been popping up every few days it seems. It's nice that the conversation has largely turned from whether or not preprocessing is a good idea to which one language is best. Let's do this thing.

Really short answer: SASS

Slightly longer answer: SASS is better on a whole bunch of different fronts, but if you are already happy in LESS, that's cool, at least you are doing yourself a favor by preprocessing.

Much longer answer: Read on.

The Much Longer Answer

The Learning Curve with Ruby and Command Line and Whatever

The only learning curve is the syntax. You should use an app like CodeKit to watch and compile your authored files. You need to know jack squat about Ruby or the Command Line or whatever else. Maybe you should, but you don't have to, so it's not a factor here.

Winner: Nobody

Helping with CSS3

With either language, you can write your own mixins to help with vendor prefixes. No winner there. But you know how you don't go back and update the prefixes you use on all your projects? (You don't.) You also won't update your handcrafted mixins file. (Probably.) In SASS you can use Compass, and Compass will keep itself updated, and thus the prefix situation is handled for you. Yes you'll have to keep your local preprocessor software updated and compile/push once in a while, but that's trivial and thinking-free.

So what this comes down to is: SASS has Compass and LESS does not. But it goes deeper than that. The attempts at creating a real robust project like Compass for LESS haven't succeeded because the LESS language isn't robust enough to do it properly. More on that next.

Winner: SASS

Language Ability: Logic / Loops

LESS has an ability to do "guarded mixins." These are mixins that only take affect when a certain condition is true. Perhaps you want to set a background color based on the current text color in a module. If the text color is "pretty light" you'll probably want a dark background. If it's "pretty dark" you'll want a light background. So you have a single mixin broke into two parts with these guards that ensure that only one of them takes effect.

.set-bg-color (@text-color) when (lightness(@text-color) >= 50%) {
  background: black;
}
.set-bg-color (@text-color) when (lightness(@text-color) < 50%) {
  background: #ccc;
}

So then when you use it, you'll get the correct background:

.box-1 {
  color: #BADA55;
  .set-bg-color(#BADA55);
}

That is overly simplified, but you likely get the idea. You can do some fancy stuff with it. LESS can also do self-referencing recursion where a mixin can call itself with an updated value creating a loop.

.loop (@index) when (@index > 0) {
  .myclass {
    z-index: @index;
  }
  // Call itself
  .loopingClass(@index - 1);
}
// Stop loop
.loopingClass (0) {}

// Outputs stuff
.loopingClass (10);

But thats where the logic/looping abilities of LESS end. SASS has actual logical and looping operators in the language. if/then/else statements, for loops, while loops, and each loops. No tricks, just proper programming. While guarded mixins are a pretty cool, natural concept, language robustness goes to SASS. This language robustness is what makes Compass possible.

For example, Compass has a mixin called background. It's so robust, that you can pass just about whatever you want to that thing that it will output what you need. Images, gradients, and any combination of them comma-separated, and you'll get what you need (vendor prefixes and all).

This succinct and intelligible code:

.bam {
  @include background(
    image-url("foo.png"),
    linear-gradient(top left, #333, #0c0),
    radial-gradient(#c00, #fff 100px)
  );
}

Turns into this monster (which is unfortunately what we need for it to work with as good of browser support as we can get):

.bam {
  background: url('/foo.png'), -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00)), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #cc0000), color-stop(100%, #ffffff));
  background: url('/foo.png'), -webkit-linear-gradient(top left, #333333, #00cc00), -webkit-radial-gradient(#cc0000, #ffffff 100px);
  background: url('/foo.png'), -moz-linear-gradient(top left, #333333, #00cc00), -moz-radial-gradient(#cc0000, #ffffff 100px);
  background: url('/foo.png'), -o-linear-gradient(top left, #333333, #00cc00), -o-radial-gradient(#cc0000, #ffffff 100px);
  background: url('/foo.png'), -ms-linear-gradient(top left, #333333, #00cc00), -ms-radial-gradient(#cc0000, #ffffff 100px);
  background: url('/foo.png'), linear-gradient(top left, #333333, #00cc00), radial-gradient(#cc0000, #ffffff 100px);
}

Winner: SASS

Website Niceitude

LESS has a nicer, more usable website. The SASS documentation isn't awful. It's complete and you can find what you need. But when competing for attention from front end people, LESS has the edge. I don't doubt this plays a large role in LESS currently winning the popularity race. Things may be changing though.

Winner: LESS

The @extend Concept

Say you declare a class which has a bit of styling. Then you want another class which you want to do just about the same thing, only a few additional things. In LESS you'd likely:

.module-b {
   .module-a(); /* Copies everything from .module-a down here */
   border: 1px solid red;
}

That's an "include" essentially. A mixin, in both languages. You could use an include to do that SASS as well, but you're better off using @extend. With @extend, the styles from .module-a aren't just duplicated down in .mobule-b (what could be considered bloat), the selector for .module-a is altered to .module-a, .module-b in the compiled CSS (which is more efficient).

.module-a {
   /* A bunch of stuff */
}
.module-b {
   /* Some unique styling */
   @extend .module-a;
}

Compiles into

.module-a, .module-b {
  /* A bunch of stuff */
}
.module-b {
  /* Some unique styling */
}

See that? It rewrites selectors, which is way more efficient.

Winner: SASS

Variable Handling

LESS uses @, SASS uses $. The dollar sign has no inherit meaning in CSS, while the @ sign does. It's for things like declaring @keyframes or blocks of @media queries. You could chalk this one up to personal preference and not a big deal, but I think the edge here is for SASS which doesn't confuse standing concepts.

SASS has some weirdness with scope in variables though. If you overwrite a "global" variable "locally", the global variable takes on the local value. This just feels kind of weird.

$color: black;
.scoped {
  $color: white;
  color: $color;
}
.unscoped {
  // LESS = black (global)
  // SASS = white (overwritten by local)
  color: $color;
}

I've heard it can be useful but it's not intuitive, especially if you write JavaScript.

Winner: Tossup

Working with Media Queries

The way most of us started working with @media queries was adding blocks of them at the bottom of your main stylesheet. That works, but it leads to mental disconnect between the original styling and the responsive styles. Like:

.some-class {
   /* Default styling */
}

/* Hundreds of lines of CSS */

@media (max-width: 800px) {
  .some-class {
    /* Responsive styles */
  }
}

With SASS or LESS, we can bring those styles together through nesting.

.some-class {
  /* Default styling */
  @media (max-width: 800px) {
    /* Responsive styles */
  }
}

You can get even sexier with SASS. There is a really cool "respond-to" technique (see code by Chris Eppstein, Ben Schwarz, and Jeff Croft) for naming/using breakpoints.

=respond-to($name)

  @if $name == small-screen
    @media only screen and (min-width: 320px)
      @content

  @if $name == large-screen
    @media only screen and (min-width: 800px)
      @content

The you can use them succinctly and semantically:

.column
    width: 25%
    +respond-to(small-screen)
      width: 100%

Note: requires SASS 3.2, which is in alpha, which you can install with gem install sass --pre. I don't think there is any doubt this is a very nice way to work.

Winner: SASS

Math

For the most part, the math is similar, but there are some weirdnesses with how units are handled. For instance, LESS will assume the first unit you use is what you want out, ignoring further units.

div {
   width: 100px + 2em; // == 102px (weird)
}

In SASS, you get a clear error: Incompatible units: 'em' and 'px'. I guess it's debatable if it's better to error or be wrong, but I'd personally rather have the error. Especially if you're dealing with variables rather than straight units and it's harder to track down.

SASS will also let you perform math on "unknown" units, making it a bit more futureproof should some new unit come along before they are able to update. LESS does not. There is some more weird differences like how SASS handles multiplying values that both have units, but it's esoteric enough to not be worth mentioning.

Winner: Narrowly SASS

Active Development

At the time of this writing...

Number of open issues on LESS: 392
Number of open issues on SASS: 84

Pending pull requests on LESS: 86
Pending pull requests on SASS: 3

Number of commits in the last month in LESS: 11
Number of commits in the last month in SASS: 35

None of that stuff is any definitive proof that one project is more active than the other, but the numbers do seem to always leans toward SASS. As I understand it, both of the leads work on the languages in whatever little free time they have, as they both have other major new projects they are working on.

Winner: Probably SASS

More Reading

SASS vs. LESS is a post from CSS-Tricks

Posted in Article | Leave a comment

25 Examples of Monochromatic Photos and Art


Colors help our eyes determine detail. Sometimes, however, multiple colors can disguise details that we do not naturally see. Using shades of one color to wash out a photo or art piece can add to the overall impact and bring out details we might have missed.

This process of either eliminating all color or reducing the color palette to hues within a single shade is generally referred to as monochromatism. In the below examples of monochromatic photos and art, we included images in which the artist focuses your attention using careful color selection. This is not necessarily a single color, even though the word monochromatic means literally one color. Some monochromatic photos bend the rule a bit and incorporate one additional color to the primary shade used.

And don’t confuse monochromatic with black and white, either. While black and white is certainly in the genre, other colors can be used to create a specific mood or draw your eye to various elements of the piece. So let this collection expand your definition of monochromatic a bit and inspire you to reconsider color selection and emphasis in your own work.

Anime Monochrome

Source

Green Bathroom

Source

National Geographic Wallpaper

Source

Watered Album Cover

Source

Monochrome Camels

Source

Yellow Nature Wallpaper

Source

Red Sunset

Source

Green Forest

Source

Black Car

Source

2 Untitled Gouache on Wood Panel Paintings by Lori Ellison

Source

Butterfly on Leaves

Source

Monochrome by Oless (Olivier Stevens)

Source

Hyde’s Mill by NikonD3user1

Source

Monochrome 2 by Oless (Olivier Stevens)

Source

Monochrome 3 by Oless (Olivier Stevens)

Source

Brig o’Balgownie, Aberdeen by PeskyMesky (Graeme Wilson)

Source

Slipstream and Labyrinth II by David Mann

Source

E-Type Monochrome by blueandwhitehoops

Source

Tree in Red by Sunmallia

Source

Time for Reflection by John Bennett of Light and Dreams Photography

Source

Fog Lights byJohn Bennett of Light and Dreams Photography

Source

High on Grass by John Bennett of Light and Dreams Photography

Source

Urban Life by Sunnydayze

Source

Anna Samenina of Muse/NYC by ArtDictator (Adam Regan Photography)

Source

Night Drive by Sunnydayze

Source

Meltaway and Northern White by James Lecce

Source

Burr Oak Redux Monochrome by Notley Hawkins

Source

Green Monochrome Flowers by Lowell Nesbitt

Source

You might also like…

Inspirational and Free Downloadable Photography Magazines →
Beautiful Examples of Photoshopped Smoke Art and Technique Tutorials →
Amazing Images That Could Be HDR – But are definitely Not →
Tutorials for Creating Beautiful HDR (High Dynamic Range) Imagery →
Amazing Examples of Conformal Photography. How do they do this? →
50 Beautiful HDR Images from 50 World Cities →
Beautiful Examples of Photoshopped Smoke Art and Technique Tutorials →
Creative Photography Examples using the Polar Panorama Effect →
Creative and Inspirational Photographs – Distil Ennui →
Examples of Stylish Sabatier (or Solarised) Effect Photography →
Amazing Examples of Conformal Photography. How do they do this? →



Posted in photography | Leave a comment

9 New Free Fonts for Your Designs

Advertise here with BSA


Finding the perfect font for a project can be a real challenge, so there’s nothing better than having a huge amount of fonts readily available in your own library to count on. And it’s always good to have websites to count on when you need to look for fonts. That’s why today we gathered 9 new free fonts for your designs.

Tetra

Free Fonts
Free Fonts

Magna

Free Fonts
Free Fonts

Pilaca

Free Fonts

Typometry

Free Fonts
Free Fonts

RPM 45

Free Fonts

Stroke

Free Fonts

Znikomit

Free Fonts

Alphageometry

Free Fonts
Free Fonts

Slinkster

Free Fonts

Posted in Fonts, Freebies | Leave a comment

How Web Designers Can Successfully Use the Dribbble Network


How Web Designers Can Successfully Use the Dribbble Network
Do you like basketball? If you do and you are a web designer, you may take a liking to the design community Dribbble. If you hate sports, no worries! You still may like the network, especially if you are a web designer looking to showcase some of your work and share snippets of it with [...]

Advertise here with BSA

Posted in Design, Designers, Web Designer | Tagged | Leave a comment

Telling stories with your designs

Websites are incredibly versatile as a medium, to be used to display information and other content, and if well designed they can do this in an enjoyable way that’s easy for the reader to digest.

This can be done through combining a site persona with an ongoing narrative, consistent throughout, which will all come together to create a ‘story’ through which you can deliver relevant content.

It’s important to recognize as a designer that the story, which the content is then based on, comes before anything else in the site.

The content can’t simply be ‘dropped’ into the site post-design; it needs to be built up in the correct order: story, content, and then, finally, design.

Putting together the ‘story’ for your site involves two main components, a persona, and a narrative.


Personas

When designing a website, any seasoned designer will tell you is that the most important piece of information they need is the target audience. This is necessary information in styling the website, layout, what content (both text and images) to include, even what color schemes to use.

Once this information is found, either through market research, or through your primary objective as a site being to appeal to a particular audience, you can then work out how to adapt that into your site design. Whilst the content will often dictate what the target audience is—an e-commerce site selling kids toys is clearly aimed at parents—obviously there will always be exceptions. But this is an important part of knowing what your story needs to be conveying. Your ideal target audience has preferences and personality; this is your user persona.

Next comes the site persona, which is effectively a fictional individual, representing your site (not audience) in all ways: style, looks, ideas, age—all symbolizing various aspects of your site. These characteristics come together to form a personality—a persona—that defines your site and helps to provide a clear picture of how it should behave, what it should look like, and what content it should contain.

The importance of this in web design cannot be stressed enough, as it stops designers from falling into the trap of focusing on individual elements from the site, which combine to create a poor site with lack of coordination. A designer with an overall picture of the site, right from the conceptualization stage at the very beginning, will create a far better end product.

To create your site persona, you will need to have the following:

  • A good idea of your Target Audience: as mentioned above, you can use your user persona to help mold your site’s persona, however it only needs to relate to the user persona, not mirror it directly, otherwise your site will be far too specific
  • References to key figures in your organization (if any): this will help if your brand identity is based on the people in your organization, as your site persona can reflect elements of theirs, just as Apple did with Steve Jobs, and mojang.com, a game development company does with their lead title, Minecraft, referencing it in their site title and various other prominent places.
  • Promotional Content: this will make up the user experience on your site, and will be partly influenced by your site persona, but by being a part of it, and so influences it in return. The content will tell your user what the site is about, and what the persona is, playing an important role in the persona of your site. This will be a topic I will return to later in this article, however it is a point worth touching on in relation to personas.
  • Any other relevant documentation/content: this may seem incredibly vague, however sites can be so varied, and any relevant content or aspects of a site can be useful in creating a persona for it, and even subtle and seemingly inconsequential things can make a noticeable difference to the front-end of your site.


Narrative

The narrative of your site is the essence of your story, and encompasses all your content. Your narrative is the video embeds in your site; it is the content on your about page; it is your background image; it’s virtually all your content coming together to bring the user an overall experience that forms a narrative.

It’s easy to think of a narrative in a similar way to a thematic site. However, it’s slightly different as themes focus on design, where narrative focuses on all aspects including, and especially, content. The importance of the narrative is that it dictates your site’s pacing and how the user interacts with it, everything from your navigation bar to your ‘transaction complete’ screen.

The best narratives come organically grown, and it helps to have some existing content to define your narrative from, rather than working out your narrative and then artificially creating content around that. In a nutshell, the narrative is the journey the user experiences on their journey throughout your site, and you’ll need to get it right for your user to have an enjoyable experience. Just as a narrative needs to hang together well in a novel, so does your site’s narrative.

As with the ‘references to key figures in your organization’ under Personas above, your narrative can benefit from input from the story of your company, or a figure in your company, highlighting the highs and lows—anything that will make your user/reader care, and take an interest in your site. If your site has a blog, then your users will, if you have an interesting story, return time and again, to check for updates, and to participate in your site. This is especially evident if you have a forum on your site, as users can directly contribute.

A far too often used narrative method is the splash page—usually an all singing, all dancing entrance to the main event of your site. In most cases it doesn’t tell a story, it just gets in the way. It breaks up the structure of the site, and offers a facade that might not reflect the true content of the site.

Where narrative can be more practically useful in your site is in this context (focusing specifically on navigation):

In the story of this site,  you learn about the product of the site, you try it, and  like it, so subsequently buy it. After purchase you need support for any reason, a fault, or a query of some description. And then, at the very end, we can contact the company, for business queries, or as a customer.

The natural inference of the layout of this navigation bar, unfortunately for the site, is that SUPPORT follows PURCHASE because something has gone terribly wrong, and CONTACT is our last hope of getting satisfaction after SUPPORT has failed. (Support must have failed, not only because it has a terrible reputation across various industries, but also because it fits the plot: if support succeeded, who would we need to contact?)

This may seem like far too much psychoanalysis for a web designer, but if your story is based around a basic navigation system, then it’s important to think of the process in which your user will go through each page. Getting the order of the navigation wrong is similar to killing off a character in a book before introducing them: it simply does not make sense in the narrative of the story.

Another helpful way to think of layout in relation to your narrative and story is by visualizing a newspaper, or a comic. For comic book/graphic novel artists, there is always an issue with the positioning of panels, insofar as they need the reader’s eyes to be drawn from one panel to the subsequent one, rather than out of order. You can see how this would be an issue with the comics in a Sunday paper. With only a few panels to work with, an artist has to make sure that the punchline (usually the final panel) doesn’t detract from the final product so much that the reader looks to it first.

In this way you can visualize the layout of your site, and how it flows, as users are often channeled subconsciously through the same order of pages and links, creating their first impression of the site based on ad positioning or content below the scroll line that they can’t see, where you wanted the initial viewing of the site to be so different!

To conclude, your site, small or large, will have a user experience, and if you haven’t taken the time or care to create a story, it won’t be as coordinated or flow as well as it could do. The sites you see  where you think, ‘that’s really slick’, or ‘I wish my site worked as well as that’, have most likely been storyboarded with a narrative, and taken care over styling a persona.

So next time you visit Apple.com, think about what sort of persona it has, and how the site has been designed to flow, placing their leading Mac product first, but the iPhone product in the center of the navigation, rather than second, and having their Apple logo instead of a home button for brand recognition.


Dan Rajan is a video editor, creative content designer, and passionate writer from the UK, follow him on twitter!

Do you use a narrative approach when designing? Have you ever storyboarded a site design?



400 Web Backgrounds – only $29!


Source


Posted in Creativity, Design, User Interface, web design | Tagged , , , | Leave a comment