Creating Exciting And Unusual Visual Hierarchies // thnxz smashingmagazine.com – @smashingmag


Layout, for both print and screen, is one of the most important aspects of graphic design. Designs that extend across multiple pages or screens, whether containing large or small amounts of type, must be carefully controlled in a way that is enticing and is easy for all to access.

Creating Exciting And Unusual Visual Hierarchies With Typography

By 

Careful control of visual hierarchy is a key aspect of the design decisions we have to consider. In this article, we will look at how frequently type needs to be broken down into different levels, such as topic, importance and tone of voice.

Read more…

There Is No Mobile Internet! // @smashingmag – smashingmagazine.com


By Marek Wolski

A Quiet Change

At the beginning of June, Google published on its Webmaster Central Blog its “Recommendations for Building Smartphone-Optimized Websites.” Its recommendations are that responsiveness — or, where necessary, device-specific HTML — is the way to build websites for today. Both methods are based on all devices accessing one URL, which in Google’s words makes it “easier for your users to interact with, share, and link to…”

Following the recommendation means making most of your Web content accessible across devices. It ensures that each link shared across the Web leads back to the same place and that, irrespective of the user’s device, everyone gets the same design experience. It aims to standardize Web design approaches, but also to standardize user experience expectations.

Shortly after, Apple announced a lot of thrilling updates to iOS 6. One of the least talked about was Safari’s iCloud tabs. This syncs your open browser tabs and allows you to continue browsing from where you left off on another device. Google’s recent version of Chrome for iOS has the same feature. The result? The ultimate cross-media surfing experience, a digital doggy bag.

After many years of Internet people working on standards, technologies and practices to bring about a One Web experience, the two companies made a big push towards making it a reality. We are now a big step closer to, in the words of the W3C, “an Internet where as far as reasonably possible, the same information and services are available to users irrespective of the device they are using.” Well, that is only if website owners and brands get their act together and change their old ways. To do so, they will need to recognize that things aren’t what they seem and aren’t what many are still peddling.

Full article

Old Habits, Old Stereotypes

A couple of years ago, mobile devices couldn’t even handle many of the Web’s fundamental standards (JavaScript, for example). But as devices became as powerful as last year’s MacBook, the technology drove a behavioral shift. It wasn’t just early adopters who were using the mobile Web. It was every person and their dog with a smartphone and a 3G connection (around 75% of smartphone owners surf the Web).

Our Mobile Planet - General Smartphone Activities
Image source: Our Mobile Planet.

The line between what is and isn’t Web-enabled is blurring. People don’t see the Internet on their phone or tablet as being the “mobile Internet.” It’s just the Internet. In the words of mobile expert Brad Frost, “mobile users will do anything and everything desktop users will do, provided it’s presented in a usable way.”

For the last few years, across categories, mobile experience benchmarking studies have been filled with recommendations to broaden and deepen the content available. Users are searching more and longer for information that currently isn’t available on mobile or even tablet devices.

Mobile Site vs Full Site
Image source: Strangeloop.

This desire for information is prevalent and strong enough that many opt for a less than optimal visit to the “full site” in order to access more or other information. The fact that almost a third of mobile users are prepared to endure poor navigation, slow loading times and no touch optimization really underscores the presence of this fundamental behavior.

Full article

Multi-Device World: about design and more, and more… // @smashingmag / @flipthemedia


Thnx to smashingmagazine.com and flipthemedia.com

When I think about where we are with the Web in comparison to other media in history, pinpointing it is really hard. Is it like when the Gutenberg Press was just invented and we’re experimenting with movable type, or are we still embellishing pages and slavishly copying books by hand?

By 

 

Our knowledge of building digital things changes rapidly, taking us from newborn to adult and back again every couple of years. It’s both exciting and frustrating, because just when you think you have it all figured out, it completely changes. But if you’re like me, learning something new keeps things interesting.

So, it seems pretty normal that our methods of designing and building websites are questioned every so often. The argument to ditch design apps (or to drastically minimize the time spent in them) and go straight to the browser has popped up a lot in the past few years and then quite recently. It’s obvious that our digital world and, by proxy, our design process are in a state of transition. And they should be: considering design in the context of your materials and goals is always important.

I tend to shy away from prescriptive approaches. Most decisions are framed by our experience, and, as humans, we’re continually drawn to and seek out what we already believe (known as “confirmation bias”), ignoring the rest. So, I strive to keep that in mind whenever listening to advice about how things should be done. We’re all navigating the same changing landscape here. What many designers recommend is the right answer for them and not necessarily the right answer for you, or your client. As Cameron Moll more eloquently states:

“You know your circumstances, your users, and your personal preferences best. And if that means responsive web design — or design methodology or todo app or office chair or whatever — isn’t the right choice for you, don’t be ashamed if you find yourself wanting more, or at least wanting something else.”

That’s exactly how I feel right now. A lot of the explorations into Web design lately have been looking for the best ways to optimize an experience and to make it as flexible as possible across devices. These are important issues. But what about the design principles we’ve proven and iterated on through a variety of media? How can we apply what we’ve learned about design so that it can be utilized in an appropriate way to create websites in this multi-canvas world?


Typographic Design in the Digital Domain” with Erik Spiekermann and Elliot Jay Stocks

In an interview with Elliot Jay Stocks, legendary typographer and designer Erik Spiekermann explains how he finds it funny that designers today complain about limitations in designing for mobile…

by 
1. Technology and use trends

  • Digital options increase every day
  • Fluidity allows you to reach people through all the different methods available
  • Some devices actually create new data, which yield new insights (i.e. FitBit, Fuel band, etc. This idea will also be interesting for toys.)
  • Network speeds increasing (huge difference from 3G to LTE)
  • With the decreased price of cloud storage, sharing content across devices is easier (shared experience)
  • Content management systems drive the consumer experience and should be integrated into the foundation of your platform

