The Brand Gap
View more presentations from coolstuff.
Monday, June 21, 2010
Wednesday, April 14, 2010
The Gradual Disappearance Of Flash Websites
By Brad Cooper for the Smashing Magazine
If you want to “go big” visually with a website, delivering complex interaction and a rich experience across a wide range of browsers, Flash is the only way to go. Right? Nope. Given the widespread adoption and advancements of modern browsers and JavaScript libraries, using Flash makes little sense. But it does have its place on the Web, considering the need for progressive enhancement.
In the current landscape of technology and accessing the Internet through devices such as picture frames, netbooks, cell phones and televisions, the benefits of Web standards outweigh those of Flash, especially when delivering content to a broad audience on various devices.
Flash is a proprietary product that sits on top of the browser to extend functionality. While Flash may have provided missing functionality for some time, it brings little value to modern browsers. As more and more designers and developers realize the benefits of Web standards and start using some of the features of HTML5 and CSS3, we’ll see fewer Flash-driven websites.
The Great Flash vs. Web Standards Debate
Advocates have evangelized Web standards for over 10 years. The debate among developers and designers often gets as heated as the discussion on same-sex marriage, causing uncomfortable divisions among some of the smartest people in the field.
With the recent announcement of iPad’s lack of Flash support and the continued lack of it on the iPhone, the debate has reached beyond the development community to include Adobe and Apple themselves. With Apple’s anti-Flash stance, it has become too hard to argue for a completely Flash-based website when it would leave out a potentially large audience.
Eventually, Flash will make it to mobile devices (250 million devices are expected to have full support by the end of 2012), but that’s really only a small part of the debate and one of the better arguments that Web standards advocates have.
At the heart of the matter is how to deliver a great experience to users no matter the technology or platform.
“HTML5 vs. Flash” is the wrong discussion. “Accessible rich media” is the right one.
— Jeffrey Zeldman (via Twitter)
In the end, we’re all just trying to create websites that can be accessed and used, regardless of the tools we use to deliver them.
Healthy Competition
In the early days of the Web, Flash was pretty much the only way to deliver a rich experience across different browsers and platforms. CSS and JavaScript were inconsistently supported across browsers, and relying on them was hardly worth the trouble.
Flash saw great success early on and pushed forward quickly. The small app that once mainly made animations quickly became a worthy development environment in its own right. Developers and designers alike chose to concentrate their efforts in that area, often segregating themselves from the open Web and backing the proprietary technology. Flash websites took over the Web, and Web standards didn’t allow developers to create the experiences that users were starting to expect.
Web standards may have fallen behind once, but they continued to be pushed forward by practitioners and those willing to embrace the idea of an open Web.
Web Standards: Benefits And Reasons For Adoption
Users expect rich experiences, and in many cases these great experiences are now being delivered with HTML, CSS and JavaScript, which are the basics of Web standards.
The line between websites developed with Flash and Web standards has become blurred. At first glance, even the savviest developer would have a hard time discerning which technology was used for a website without peeking at the source.
The list of websites that are ditching Flash in favor of Web standards is growing every day. Even if these decisions are driven by the iPad and iPhone’s lack of Flash, they’ll soon reap the other benefits that Web standards bring.
Current Trends
What once could be done almost exclusively in Flash is now easily accomplished with JavaScript and a bit of ingenuity. Lightboxing, scrolling news stories, rich navigation and image slideshows were once solely the domain of Flash. Widespread adoption of standards is easily attributable to the ease of using JavaScript libraries for enhanced interaction and current support of CSS among browsers.
Video has been an important step in moving Web standards forward. Video is one of the few things that could once only be delivered in Flash. The biggest leap so far has been YouTube’s adoption of the HTML5 video element (albeit in beta), allowing modern browsers to bypass the Flash plug-in and use video native to the browser’s player.
HTML5 video has encountered controversy (thanks to the current codec debacle) and reports of unimpressive performance, but these issues will be worked out. Website developers will implement HTML5 video and choose an appropriate codec. When the biggest websites make this decision, we’ll end up with a de facto standard that gives browsers improved performance.
Modern Browser Adoption
HTML5 and CSS3 represent a great effort to advance native browser performance, and many browser providers are already implementing their specifications, even through they haven’t been set in stone. We have a lot to look forward to with CSS animation, canvas, local storage, geo-location and other specifications that will bring Web standards into a new era.
Although it will be many years before we see 100% of the emerging specifications implemented in browsers and see a large majority of users upgrade to those browsers, if we embrace the progressive enhancement of content, we’re well on our way to pushing adoption among developers.
Progressive Enhancement
Learning to produce progressively enhanced content, giving up pixel-perfect rendering in every browser, and embracing graceful degradation in older browsers can free up time to concentrate on other areas of development, such as accessibility and platform-delivery agnosticism.
If users of your website don’t have JavaScript or CSS enabled, they can still access and enjoy your content in a more limited way, unlike Flash websites, which typically don’t deliver content in the absence of Flash or JavaScript.
Designing with progressive enhancement in mind and building from the ground up require designers and developers to think more about the infrastructure of a website, and this typically exposes the kinds of issues that arise when working from the top down (i.e. designing a website and then considering the fall-back).
Smart Phone Browsers and Context Delivery
The mobile Web is still in its infancy and usually an afterthought in the design process, but standard-based designs can degrade as nicely on phones as they do on older desktop browsers. In the absence of the Flash plug-in, a website can still deliver an exceptional experience without much extra effort (which would be cumbersome with a Flash website).
Mobile Web browsing is increasing exponentially, and ignoring these users is unwise. Web standards are the only option to deliver richer interactions in mobile browsers.
Content Management
Giving website owners and editors the ability to edit interactive content inside a content management system means not having to coordinate with Flash developers to create and maintain content outside of the system. Many agencies have ditched Flash for WordPress-powered websites that use JavaScript to enhance the experience, allowing for quick and easy updates to portfolios and content.
Openness
Web standards being what they are (i.e. standard agreement on the way code is constructed and served), user agents and scripts from outside a website can be written to access data directly from the HTML. Search engines, microformats, feeds, translation and bookmarklets all work because of the open nature and consistency between the data.
If we want the Web to be truly scalable and interconnected, then microformats and microdata and APIs for content might be just the answer. Otherwise, we’ll remain in the same position we were years ago when websites erected walls around their content.
Freedom
Many people believe that the technology behind the Internet should be open and not competitive as it has been in the past. People should be free to consume and create information, without being tied down to the kind licensing restrictions and legalities seen with the likes of Flash, Silverlight and other corporately owned technologies.
Creating and delivering content with Web standards not only is the best technological solution but supports the freedom of an open Web.
Flash Does, And Will Continue To Do, Many Things Well
Just because Flash-driven websites are gradually disappearing doesn’t mean that Flash will disappear altogether. Too much content and infrastructure have been set up to magically vanish. Without vast restructuring or realigning of organizations and processes, plenty of Flash developers will continue to be employed, and plenty of Flash advertising will be directed at those ready to ignore it.
We owe a lot to Flash for making the Web what it is today, and it deserves that credit. Even though it showed less potential compared to the other plug-in technologies, such as Java applets, that emerged early on, it had a nice balance between seamless delivery to users and ease of development and deployment. Many other Web technologies, such as VRML and SVG, have tried to overcome Flash’s hold on the Web but have continually fallen short.
Where would the Internet be without Flash and the innovations it brought?
Ease of Use
Out of the gate, Flash was intuitive and easy-to-use application for both designers and developers, delivering the simplest of animations, yet able to scale to serve complex applications.
Because of its ease of use, Flash posed a lower barrier to entry for budding designers and developers. And combined with the suite of applications from Adobe, Flash fits well in the designer’s workflow.
Consistency
You can’t argue with the fact that for many years Flash has been the only way to deliver rich interaction in a consistent way across a wide range of platforms and browsers. It’s still the only way to deliver video and audio to older browsers, and it will retain its throne for several more years.
If you’re a stickler for fonts and demand special ones for your website, then you’ll be saddened by the current state of font support in the browser. This shortcoming will have to be compensated by Flash and swfObject until @font-face and various font formats become more widely supported.
Standards Not Quite There
As much as Web standards have advanced, we’re often stuck having to support older browsers in which Flash may be the only way to deliver audio, video and complex data-heavy interfaces. Thanks to early adopting Web browser providers, we can start using the HTML5 audio and video tag today. But we still have to plan for a Flash fall-back to deliver media in older browsers.
The same could be said for the canvas element for delivering complex visualization, 3-D animation and games. If a browser like IE6 needs to be supported, providing a decent fall-back for the canvas element can be complicated. Flash might just be the best choice for development in such cases. As always, your current and potential audience should determine your direction.
Progressively Enhanced Flash and Flash Injection
The best Flash developers take the same approach as the Web standards crowd, using Flash as a layer to enhance their websites and applications. If that continues, Flash will continue to have a place in delivering a great experience, serving mobile devices and reaching search engines and other user agent technologies. The Flash injection technique is the easiest way to meld the best of both worlds.
The Future of Flash
Adobe has never been the type of company to let a product stagnate. You can be sure it will keep pushing to get Flash on as many mobile devices as possible.
With Creative Suite 5, developers will be able to output Flash projects as native iPhone applications using the iPhone Packager. And Flash could soon evolve from its early roots as an animation application to a full-fledged desktop and mobile application development environment with the help of AIR and related advancements (AIR might reach the mobile space pretty quickly).
Flash developers will likely be in even greater demand, as the demand to deliver applications consistently between desktop and mobile devices increase—even if they aren’t asked to create run-of-the-mill websites.
Flash, HTML, CSS And JavaScript Are Just Tools
Web standards and Flash (and other plug-in technologies) are simply tools to create content for the Web. Even if Flash is on the decline for websites, Flash developers have no reason to worry about becoming obsolete.
Everything that is true for creating rich Internet applications holds true for whatever other tool you use, and transitioning to Web standards development may be easier than you think.
Flash and Web standards developers have more in common than they don’t. Interface and interaction design, typography, layout, graphic design and object-oriented programming are all still valid and important for both technologies.
Developers on both sides of the spectrum struggle with many of the same issues. They both set out to create a great user experience, to design intuitive interactions and to make websites easy for users. All of this is done not by the technology itself but by the people behind it.
Sunday, March 28, 2010
Innovate: Sketch out your ideas
By Chad Engle for FUEL
We’ve all done it. We rush right to the computer. We don’t even think, we just blindly move shapes around hoping to come up with something creative. We do eventually, but what if that first “warm-up” period could be faster. What if we could get right to the good designs? You can.
Freedom
Sketching will always be faster than using a computer. Even if you have a tablet, it’s still easier and faster to sketch out your thoughts instead of moving shapes on a computer. David Airey illustrates that by showing that you can switch between styles very easily. He make square B’s, organic b’s, geometrical b’s and everything in-between.
Original Creative
If you are on a computer you are tempted to peruse your favorite inspiration outlets. This is fine provided the timing is right but, you are starting something new and it’s not the time to look. It’s the time to think. Looking at the crucial ideation stage will make you regurgitate previous designs that someone else has already thought through. Marc Hemeon sketches concepts that would’ve taken him a while to achieve on a computer. The best part is he experiments with different marks, swirls, and type BEFORE hitting the computer.
HOW TO DESIGN A LOGO, CREATING THE TEEFURY BIRD – MARC HEMEON
Rapid Thinking
The beautiful thing about pencil & paper (or pen) or whatever you medium you choose is that it gives you the distinct ability to jump around from one idea to the next. The best apart about this is: rapid exploration. On a computer you have to spend 10 minutes connecting a few letters that could’ve taken you a few seconds on paper. This is vital because you can play out “the bad ideas” that cloud your creative judgement and then you get into the real groundbreaking creative. Alex Cornell sketches out the movement of a penguin. This movement is easily captured on paper. Through his sketches he notices the most important parts of the figure are its wings, beak and eyes.
Location
Sketching also gives you the ability to be creative anywhere, anytime, anyplace. Paula Scher from Pentagram designed the Citi logo on a napkin in a board meeting. We as creative beings are not always sure when we will be inspired so carrying a sketchbook or having access to a napkin is always good idea. Creatives have also been known to have a sketchbook in every room. It’s a good practice that sometimes comes in handy.
Rough Mock-up
Many illustrators sketch out a general shape and then take it into photoshop or illustrator to color it or sometimes finish drawing. This gives you the added benefit of using a sketch but also the clean lines (if you choose) of a digital version. Soft Facade shows how the designs were thought out before being finalized into beautiful icons.
Comments
Do you sketch or do you just go straight into the design. Has this changed your thoughts on sketching or are you still going to do it the way you did it before?
Resources
Here is another great article on Design Informer that illustrates the same principles. Thanks to @paddydonnelly for the tip.
Wednesday, March 17, 2010
Color Isn’t Always Better
By Jennifer Moline for FUEL
Do designers dream in Pantone with visions of rainbows in their heads? Color is a vital part of any graphic designer’s life – after all, they’re the ones paid to come up with pleasing color combinations that will sell a product. That’s why you often see a bold use of color for logos (think Pepsi’s use of primary-color red and blue) as well as websites (such as Graphic Design Blog’s paint-spattered header). While color definitely garners attention, there are times that black and white or a sepia tone will generate a different feeling. Think of how The Wall Street Journal, with its use of black and white, commands a serious, all-business sense, or how photos from the 1800s and early 1900s have an old-timey look with their sepia tone. Here are some more examples.
David Airey's blog
Graphic designer David Airey maintains a simple website with clean lines and black text on a white background. That lets the color photos on his blog – which are often of his work – shine through. The lesson here? Use black and white when you want other elements, such as your portfolio pieces, stand out.
i live here:SF blog
Nothing says “classic” like a tone down from bright colors. Color photos can be beautiful, of course, but sometimes they can be garish. A sepia tone works well when you want to use a photograph on, for example, invitations, memorial service cards and business cards, because it conveys a sense of respect. A two-tone color scheme also works for the website example above because it creates a sense of contentment and relief; a full-color photo would have signaled more joy, but the essay – about recovering from cancer – is more about a happiness well earned after a lot of heartache.
Graphic design is not always about flashy and new. There is a time and a place to go back to basics and choose black and white instead of color. Just be sure to identify what feeling you want to bring out with your project as well as how you want yourself or your client to be represented.
Wednesday, March 03, 2010
Design Criticism: A How-To... (Sited)
Original Post found at:
http://www.smashingmagazine.com/2010/03/02/web-design-criticism-a-how-to/
MUZE: In my opinion, this also applies to other fields of design, in a general broad term...
Web design is a relatively young field. It’s youthful, growing and made up of people from all kinds of backgrounds, many of whom lack formal design training. We have learned, and still are learning, as we go.
I came into my first job as a Web designer for Boeing back in the mid-1990s, with no formal design training. I was lucky to get some training on the job, and I would guess that my experience there was similar to that of many who are reading this article. I had the opportunity to work with some very talented and highly experienced designers who all had made the jump from other design fields to the Web.
It was there, as part of that training, that I learned about critiquing, both giving and receiving, through regular design reviews.
Formal Design Reviews = Fun? Maybe not. Educational? Heck, Yeah.
Those reviews weren’t fun. They were difficult and demanding and required quite a bit of effort. However, they were also meant to yield the best possible design work through careful evaluation and constructive criticism. They weren’t inherently negative, but they did focus on what was wrong with a design and what could be improved, rather than what was working—which, to some degree, makes sense. The goal was to improve the quality of work.
Many days I left those reviews feeling like a failure, and some days I felt unnecessarily beat up. But I was often reminded that these reviews weren’t personal and were tough for a reason. In hindsight, I’m glad I had them. They improved the quality of my work immensely and taught me quite a bit about how to evaluate my own work as well as the work of others. Still, I look back and can’t help but pick out problems—not with the process or intent, but with the specific things we used to evaluate our design work.
Almost exclusively, we evaluated the designs based on established visual design principles, many of which are sound and worthy of consideration when evaluating a website design. But, at least in the beginning, we rarely touched on things that went beyond the visual design of the websites and products we were building. I think we could be forgiven that; again, Web design was new then, and we were all learning.
Shortly thereafter, I got involved with the Web design community outside of Boeing (though Boeing had a thriving, diverse and rather large community in its own right), and I began to see how the rest of the world judged design work. It was mostly limited to informal comments in forums and such, again very much “thin-slicing” and focused on snap judgements and gut reactions related to style and visual design. I felt lucky to have what I had: formal, informed, passionate and professional feedback, even if it wasn’t as deep as it should have been.
How We React
This hold true today, more than 10 years later. A person tends to critique a design in one of several ways. The most common, and usually least valuable, is by gut reaction. Gut reaction is valid and can be valuable; in fact; if you look at most established design principles, you’ll see something about emotional connection. On the Web especially, this connection is often formed in an instant. It can and often does develop over time, but the initial reaction should be noted and can be important to the overall success of a design.
Gut reactions often hold little value in a critique because they are not properly articulated. The person giving the critique will reduce their initial reaction to words like “suck,” “awesome,” “like,” “hate,” which does nothing to help the designer improve their design. These kinds of reactions are fine to note, but to be valuable they need to be articulated well. This requires a longer look at the design and a clear understanding of what the designer is looking for.
The most common reason the process breaks down is because it’s hard to follow. It takes time, attention and an understanding of what is being evaluated. Unfortunately, people don’t seem willing or able to go that extra step to make their feedback, whether positive or negative, helpful. They’re more concerned about getting their gut reaction off their chest and moving on. In some cases, they simply don’t have the tools to reflect on and articulate their reaction. A good critique requires time and a grasp of fundamental design principles.
Honestly, why else would a designer fire off a “That sucks” comment? If you’re reviewing a fellow designer’s work, you should feel obligated to make your review as helpful as possible. Those unhelpful comments result more from a lack of understanding than a lack of willingness to put in the effort. To this end, I wanted to see whether established principles exist by which to judge Web design and whether we have guidelines along which to offer critiques. So, I did some research.
As With Most Things, Begin With Research
I began with some extensive research on Web design criticism and critique. I didn’t find much, but a few things are worth sharing. Jason Santa Maria, who is a wonderful designer and a leader in our field, wrote a good article about giving and taking criticism. He has some good advice there, and through his formal schooling he seems to have had a similar experience with criticism and design reviews that I did. He goes into the specifics of critiquing itself, and any designer could benefit from a quick read of it. As well, a few months ago a good post on responding to criticism was posted here on Smashing Magazine. It’s about responding to criticism rather than giving it, but some useful ideas are there.
As interesting as those articles are, I couldn’t find anything on giving critiquing Web designs in particular or on established design principles by which to judge websites and applications. In hindsight, and after many revisions to this article, I’m not all that surprised. Given the broad and multi-disciplinary nature of the Web, the subject is difficult to tackle.
Any Universal Web Design Principles?
Some attempts have been made to define universal principles for Web design, here on Smashing Magazineand over on the much-missed Digital Web, but these (for me at least) are too broad to be readily usable. They’re a good place to start, though, and worth studying.
More helpful would be to dig deeper and look at more specific principles, such as Principles of Design and Jakob Nielsen’s Usability Heuristics. With these, we could begin to dissect a Web design into its component parts and critique each individually. But let’s be realistic: not many will take the time to do that.
Learning the principles of usability, user interface, typography, visual design and so on is something every Web designer should work towards. This understanding will give you some of the language and criteria you need to effectively criticize. The rest is effort.
In addition to my research, I’ve spoken to many other designers about what makes for a useful critique. While one would expect many of the answers that were given, most people believe that it depends largely on engaging with the design and the designer, on having a conversation with them. I’ve noticed a lot of this happening in Dribbble, a great community for designers that’s currently in beta. I have a few invitations, which I’ll give to those with the best comments. Just note in your comment that you’re interested in the Dribbble invitation.
After all this research and reflection, I’ve come to define a good critique as one that takes a gut reaction, applies context and understanding to it, and then communicates that in a constructive, conversational way.
To this end, I’ve formulated some simple rules for judging a Web design.
Some Guidelines For Constructive Web Design Criticism Read more on each point at the original post source...
1. Note Your Gut Reaction, But Take Time to Explore It.
2. Learn to Articulate Your Observations, and Invite Being Questioned.
3. Be Specific, and Offer Suggestions if Appropriate.
4. Always Consider Context and Audience-Appropriateness.
5. The Most Important Measure of a UI’s Success Is How Well It Meets Expectations.
6. Subjectivity Is Fine if Labeled as Such and Articulated Properly.
7. Don’t Neglect the Content.
8. Study the Principles Used to Judge Design, and Learn the Language.
Conclusion
Giving a great critique isn’t rocket science, as long as you take some time and use a proper frame of reference (knowledge, context, criteria) to engage and think critically about the design. So, what do you think? Agree? Disagree? I’d love for readers to weigh in here on what they think makes for a useful Web design critique and share what they think makes a Web design successful. Also, feel free to critique this article… I know I could use it.
D. Keith Robinson
D. Keith Robinson is a writer, designer, artist, publisher, etc. currently living in San Francisco.
Subscribe to:
Posts (Atom)