2. Types of connected experiences

  • Synchronized: for example, the eReader let’s you make notes and brings you back to where you last stopped, no matter the device. Evernote allows you to share information and access documents from different locations and devices.
  • Adaptive: content adapts to your current device. This could mean apps for the device you want to target or responsive websites. It’s important to consider how the customer will engage on a device and what information you need to share.
  • Complementary(second screen): people interact with content at an event or with others experiencing an event. A lot of networks are investing in second screen platforms. 80% of people with tablets watch television with a second screen in front of them; an opportunity for networks to build deeper experiences for customers.
  • Device shifting: people start searches on mobile/tablets and finishing them elsewhere, shifting seamlessly from device to device. Consider content and context of each device.  For example, when searching for cars, on the phone you might want to show visuals, basic information, and location-based results, while on the PC you have expanded information, but don’t focus on location-based information specifically. Leer más “Multi-Device World: about design and more, and more… // @smashingmag / @flipthemedia”

The User Is The Anonymous Web Designer

We invest time, money and effort into understanding our audience, and the movement toward a more socially networked Web has made us realize the power that visitors have over how our designs are engineered; and we try to meet their ever-growing needs. Community is integral to the evolution and functioning of a website, and visitors and website owners have become dependent on each other. This reflects a change in the industry: the user has turned into an anonymous designer.

This article will explore the influential figure ‘user’ and uncover the power of your community. Whether you boast social applications, interactivity or a stream of regular visitors, your audience might be a powerful untapped resource at your fingertips. You, the website owner, have the power to make decisions and override them (for better or worse), but the user deserves to be recognized as more than a statistic.
Traditional Roles

Back in the Web’s infancy, the roles of the Web professional and visitor were clearly laid out. Technologies such as email, bulletin boards and Internet Relay Chat (IRC) rooms existed, but most Web users were technologically inclined — cost and complexity of computers and Internet access were the biggest obstacles for many in the early days. Additionally, website were simple and the power of users was restricted; users had little sway with designers and developers.
The Professionals

The role of the Web professional used to be — famously, in the ’90s — to build websites that delivered certain information. Asking the user for feedback was an afterthought; this was evidence of the commonly held belief that we, the experts, knew what was best for users. Usability and accessibility were a luxury, and many website providers ignored them in an attempt to control the way the medium was used.


By Alexander Dawson
http://www.smashingmagazine.com/2010/10/14/the-user-is-the-anonymous-web-designer/

We invest time, money and effort into understanding our audience, and the movement toward a more socially networked Web has made us realize the power that visitors have over how our designs are engineered; and we try to meet their ever-growing needs. Community is integral to the evolution and functioning of a website, and visitors and website owners have become dependent on each other. This reflects a change in the industry: the user has turned into an anonymous designer.

This article will explore the influential figure ‘user’ and uncover the power of your community. Whether you boast social applications, interactivity or a stream of regular visitors, your audience might be a powerful untapped resource at your fingertips. You, the website owner, have the power to make decisions and override them (for better or worse), but the user deserves to be recognized as more than a statistic.

Traditional Roles

Back in the Web’s infancy, the roles of the Web professional and visitor were clearly laid out. Technologies such as email, bulletin boards and Internet Relay Chat (IRC) rooms existed, but most Web users were technologically inclined — cost and complexity of computers and Internet access were the biggest obstacles for many in the early days. Additionally, website were simple and the power of users was restricted; users had little sway with designers and developers.

The Professionals

The role of the Web professional used to be — famously, in the ’90s — to build websites that delivered certain information. Asking the user for feedback was an afterthought; this was evidence of the commonly held belief that we, the experts, knew what was best for users. Usability and accessibility were a luxury, and many website providers ignored them in an attempt to control the way the medium was used. Leer más “The User Is The Anonymous Web Designer”

Five Useful Design Techniques and Coding Solutions For Web Designers

As designers, we have to create an intuitive user experience, solve design problems and provide a beautiful and functional user interfaces. Unlike print design, we don’t have the luxury of designing in a static area; rather, our canvas is ever-changing in its content, browser width, page length and more. We do need to be able to code to some extent and be able to build a design around a structure of code. Yet, with these complications comes an opportunity for unique functionality, interactive effects and better user experience.

In this article, we’ll look at five useful coding solutions that we’ve stumble upon recently. All of these solutions enhance a website’s design, not just the code. These solutions affect the user interface and the user’s interaction with the design, and they can make for a more usable and interactive website.
1. Bar Graph Effect For Multiple Items

This effect (pictured below) can be a great way to add some oomph to a Web page, and make it more user-friendly. Its functionality goes beyond just being a cool trick, though. By organizing any set of items on a page — such as tags, categories, comments, product count — a designer can enhance user interaction, provide useful content clues and improve usability. By seeing a count of items such as tags and product types, the visitor can quickly get an idea of what the website mostly consists of. This is a great way to make quick connections with targeted visitors.

For comment counts, visitors can quickly see where the discussions are at. Highlights on highly commented posts can reinforce user-to-user interaction.

Pictured below are two examples of this design. The left organizes tags, and the second ranks the most commented posts on a blog. Be sure to visit both websites to see the full functionality and CSS effects.


By Kayla Knight
Full article
http://www.smashingmagazine.com/2010/10/07/5-useful-coding-solutions-for-web-designers/

As designers, we have to create an intuitive user experience, solve design problems and provide a beautiful and functional user interfaces. Unlike print design, we don’t have the luxury of designing in a static area; rather, our canvas is ever-changing in its content, browser width, page length and more. We do need to be able to code to some extent and be able to build a design around a structure of code. Yet, with these complications comes an opportunity for unique functionality, interactive effects and better user experience.

In this article, we’ll look at five useful coding solutions that we’ve stumble upon recently. All of these solutions enhance a website’s design, not just the code. These solutions affect the user interface and the user’s interaction with the design, and they can make for a more usable and interactive website.

1. Bar Graph Effect For Multiple Items

This effect (pictured below) can be a great way to add some oomph to a Web page, and make it more user-friendly. Its functionality goes beyond just being a cool trick, though. By organizing any set of items on a page — such as tags, categories, comments, product count — a designer can enhance user interaction, provide useful content clues and improve usability. By seeing a count of items such as tags and product types, the visitor can quickly get an idea of what the website mostly consists of. This is a great way to make quick connections with targeted visitors.

For comment counts, visitors can quickly see where the discussions are at. Highlights on highly commented posts can reinforce user-to-user interaction.

Pictured below are two examples of this design. The left organizes tags, and the second ranks the most commented posts on a blog. Be sure to visit both websites to see the full functionality and CSS effects. Leer más “Five Useful Design Techniques and Coding Solutions For Web Designers”

Retro Video/DOS Games For The Weekend

We thought we’d do something a bit different for the weekend, because not everybody is actually working during the weekend. And even if we do, we deserve a break from time to time. For just this occasion, we have poured across the four corners of the Web and amassed a collection of retro games to help you make the absolute most of your break time this weekend… and possibly any break time you take from this day forth.

Now you’re ready to take some time off and unplug, let’s stroll down memory lane, the gaming way. Focusing on the days of the old DOS-based games, we sourced some emulators so that you could revisit your old favorites once again without having to downgrade your machine. So flex some willpower (or kiss your weekend goodbye) and dive into the deep end of this DOS-day throwback to get your ROM on.


We thought we’d do something a bit different for the weekend, because not everybody is actually working during the weekend. And even if we do, we deserve a break from time to time. For just this occasion, we have poured across the four corners of the Web and amassed a collection of retro games to help you make the absolute most of your break time this weekend… and possibly any break time you take from this day forth.

Now you’re ready to take some time off and unplug, let’s stroll down memory lane, the gaming way. Focusing on the days of the old DOS-based games, we sourced some emulators so that you could revisit your old favorites once again without having to downgrade your machine. So flex some willpower (or kiss your weekend goodbye) and dive into the deep end of this DOS-day throwback to get your ROM on.

Game Showcase

Prince of Persia
Prince of Persia is a 2-D platformer with run and jump game play. Your hero must avoid deadly traps, solve some simple puzzles and engage in sword fights with guards. As the hero, you have an infinite number of lives, but you have to restart the level every time you die, and you must complete the game within an hour. The very fluid animation of your character is especially noteworthy. The game is still available for free downloading.

Persia in Retro Video/DOS Games For The Weekend

Lemmings
Your task is to rescue lemmings across 120 levels of fast-paced puzzles. The creatures simply walk blindly through the world in the hope of reaching safety at the end of the level. Unfortunately, these levels include steep drops, gaps in the ground, barriers and rivers, among other hazards. You can play Lemmings online. Leer más “Retro Video/DOS Games For The Weekend”

50 New Useful CSS Techniques, Tutorials and Tools

These are great times for front-end developers. After months of exaggerated excitement about HTML5 and CSS3, the web design community now starts coming up with CSS techniques that actually put newly available technologies to practical use instead of abusing them for pure aesthetic purposes. We see fewer “pure CSS images” and more advanced, clever CSS techniques that can actually improve the Web browsing experience of users. And that’s a good thing!

In this post we present recently released CSS techniques, tutorials and tools for you to use and enhance your workflow, thus improving your skills. Please don’t hesitate to comment on this post and let us know how exactly you are using them in your workflow. However, please avoid link dropping, but share your insights and your experience instead. Also, notice that some techniques are not only CSS-based, but use JavaScript, or JavaScript-libraries as well.


Full article:
http://www.smashingmagazine.com/2010/10/12/50-new-useful-css-techniques-tutorials-and-tools/

These are great times for front-end developers. After months of exaggerated excitement about HTML5 and CSS3, the web design community now starts coming up with CSS techniques that actually put newly available technologies to practical use instead of abusing them for pure aesthetic purposes. We see fewer “pure CSS images” and more advanced, clever CSS techniques that can actually improve the Web browsing experience of users. And that’s a good thing!

In this post we present recently released CSS techniques, tutorials and tools for you to use and enhance your workflow, thus improving your skills. Please don’t hesitate to comment on this post and let us know how exactly you are using them in your workflow. However, please avoid link dropping, but share your insights and your experience instead. Also, notice that some techniques are not only CSS-based, but use JavaScript, or JavaScript-libraries as well.

Leer más “50 New Useful CSS Techniques, Tutorials and Tools”

Getting Started With E-Commerce: Your Options When Selling Online

The world of online sales, whether of products or services, can be daunting at first; the options seem confusing and the information conflicted. Yet as the designer or developer of an online store, you will need to guide your client through the maze of choices in order to get it up and running.

I have developed many e-commerce websites during my career as a Web developer. I’ve used and modified off-the-shelf software and have also developed custom solutions — so I know from experience that there are a number of important questions to answer before presenting possible solutions to a client. Getting all the pertinent information up front is vital if such a project is to run smoothly, and it can save you from delays during the process. It can also help you advise the client on whether they need a full custom cart or an open-source or off-the-shelf product.

This article responds to some questions you should be asking of your client before putting together a proposal for the development of an e-commerce website. I’ll explain the most important things to think about in terms of taking payments and credit card security. It should give you enough information to be able to guide your client and to look up more detailed information about the aspects that apply to your particular situation.


The world of online sales, whether of products or services, can be daunting at first; the options seem confusing and the information conflicted. Yet as the designer or developer of an online store, you will need to guide your client through the maze of choices in order to get it up and running.

I have developed many e-commerce websites during my career as a Web developer. I’ve used and modified off-the-shelf software and have also developed custom solutions — so I know from experience that there are a number of important questions to answer before presenting possible solutions to a client. Getting all the pertinent information up front is vital if such a project is to run smoothly, and it can save you from delays during the process. It can also help you advise the client on whether they need a full custom cart or an open-source or off-the-shelf product.

This article responds to some questions you should be asking of your client before putting together a proposal for the development of an e-commerce website. I’ll explain the most important things to think about in terms of taking payments and credit card security. It should give you enough information to be able to guide your client and to look up more detailed information about the aspects that apply to your particular situation.

What this article doesn’t cover is the design and user experience side of creating an e-commerce website, because gathering this information would normally occur alongside the designing and branding of the website.

What You Need To Know

It is really tempting to select a solution based on something you have used before or perhaps after asking around to see what others recommend. But you can get stuck in a rut this way. Every online business has different needs, so one solution is unlikely to fit all. Before writing any code or trying an off-the-shelf package, you need to ask yourself or your client a few questions:

  • What are you selling?
  • What shopping functionality should you offer?
  • How will you take payment?
  • How will items be delivered?
  • What reporting and other functionalities are required?

What Are You Selling?

Your online store may be selling physical products that are shipped by the postal service or a courier to the customer after a completed purchase. Or it might be selling products that are delivered electronically, such as e-book downloads, MP3 music or software. Donations and subscriptions are types of transactions to consider as well.

What Shopping Functionality Should You Offer?

Will you be selling a single item, (such as an e-book) or will visitors need to be able to browse and add multiple items to their cart? Are these items associated with distinct options? If you’re selling t-shirts, for example, size and color might be options to include. Are categories needed to make ordering easier? Will a given item be listed in only one category, or could it be found in several? Would the ability to tag items be useful, or the ability to link them to related items (thus allowing the store owner to promote accessories for items that the customer has added to their cart)?

Sm-ecommerce-hicksmade-crop in Getting Started With E-Commerce: Your Options When Selling Online
Items on the Hicksmade website can be displayed in categories. (Large view)

Will there be special offers on the website? Standards ones are “Buy one, get one free,” “20% discount,” “two for one” and “buy item x and get item y at half price.” Setting up these kinds of offers can be quite complex if you are developing a custom system; and if you’re buying an off-the-shelf solution for the store, then you’ll need to know whether it supports them.

The devil (and the budget) is in the details. If your client is expecting particular functionality, find out about it now.

Accounts and Tracking Orders

Part of the user experience could include managing an account and tracking orders. Must users create accounts, or is it optional? Can they track their order and watch it move from “processing” to “shipped”? Account functionality must include basic management functions, such as the ability to reset a forgotten password and to update contact details.

How Will You Take Payment?

You’ll likely need to accept credit and debit card payments from customers. There are a number of options that range in complexity and expense.

PayPal

PayPal is a straightforward way to take payments online. The advantages are that creating a PayPal account is easy, it doesn’t require a credit check, and integration can be as simple as hardcoding a button on your page or as involved as full integration. Google Checkout offers a similar service (and a similarly low barrier to entry), as does Amazon (in the US) through Amazon Payments.

Using A Merchant Account

To accept card payments directly, rather than through services like PayPal, you will need an Internet Merchant Account. This enables you to take credit card payments and process the money to your bank account. If you have an existing merchant account for face-to-face or telephone sales, though, you will not be able to use it for online transactions. Internet transactions are riskier. So, to start trading online, you’ll need to contact your bank. The bank will require that you take payments securely, in most circumstances via a payment service provider (or PSP, sometimes called a payment gateway).

What you should definitely not do is store card details in order to enter them in an offline PDQ later. This would be against the terms of the merchant agreement. So, unless you have written permission from your bank saying you are allowed to do this, and you’re complying with the PCI DSS, just don’t.

The Payment Gateway

The purpose of the payment gateway is to take the card payment of your customer, validate the card number and amount and then pass the payment to your bank securely. You can interact with a payment gateway in two ways:

  • Via a pay page
    The user moves from your website to a secure page on the payment gateway server to enter their details.
  • Via API integration
    The user enters their card details on your website (on a page with a secure certificate installed, running SSL), and those details are then passed to the gateway. Your website acts as the intermediary; the user is not aware of the bank transaction happening, having seen it only via your website.

The advantage of pay page integration is that your website never touches the card details, so you are not liable for the customer’s security. The most significant disadvantage is that you lose some control over the payment process, because the final step requires gathering all the details to pass to the payment server. In addition, you are often unable to customize the payment screen, even if only to upload a logo.

Store owners are often concerned about this break in the user experience: they fear the user will bail before going to the payment page on WorldPay or another server. But transferring your user to a known banking website where they’ll enter their card details might actually give them confidence in the legitimacy of your website. When I deal with an unknown website (perhaps a small retailer) and it asks me to enter my card details, I immediately worry about how it will handle them. Does the website email my card details in clear text? Will the details be stored in a database somewhere by the website? Even if the page has a secure certificate and checks out, I still have no idea what happens to my details after I hit “Submit” on the form. If the final step of checking out takes me to a known PSP page, then I can be confident that my details are safe and the small website isn’t handling them at all. I trust WorldPay with my details far more than I trust Joe Blogg’s Widget Store.

Another useful argument for using a pay page is that, should there be any changes in card payment regulations, these will be handled by the PSP. For example, 3-D Secure (verified by Visa or MasterCard SecureCode) was instituted recently. It requires that users verify their payment on a page related to their bank before it can be authorized. If you had API integration, you would need to edit your code to ready it for 3-D Secure; whereas on payment page websites, those changes are done by the PSP.

These points have encouraged many website owners to reconsider their reluctance to use a pay page — most realize that being responsible for credit card details is more trouble than it’s worth.

Pay page integration should work with most off-the-shelf software. After payment is made, it typically sends back something that enables your website — which has a script running for this — to identify the user and the transaction and perform any post-purchase processing that may be needed (such as marking an order as “Paid” in the database or giving access to an electronic download).

The advantage of full API integration is that you control the payment process from beginning to end, including the look and feel of the payment pages. However, you are also responsible for the security of the user’s card details, and regulations require that you prove you are following best practices. Leer más “Getting Started With E-Commerce: Your Options When Selling Online”

What Is User Experience Design? Overview, Tools And Resources

Those who work on UX (called UX designers) study and evaluate how users feel about a system, looking at such things as ease of use, perception of the value of the system, utility, efficiency in performing tasks and so forth.

UX designers also look at sub-systems and processes within a system. For example, they might study the checkout process of an e-commerce website to see whether users find the process of buying products from the website easy and pleasant. They could delve deeper by studying components of the sub-system, such as seeing how efficient and pleasant is the experience of users filling out input fields in a Web form.

Compared to many other disciplines, particularly Web-based systems, UX is relatively new. The term “user experience” was coined by Dr. Donald Norman, a cognitive science researcher who was also the first to describe the importance of user-centered design (the notion that design decisions should be based on the needs and wants of users).


Websites and Web applications have become progressively more complex as our industry’s technologies and methodologies advance. What used to be a one-way static medium has evolved into a very rich and interactive experience.

But regardless of how much has changed in the production process, a website’s success still hinges on just one thing: how users perceive it. “Does this website give me value? Is it easy to use? Is it pleasant to use?” These are the questions that run through the minds of visitors as they interact with our products, and they form the basis of their decisions on whether to become regular users.

User experience design is all about striving to make them answer “Yes” to all of those questions. This guide aims to familiarize you with the professional discipline of UX design in the context of Web-based systems such as websites and applications.

[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]

What Is User Experience?

User experience (abbreviated as UX) is how a person feels when interfacing with a system. The system could be a website, a web application or desktop software and, in modern contexts, is generally denoted by some form of human-computer interaction (HCI).

01 User Experience Graphic in What Is User Experience Design? Overview, Tools And Resources

Those who work on UX (called UX designers) study and evaluate how users feel about a system, looking at such things as ease of use, perception of the value of the system, utility, efficiency in performing tasks and so forth.

UX designers also look at sub-systems and processes within a system. For example, they might study the checkout process of an e-commerce website to see whether users find the process of buying products from the website easy and pleasant. They could delve deeper by studying components of the sub-system, such as seeing how efficient and pleasant is the experience of users filling out input fields in a Web form.

Compared to many other disciplines, particularly Web-based systems, UX is relatively new. The term “user experience” was coined by Dr. Donald Norman, a cognitive science researcher who was also the first to describe the importance of user-centered design (the notion that design decisions should be based on the needs and wants of users).

Full article here:
http://www.smashingmagazine.com/2010/10/05/what-is-user-experience-design-overview-tools-and-resources/

Breaking Down Doors: Promoting Yourself To Dream Clients

Your city might have a book that list local companies, which could offer valuable information, as might the business section of your local paper. You have to hunt down names, network, steal, ask stray kids if their mom or dad works with designers, and take advantage of family connections (while still refusing to design that idea of your uncle’s that he’s been pushing at family dinners for years).

Don’t forget your own network. Your friends and fellow art school alumni are becoming art directors, creative directors and creative managers, and being on good terms and staying in touch with them is important.

At this point, I hope you’re at least keeping all of your contact information in a spreadsheet, because it can be uploaded to a variety of contact managers.

Get a good contact manager. Many programs are on the market, and even some native computer software will give you good contact management. Track how many times and when you have contacted someone, what they said, if you got work, if you got a referral, etc. When dealing with a client, you should be able to recall how you met, when you spoke and so on, so that they feel a bond, rather than feel like a target.

Some people prefer ACT as their contact manager. It’s good, but the comments following this article will no doubt suggest more management-oriented programs (after berating my negative comments about pony-riding).
Ready, Set… What Next?

What are you selling? What contact information do you have for your top 100? What promotional material can you send them? Are you ready for a follow-up if you do speak to someone? Are you ready for me to stop asking questions and get to it already?


There’s a saying that the School of Visual Arts in New York City once used in its ads: “To be good is not enough when you dream of being great.” We all have dream clients that we would like to add to our portfolio, but either we don’t know how to reach them or have no idea how to even start. Promotion is not a big subject at art school, and I know way too many creatives who stare at the phone and wonder why it’s not ringing.

There are many ways to promote yourself, and as with any product, you have to target your audience as efficiently and as cost-effectively as possible. Let’s go over some problems and solutions.

Seek Out More Work Than You Can Handle

If you want people to know you and consider you a valuable contact, then you must promote yourself. If you look at your career as a business, then as with any business, you must promote it.

What is your brand? Let’s not confuse a logo with a brand. Your logo is the visual “name” by which people identify you—your brand is how people remember you as a business. Is your brand personal? Fun? Wicked? Sweet? Choose wisely because you could be married to your brand forever and ever. Use peers and non-creatives as a sounding board. I had a brand that creatives thought was cool but clients just didn’t get (which I’ll write about in another therapeutic article).

Prepare your brand for all digital and social networks before hitting people with promotions. Essentials these days are a website or blog, Twitter, LinkedIn, Google Apps (if that’s your thing), business cards, stationary and envelopes—your business “front” as it were. Don’t scrimp, and inkjet print your own cards. If you can’t afford what you would spend in an afternoon at the pub for good business cards, then you might want to get a pony and dedicate the rest of your days to riding it.

Rainbow in Breaking Down Doors: Promoting Yourself To Dream Clients
“Welcome to Rainbow Pony World! Nowhere near Earth!”

Identify Top 100 People To Work With

You could crawl from small job to small job and make a fine career out of it… if riding ponies is your thing. But you dream of a certain caliber of work, so why not go after it?

Write a list of 100 people or companies you would like to work with. You might want to put a few people at one of those companies on your distribution list. How do you find those people? Start by researching the company. Go on LinkedIn and gather the titles of those people. If there’s not enough there, click on their profiles to see who they’re connected to, or use the “Also viewed” feature to stalk—er, hunt down the names you need. Use Google or a website such as Hoovers to get addresses and more information about the company.

Your city might have a book that list local companies, which could offer valuable information, as might the business section of your local paper. You have to hunt down names, network, steal, ask stray kids if their mom or dad works with designers, and take advantage of family connections (while still refusing to design that idea of your uncle’s that he’s been pushing at family dinners for years).

Don’t forget your own network. Your friends and fellow art school alumni are becoming art directors, creative directors and creative managers, and being on good terms and staying in touch with them is important.

At this point, I hope you’re at least keeping all of your contact information in a spreadsheet, because it can be uploaded to a variety of contact managers.

Get a good contact manager. Many programs are on the market, and even some native computer software will give you good contact management. Track how many times and when you have contacted someone, what they said, if you got work, if you got a referral, etc. When dealing with a client, you should be able to recall how you met, when you spoke and so on, so that they feel a bond, rather than feel like a target.

Some people prefer ACT as their contact manager. It’s good, but the comments following this article will no doubt suggest more management-oriented programs (after berating my negative comments about pony-riding).

Ready, Set… What Next?

What are you selling? What contact information do you have for your top 100? What promotional material can you send them? Are you ready for a follow-up if you do speak to someone? Are you ready for me to stop asking questions and get to it already?

Alien in Breaking Down Doors: Promoting Yourself To Dream Clients
“The Wright Brothers could never have flown if not for the drive and spirit of innovation among aliens.” (by Speider Schneider)

Even if you have print promotional material, there must be a digital component—something you can attach to an email or link to. Some people think you must have a website, and some think the WordPress platform is best… like, say, Smashing Magazine. Whatever the platform, you should have one. And please get a proper domain so that you’re not advertising rainbowponyrider.wordpress.com; rainbowponyrider.com is so much nicer!

Also, avoid email@yahoo.com for your email address. While many single-person businesses use Yahoo, Gmail, Hotmail and (snicker) CompuServe, don’t be one of them. For a few dollars, you could have a professional email address with your domain name, like name@yourbusiness.com.

Have you accumulated a ton of email addresses? Here’s a fun fact from years of working in a business that depended on communications marketing statistics: only 15% of emails are opened. If you use a mass opt-out email service such as Constant Contact to reach prospects, your costs will go up as your ROI goes down even before hitting “Send.” Still, it can be effective for multiple mailings during a one-month period, which is the membership period of such services.

Sending a link gives the recipient a chore. In addition to everything else they have to do, they must now go through the super-human motion of clicking on your link and waiting for your website to load. As sad as that sounds, this is now the world we know.

Snail mail. Believe it or not, what’s old is new again. People use to rely on source books and mailings for promotion. In the digital age, mail has gotten lighter. Another frightening figure from the marketing statistics folks: 98% of all greeting cards are actually opened (the 2% is for envelopes with printed labels and metered postage). This approach will run you between 50¢ and $1.50 USD per card when all is said and done. You also have to do it every month, but no more than twice a month, or else it’s legally stalking, and your prospects will see it that way. But people love getting cards! I’m constantly told that my cards are up on bulletin boards at companies across the globe. Well worth the money, I say.

Some online printers deliver a good product, leaving you to stuff, address and stamp the envelopes. I use an on-demand printer that comes with a contact manager and allows me to create campaigns and then do bulk mailings using my handwriting font and signature and auto-name-insertion. A few clicks and my 100 cards go off within 24 hours, leaving me with plenty of pony-riding time. Oops!

Rock in Breaking Down Doors: Promoting Yourself To Dream Clients
“I send postcards from vacation spots. What fun for a prospective client!” (by Speider Schneider)

Print-on-demand websites are intuitive, and you can upload images for full-bleed jobs, if you so desire. The fonts on these websites are limited, and you cannot control kerning or leading. Best to create everything in Photoshop and upload it that way.

Advertising And PR… For Free Leer más “Breaking Down Doors: Promoting Yourself To Dream Clients”

Desktop Wallpaper Calendar: October 2010

Desktop wallpapers can serve as an excellent source of inspiration. However, if you use some specific wallpaper for a long period of time, it becomes harder to draw inspiration out of it. That’s why we have decided to supply you with smashing wallpapers over 12 months. And to make them a little bit more distinctive from the usual crowd, we’ve decided to embed calendars for the upcoming month. So if you need to look up some date, isn’t it better to show off a nice wallpaper with a nice calendar instead of launching some default time application?

This post features 45 free desktop wallpapers, created by designers across the globe. Both versions with a calendar and without a calendar can be downloaded for free.

Please notice:

* all images can be clicked and lead to the preview of the wallpaper;
* you can feature your work in our magazine by taking part in our desktop wallpaper calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

So what wallpapers have we received for October 2010?


Smashing Magazine

Desktop wallpapers can serve as an excellent source of inspiration. However, if you use some specific wallpaper for a long period of time, it becomes harder to draw inspiration out of it. That’s why we have decided to supply you with smashing wallpapers over 12 months. And to make them a little bit more distinctive from the usual crowd, we’ve decided to embed calendars for the upcoming month. So if you need to look up some date, isn’t it better to show off a nice wallpaper with a nice calendar instead of launching some default time application?

This post features 45 free desktop wallpapers, created by designers across the globe. Both versions with a calendar and without a calendar can be downloaded for free.

Please notice:

So what wallpapers have we received for October 2010?

Liquifly

Designed by Nicolle Marie from USA.

Liquifly in Desktop Wallpaper Calendar: October 2010

Any Browser

“I just wanna spread the message, “Use any browser, it doesn’t matter. But use the latest version!”.” Designed by Minhaj Mohamed from Sri Lanka.

Any-browser-wallpaper in Desktop Wallpaper Calendar: October 2010

October 2010 Wallpaper

“For October 2010, still with the summer in the head, I wanted to imagine a magic place where I can go sometimes far from work, far from the Earth.” Designed by Benoit Chartron from France.

Wallpaper 99 in Desktop Wallpaper Calendar: October 2010

Creating Graphs With Adobe Illustrator

Office applications are getting very advanced these days offering all sorts of fancy features for data visualization. Graph generation is a standard feature in desktop applications like Microsoft Excel or OpenOffice.org Calc, but it can also be achieved in non-spreadsheet applications like Adobe Illustrator.

If you’re unfamiliar with the process of creating graphs in Adobe Illustrator, this article will help in giving you some insight into the work-flow. It might also help you decide whether Illustrator is the right tool for this kind of assignment.

What Type of Graphs Can You Create in Illustrator?

Adobe Illustrator offers 9 graph types to visualize data. You can choose from the following:

* Column Graph
* Stacked Column Graph
* Bar Graph
* Stacked Bar Graph
* Line Graph
* Area Graph
* Scatter Graph
* Pie Graph
* Radar Graph

There is also the possibility for making combinations from the existing graph types to achieve greater diversity. The only graph type that can’t be combined is the scatter graph.

Creating graphs in Illustrator is as simple as selecting the Graph Tool (from the Tools panel), clicking on your Artboard and dragging and thus forming the area size of the graph. It is also possible to type in the width and height of the graph, which is useful if you want to create graphs with specific dimensions. If you decide to type in the dimensions of the graph, you should bear in mind that those dimensions are applied to the whole graph object (including labels, legend and x, y values), not just the graph chart.

Once you create this graph size and shape you will see that it’s available as a single element (layer) in the Layers panel, usually with the name . This might seem confusing at first but you’ll get used to it very quickly.


Office applications are getting very advanced these days offering all sorts of fancy features for data visualization. Graph generation is a standard feature in desktop applications like Microsoft Excel or OpenOffice.org Calc, but it can also be achieved in non-spreadsheet applications like Adobe Illustrator.

If you’re unfamiliar with the process of creating graphs in Adobe Illustrator, this article will help in giving you some insight into the work-flow. It might also help you decide whether Illustrator is the right tool for this kind of assignment.

What Type of Graphs Can You Create in Illustrator?

Adobe Illustrator offers 9 graph types to visualize data. You can choose from the following:

  • Column Graph
  • Stacked Column Graph
  • Bar Graph
  • Stacked Bar Graph
  • Line Graph
  • Area Graph
  • Scatter Graph
  • Pie Graph
  • Radar Graph

There is also the possibility for making combinations from the existing graph types to achieve greater diversity. The only graph type that can’t be combined is the scatter graph.

Creating graphs in Illustrator is as simple as selecting the Graph Tool (from the Tools panel), clicking on your Artboard and dragging and thus forming the area size of the graph. It is also possible to type in the width and height of the graph, which is useful if you want to create graphs with specific dimensions. If you decide to type in the dimensions of the graph, you should bear in mind that those dimensions are applied to the whole graph object (including labels, legend and x, y values), not just the graph chart.

Once you create this graph size and shape you will see that it’s available as a single element (layer) in the Layers panel, usually with the name <Graph>. This might seem confusing at first but you’ll get used to it very quickly.

The Two Faces of Illustrator Graph Functionality

Creating graphs in Adobe Illustrator is generally a straightforward task but once you get into advanced techniques of graph design, functionality can get quite annoying. You’ll be surprised to discover that basic tasks like scaling and aligning are not instantly applicable on graphs.

Face 1 (Graphs as Objects)

The reason for the initial exceptional lack of functionality of the graph objects in Illustrator is that they are quite simply, ‘objects’. That is to say, they are special groups of sub-elements that have a limited number of attributes the user can control. Graph objects are less flexible than usual Illustrator layers, layer elements and groups of layer elements.

Graph-layers in Creating Graphs With Adobe Illustrator

Here are most of the limitations of Adobe Illustrator’s graph creation functionality that are instantly noticeable:

  • Transform panel is not available for graph objects.
  • No transform controls are available for selected graph objects, thus no instant scaling or rotation is possible.
  • Graph objects cannot be aligned to other objects nor can other objects be aligned to them.
  • Two or more graph objects cannot be grouped.
  • It’s not possible to create a clipping mask from a graph object.
  • A graph object cannot be transformed into a symbol.

Maybe it’s not really wise to initially dig for limitations, as you may get the impression that you’re left with very few things that you can actually do to graphs in Illustrator. Of course, that’s the wrong impression. As noted, creating graphs in Adobe Illustrator is generally a straightforward task.

But through knowing the limitations of your tool can actually help you plan early and work smarter.

Face 2 (working with sub-elements of the Graph Object)… Leer más “Creating Graphs With Adobe Illustrator”

Fashion Websites: Trends, Showcase, Interviews

Fashion is a cultural phenomenon. It’s so often transient, but at the same time one of the most polished mirrors of our time. Unlike other art forms and creative media, fashion is a mode of self-expression for all players involved: the designer makes clothes to express their personality, and the consumer wears them for the same purpose. Fashion also accommodates a number of other creative professions, such as photography, make-up and hair-dressing and Web design.

In this post, we’ll look at websites from the fashion industry. We spoke with two developers whose websites differed in style and implementation to find out the considerations involved in designing a website for a fashion brand. Further below, you’ll find a collection of smart websites done by clothing designers, photographers, make-up artists and other players.

With its look at trends and features in this niche, this post may come in handy for those of you working on a related project or who are simply curious to know how Web design is approached in this industry. Although we won’t discuss the clothing itself, fashionistas may find some use in it, too.


Fashion is a cultural phenomenon. It’s so often transient, but at the same time one of the most polished mirrors of our time. Unlike other art forms and creative media, fashion is a mode of self-expression for all players involved: the designer makes clothes to express their personality, and the consumer wears them for the same purpose. Fashion also accommodates a number of other creative professions, such as photography, make-up and hair-dressing and Web design.

In this post, we’ll look at websites from the fashion industry. We spoke with two developers whose websites differed in style and implementation to find out the considerations involved in designing a website for a fashion brand. Further below, you’ll find a collection of smart websites done by clothing designers, photographers, make-up artists and other players.

With its look at trends and features in this niche, this post may come in handy for those of you working on a related project or who are simply curious to know how Web design is approached in this industry. Although we won’t discuss the clothing itself, fashionistas may find some use in it, too.

Some Trends On Modern Fashion Websites

Looking through the websites discussed in this post, we caught a few commonalities.

Full-Screen Photography

Photography is a powerful tool and is integral to fashion websites. Grasping how photography can impress the viewer and set the mood, many fashion brands use big high-quality pictures to dominate their websites.

Mexx
Like many other fashion websites, Mexx relies heavily on Flash and full-screen images. The design has no special features or gimmick; its uniqueness is in the content itself.

Mexx in Fashion Websites: Trends, Showcase, Interviews

Story-Telling

The fashion industry works hard to create mental associations and set expectations on the part of its audience. The market is saturated, and companies look for new ways to grab the attention of customers. One way a brand does this is by going beyond merely presenting its clothes and instead bringing its merchandise together into a storyline and associating its product line with a certain lifestyle.

Louis Vitton Journeys
Louis Vuitton Journeys is a unique Web campaign sponsored by the famous fashion brand. It features exclusive stories about influential modern personalities. The latest journey, Encounter With Greatness, features quite a smashing get-together of three football legends: Pele, Diego Maradona and Zinedine Zidane. Unique content and interactivity through Facebook integration make the website an exciting destination.

Louis-vuitton in Fashion Websites: Trends, Showcase, Interviews Leer más “Fashion Websites: Trends, Showcase, Interviews”

Does The Future Of The Internet Have Room For Web Designers?

It seems that new posts about what the Internet has in store for us down the road pop up every week or two. Some propose that the Internet will deliver more of the same, but different somehow (it’s usually ambiguous just how), while others propose such radical changes that it’s hard to believe they could ever happen. And the truth is, none of us really know what will happen with the Internet in 10 or 15 years.

After all, it was only a little more than 15 years ago that Clifford Stoll wrote the now-infamous “The Internet? Bah!” post (subtitled: “Hype Alert, Why Cyberspace Isn’t, and Will Never Be, Nirvana”). In that post he detailed why a lot of things just wouldn’t happen online but most of which are now commonplace.

As web designers and developers, what the future holds for the Internet is imperative for our livelihoods. If the Internet has radical changes in store for us, we need to understand how they might effect what we do to earn a living and what we’ll need to do to adapt and keep pace — if that’s even possible.


By Cameron Chapman | http://www.smashingmagazine.com

It seems that new posts about what the Internet has in store for us down the road pop up every week or two. Some propose that the Internet will deliver more of the same, but different somehow (it’s usually ambiguous just how), while others propose such radical changes that it’s hard to believe they could ever happen. And the truth is, none of us really know what will happen with the Internet in 10 or 15 years.

After all, it was only a little more than 15 years ago that Clifford Stoll wrote the now-infamous “The Internet? Bah!” post (subtitled: “Hype Alert, Why Cyberspace Isn’t, and Will Never Be, Nirvana”). In that post he detailed why a lot of things just wouldn’t happen online but most of which are now commonplace.

As web designers and developers, what the future holds for the Internet is imperative for our livelihoods. If the Internet has radical changes in store for us, we need to understand how they might effect what we do to earn a living and what we’ll need to do to adapt and keep pace — if that’s even possible.

The Future is Content and Data

Look at your mobile phone. If you’re like most tech-savvy consumers, you’ve likely got a smartphone of the Apple or Android variety (or maybe a Blackberry, especially if you’re working in the corporate world). Most of us use our smartphones on a near-constant basis doing everything from checking email to working on projects to entertaining ourselves. How much of all that do you do in your phone’s browser?

The answer is probably “not much”.

We use an app to check email. We use the Facebook app for status updates. We use Twidroid or TweetDeck or the official Twitter app for tweeting. We use a YouTube app to watch videos. We use the Pandora or Last.fm apps for streaming music.

Prism in Does The Future Of The Internet Have Room For Web Designers?

Mozilla Prism is an application that lets users split web applications out of their browser and run them directly on their desktop. Is this the future of mobile applications?

It’s likely a similar scenario on our desktop or laptop computer. We use apps for a lot of our common Internet-based activities. We even have options to create our own apps with single-site browsers (like Fluid or Prism). And Google’s Chrome OS is just around the corner with devices already planned to use the web-based OS. Leer más “Does The Future Of The Internet Have Room For Web Designers?”

Turning All Clients Into Dream Clients (or Common Client Difficulties)

Clients can be tough… real tough. Working side by side with some clients can be an agonizing experience — an experience so painful that you often wonder what exactly you have gotten yourself into. On the other hand, some clients are an absolute dream to work with. Every day spent working with them reminds you why you became a Web designer and just how enjoyable your job actually is. The question then is, how do we take our most difficult clients and turn them into dream clients? The answer may be easier than you realize.

Clients often require a bit of hand-holding. When dealt with correctly, this is not too overwhelming; it just calls for some simple guidance. You may be surprised by how a few extra emails here and there can make a world of difference. Outlined here are some of the most common client difficulties our Twitter followers have run into and how to best resolve them.
Common Client Difficulties
Doesn’t Know What They Want

Tweet-1 in Turning All Clients Into Dream Clients (or Common Client Difficulties)
“They have no idea what they want!” (@daveom)

More often than none, clients have no idea what they want and look to you for your expertise. For a designer, it can be annoying. Then again, how many times have you been to a restaurant and had no idea what to order and asked for a recommendation? Clients are no different. They are looking for recommendations, not fixed solutions. Talk it over with them, get all the details, and then start making educated recommendations. As ideas start to bounce around, one will hit home and provide a base from which to work.

It takes a great deal of patience, but getting all of the necessary information and building a solid starting point will not only help you throughout the project, but also reassure the client that they made the right decision.
Feels Left Out of Process

Tweet-2 in Turning All Clients Into Dream Clients (or Common Client Difficulties)
“They never feel ‘in the loop’ — so to solve this, I try to call them each week for an update and a chat.” (@jaaved)

Communication is the foundation of any successful client relationship. When this foundation starts to slip, the relationship begins to crumble. Starting a project on the same page as the client is easy, but staying on the same page throughout the project requires tenacity.

At the beginning of each project, create a calendar outlining a timeline of events for the project. The calendar should explain when the client can expect certain tasks to be completed and when they will need to provide certain information. A calendar is just the start to keeping the client in the loop; it should be followed up with regular emails and phone calls. If you are making a change that will take up to a day or two, send a quick email to let the client know. A quick email takes only a minute to send, and it assures the client that you are indeed working. Simple and small efforts such as these keep the client happy and informed of the entire process.


Clients can be tough… real tough. Working side by side with some clients can be an agonizing experience — an experience so painful that you often wonder what exactly you have gotten yourself into. On the other hand, some clients are an absolute dream to work with. Every day spent working with them reminds you why you became a Web designer and just how enjoyable your job actually is. The question then is, how do we take our most difficult clients and turn them into dream clients? The answer may be easier than you realize.

Clients often require a bit of hand-holding. When dealt with correctly, this is not too overwhelming; it just calls for some simple guidance. You may be surprised by how a few extra emails here and there can make a world of difference. Outlined here are some of the most common client difficulties our Twitter followers have run into and how to best resolve them.

Common Client Difficulties

Doesn’t Know What They Want

Tweet-1 in Turning All Clients Into Dream Clients (or Common Client Difficulties)
“They have no idea what they want!” (@daveom)

More often than none, clients have no idea what they want and look to you for your expertise. For a designer, it can be annoying. Then again, how many times have you been to a restaurant and had no idea what to order and asked for a recommendation? Clients are no different. They are looking for recommendations, not fixed solutions. Talk it over with them, get all the details, and then start making educated recommendations. As ideas start to bounce around, one will hit home and provide a base from which to work.

It takes a great deal of patience, but getting all of the necessary information and building a solid starting point will not only help you throughout the project, but also reassure the client that they made the right decision.

Feels Left Out of Process

Tweet-2 in Turning All Clients Into Dream Clients (or Common Client Difficulties)
“They never feel ‘in the loop’ — so to solve this, I try to call them each week for an update and a chat.” (@jaaved)

Communication is the foundation of any successful client relationship. When this foundation starts to slip, the relationship begins to crumble. Starting a project on the same page as the client is easy, but staying on the same page throughout the project requires tenacity.

At the beginning of each project, create a calendar outlining a timeline of events for the project. The calendar should explain when the client can expect certain tasks to be completed and when they will need to provide certain information. A calendar is just the start to keeping the client in the loop; it should be followed up with regular emails and phone calls. If you are making a change that will take up to a day or two, send a quick email to let the client know. A quick email takes only a minute to send, and it assures the client that you are indeed working. Simple and small efforts such as these keep the client happy and informed of the entire process. Leer más “Turning All Clients Into Dream Clients (or Common Client Difficulties)”