Archive for July, 2012

Adopting A Responsive WordPress Theme Is More Than Install-And-Go


  

As iOS, Android, and Windows 8 take the Web to smaller screens, designers are adopting techniques to make their websites usable on handheld devices.

Responsive Web designs present different formatting and layout to suit the device on which their pages are displayed. Browsers choose the appropriate styles on page load, freeing website owners from having to maintain different sets of pages for different display scenarios.

Adopting A Responsive WordPress Theme Is More Than Install-And-Go

The most common responsive method is to use CSS media queries to serve different style sheets (or parts of style sheets) based on the number of pixels available. Most often, this is applied to handheld devices such as smartphones, but it could be applied to 13-inch laptops, 30-inch TVs or Kindle-sized readers. Responsive designs respond to their environment.

No Shortage Of Quick Fixes

The term “responsive design� is only two years old, but website owners can choose today from many mobile and widescreen themes for popular content management systems. Third-party developers have created paid and free themes that adapt based on browser width for WordPress, Drupal, Joomla and ExpressionEngine. At the time of this writing there are:

Designers handy with CSS can also find a few do-it-yourself frameworks. But responsive themes are as varied as the problems they are meant to solve. Not all are created with the same technique, features or attention to detail. Aesthetics aside, how should someone choose a theme?

How Do Responsive Themes Perform?

The more files a theme requires, the more time a server must dedicate to retrieving those files. While milliseconds add up to a slower server, kilobytes are the user’s problem. Especially on mobile, where surfing via cell networks costs money, fewer kilobytes make for a better theme.

Aside from using media queries, many themes use variations of techniques to respond to browsers. I’ve tested 40 responsive themes on WordPress.com, comparing them to the stock Twenty Eleven and Twenty Ten themes.

Chart comparing kilobytes to files used for responsive themes.
The weight of each theme and supporting files in kilobytes.

The chart above shows that:

  • The number of files that a theme loads and the theme’s weight in kilobytes have no direct relationship;
  • With few exceptions, most themes make 25 requests or fewer;
  • WordPress’ stock themes perform very well, but a few other themes provide responsive capability and better performance.

Bear in mind that these are empty themes, measured before any content or modifications have increased their load. Because data costs money for people who are accessing the Web through cellular networks, themes that require fewer downloads per page load are more likely to earn repeat visits. Of the themes sampled:

  • Only one theme did not use CSS media queries. This theme’s unusual method was to detect page width with jQuery and then change the body class, which in turn would change the layout with animated transitions. The extra time taken to load and implement JavaScript compromised the goal of responsiveness.
  • More than half had three break points: mobile (480 pixels or less), medium (481 to 1024 pixels) and wide (1025 pixels or more). The medium-sized layouts were most often measured with percentages, ems or min- and max-width, rather than strictly by number of pixels.
  • Left-to-right layouts on wide screens always became top-to-bottom layouts on mobile. That is, the left-most column in a widescreen layout would always appear at the top of the page in a mobile layout, regardless of its width or the type of content. Likewise, right-hand columns would become footers in mobile layouts. This means that the content in your left-most column should not discourage users from scrolling down when it’s formatted for mobile devices.
  • All mobile designs had 10 to 20 pixels of horizontal margin. None deliberately allowed horizontal scrolling or used app-simulating frameworks such as jQuery Mobile.
  • None provided in-page navigation.
  • Two themes used select lists for navigation in their mobile layouts. None used multi-level navigation.
  • Loading a page with three paragraphs of placeholder text, the themes averaged 306.57 KB per page load and 25.4 resources retrieved (including images, CSS files, JavaScript files and the like).
  • The lightest theme weighed only 57.11 KB before the content itself (text and images) loaded. The largest weighed 1382.4 KB before the content loaded.

Remember that screen width does not necessarily equal browser width. Most themes are not built on the assumption that users will have their browser windows open as big as possible; rather, their layouts are designed for screen widths well under common sizes.

Chart comparing common screen sizes to frequently-used web layouts.
Most themes are well under the most common screen widths. The wider the screen, the less likely a user will expand their browser to fill it.

As seen in the graph above, most themes will use max-width media queries to resize layouts when browsers reach 1280, 800, 767 and 480 pixels wide. But most screens surveyed by Lifehacker, StatCounter and W3 Counter start at 1280 pixels wide.

Picking A Theme That Reflects Your Priorities

Making a website responsive is more than about varying the number of columns on a page. The same critical questions emerge for all mobile-friendly websites, regardless of CMS.

  • Does the project merit a mobile layout?
    Increasingly, the answer is yes. But the march towards mobile doesn’t mean that every website should follow suit. Pages that contain complicated tables, multi-month calendars, detailed images, complex navigation and other content unsuitable for small screens could negate any benefit offered by responsive designs. “Can I?� and “should I?� are two different questions.
  • Would the website benefit from mobile-first thinking?
    Designing a website to be mobile forces the content editors to answer hard questions. A screen measuring 320 pixels wide has no room for excess. This brings the design into focus, forcing you to eliminate distractions from whatever the website is meant to convey.
  • How many steps do we need?
    Responsively designed websites often rely on the width of the device on which they’re being viewed. But there’s more to it than asking “Mobile or not?� Responsive designs must address not only how a website handles on narrow screens, but also when wide becomes too wide. But a better option would be to consider using a device-agnostic approach to Web design focusing on content rather than device properties.
  • How do the layout and formatting change?
    Deciding which elements on a given page users should see first, second and third will affect how the widescreen layout functions. For example, the font in headings in the widescreen layouts could be three, four or five times larger than the body copy, whereas giant headings are cumbersome on tiny screens.
  • What should a mobile page not show?
    Multiple columns encourage a hierarchy of information: primary content that is unique to each page, and secondary content (often relegated to sidebars) that appears on more than one page. But mobile design makes multiple columns difficult to pull off. If the secondary content is unnecessary, how should it disappear? If it’s important, how does one design it without letting pages run longer than users are willing to scroll? (A good rule of thumb is that if an element does not support the page’s title, then it is not primary content.)

Think Beyond The Theme

Having a responsive theme does not guarantee a good mobile user experience.

Designing for mobile is not just about cutting material, but also about planning for limited attention. By nature of the medium, mobile users absorb information in limited chunks. Long pages can work if they’re divided into phone screen-sized sections. Unlike widescreen users, mobile users are more inclined to scroll down “below the fold� (i.e. below what they first see when the page loads).

Consider higher-contrast colors for mobile — particularly, the contrast between the body text and the background — for improved legibility outdoors.

Extensive navigation bars with sublevels and sub-sublevels are impractical on mobile devices. Offering search functionality, creating pages dedicated to navigation, and flattening the website’s structure are common solutions; anything that reduces the number of taps between pages helps.

When To Consider A Separate Mobile Website

Responsive designs do more than make a website work well on a variety of screen sizes; they also force the owner to make their website easier, more focused and faster. But they’re a tool, not a requirement. Adaptive layouts and media queries aren’t always the best answer for mobile design problems. When big content simply doesn’t fit on small screens, maintaining a supplemental website would outweigh the benefit of having one website that serves many audiences. The key is to create a companion website that carries essential information organized for mobile use — and then find out what mobile users are missing.

Your website could warrant a separate mobile version if:

  • You find yourself creating duplicate pages for mobile users on the same website;
  • Short pages that look great on mobile phones don’t take advantage of large screens;
  • You plan to phase out the widescreen layout in favor of a more streamlined user experience.

Other Resources

You may be interested in the following articles and related resources:

  • Mobile First, Luke Wroblewski
    This book by the former Yahoo designer discusses the reasons why thinking small from the start makes more sense than cramming later.
  • “Supporting Multiple Screens,â€� Android Developers
    Google’s overview of screen sizes, pixel density, and how (and why) to achieve density dependence.
  • “Platform Characteristics,â€� iOS Developer Library
    Apple’s guidelines on graphics and presentation for apps and Web content for iOS.
  • “Responsive Web Design,â€� Ethan Marcotte
    This article examines the benefits of, and the mental shift required for, Web designs that respond to the user’s browser.
  • “Chrome Developer Tools: Network Panel,â€� Google Developers
    Shows how to activate and use the inspector in Chrome. It also works for most Webkit-based browsers.
  • “Screen Resolution ≠ Browser Window,â€� Chris Coyier
    An explanation of how screen width is a deceptive metric, and what you can do about it.
  • jQuery Mobile
    A framework that simulates app behaviors with JavaScript, CSS and HTML5.
  • Less Framework
    A straightforward desktop-to-mobile CSS grid, with four specific steps.
  • Whiteboard Framework for WordPress
    A barebones theme that serves as a starting point for design, rather than a finished product to be tweaked.
  • Omega, Drupal theme
    “The Omega Drupal 7 base theme is a highly configurable HTML5/960 grid base theme that is 100% configurable.�

(al) (jc)


© Ben Gremillion for Smashing Magazine, 2012.


Creativity With Skill: Showcase of Hand-Drawn Elements in Web Design


  

With the advent of technology, more traditional hand-drawn art has taken something of a back seat. Of course, you do find masterpieces, both classic and modern, in art galleries. But in general, many of the hobbyist artists among us have given up pencil and brush in favor of Photoshop and, at times, cameras.

In this article, we take a look at innovative usage of hand-drawn elements in web design. The pieces in this round-up are varied; some are minimal and clean, whereas others are mere sketches, but all show both creativity and skill. So without further ado, let’s take a look at some awesome hand-drawn pieces that have been incorporated into web design.

Creativity With Skill

1. XHTML Cafe

XHTML Cafe showcases a unique and intuitive design that appears to be just out of a comic book. The logo is displayed in the center, and since the name has “cafe” in it, the image portrayed is that of a cafe. If you look closely, you’ll see that the logo has the navigation menu to its sides, and the window shows “Now serving: WordPress Themes”. Plus, the specials’ menu-board on the outside mentions ‘dishes’ such as XHTML and CSS.

XHTML Cafe

2. The Neighbourhood

The Neighbourhood has kept the drawn elements in its header, where you see drawings of kids playing, tree houses and a rainbow. Perhaps something reminding us of an idealized neighborhood! If you scroll down, you’ll find a gorgeous and nifty website with a blog.

The Neighbourhood

3. Odosketch

Odosketch is a product from Odopod that lets you create, well, sketches! The website shows featured and latest sketches, but the hand-drawn elements are best visible in the clouds on the header and the logo, which is followed by a paper plane.

Odosketch

4. Natrashka

Natrashka is a well designed portfolio. You can see the imaginative inclusion of the drawings in the boy-caricature and certain other graphics as you scroll down the page.

Natrashka

5. Mel Kadel

Mel Kadel uses a colorful background for the homepage, and if you visit the Drawings section, you will be presented with some awesome artwork.

Mel Kadel

6. Me & Oli

Me & Oli is a garment shop, and many of the drawings used in the website design are both inspiring and creatively included.

Me & Oli

7. Li Chin’s Showcase

While Li Chin has moved the actual website to a different URL, you can see the gorgeous drawing on this page, right next to the text.

Li Chin's Showcase

8. Legwork Studio

Legwork Studio uses drawings in a clever manner. As you keep scrolling down, you’ll be greeted with hand-drawn items from daily life (i.e. cameras, scissors, brushes, light bulbs, coffee mugs, remote controls, and so on).

Legwork Studio

9. Kyle Steed

You can see drawn caricatures both in the header and footer of Kyle Steed’s website. Also, don’t forget the background text in the header describing Steed and his work.

Kyle Steed

10. Kutztown University (Communication Design Department)

What better way to create a website for a design department than using mind-blowing design in the website itself? Kutztown University’s Communication Design Department presents a no-nonsense homepage. Complete with links in the center and a stunningly beautiful drawing taking up rest of the page.

Kutztown University (Communication Design Department)

11. Kinetic V5

This is one website you HAVE to visit, regardless of whether you need science lessons or not. Simply keep scrolling down, and you’ll be treated with one of the most unique combinations of website design and hand drawings.

Kinetic V5

12. Kevin Monger

Kevin Monger uses drawings all throughout his portfolio, and intersperses them throughout the site to complement or highlight other elements.

Kevin Monger

13. Just Dot Media Services

Just Dot Media Services makes judicious usage of drawings in their website. You can see caricatures and cartoons associated with each text or portfolio segment.

Just Dot Media Services

14. STUDIOIMG.COM

This is another site that made it into the showcase with its stunning and large background image that is hand-drawn.

STUDIOIMG.COM

15. Miki Mottes

Miki Mottes uses cute drawings throughout the website. Simply head to the Portfolio section and treat yourself to amazing creativity.

Miki Mottes

16. Lucama

Lucama presents abstract and, dare I say it, pseudo-surreal artwork. As you click on the links in the header, the main picture on the page slides to make room for another, and so on.

Lucama

17. Esteban Muñoz

This website shows good drawings in the footer, which move as you move the cursor towards or away from them.

Esteban Muñoz

18. Boompa

If you like colors and have an appetite for websites with a beautiful background, you should check this one out. The website overall is just too beautiful to resist, all thanks to the wonderful background.

Boompa

19. Jesse Willmon

Looking at the screenshot itself, you can conclude that Jesse Willmon’s website makes prolific use of drawings. None of the drawings are anything that out of the ordinary, but they do portray simplicity done right.

Jesse Willmon

20. It Looks Good

The older version of It Looks Good uses several cartoon-type drawings against a dark setting, and the navigation related ‘heads’ are in red. The newer version, however, does away with this extravagance, but retains the cartoon ‘head’.

It Looks Good

21. Hugs for Monsters

Hugs for Monsters is the portfolio of Joe Lifrieri. The header, as shown in the screenshot below, features good drawings and is definitely worth a look, be it for inspiration or simply fun.

Hugs for Monsters

22. Harry Ford

Harry Ford’s website has a drawing of a man, presumably Ford himself. If you look closely, you’ll notice that social media links are in his hair!

Harry Ford

23. Hannah’s Leben

This website showcases some amazing artwork and hand-drawn elements to complete the look, along with some wonderful typography.

Hannah's Leben

24. Draw for Joy

Draw for Joy — doesn’t the name speak to you? The website is a gallery of artworks, some of which are really nice to look at. Needless to say, this is a good pick for showing hand-drawn elements in web design.

Draw for Joy

25. Bio-Bak.nl

Here, oddly enough, your mouse cursor is followed by an arm. However, the typography is interesting, and the two flying demons clearly show the creator’s drawing talent.

Bio.Bak.nl

To Sum it Up…

With that, we come to the end of this showcase. What do you think of the above hand-drawn elements being worked into the web designs the way they were? Do you feel any of them hurt the design more than helped it? Feel free to share your thoughts in the comments below!

(rb)


Playful UX Design: Building A Better Game


  

I sincerely believe that the user experience community should add game design to its toolbox of competencies. If we’re truly committed to creating satisfying user experiences, then there’s no reason why games, which can satisfy people so richly, should be excluded.

Operating successfully in the games domain means learning a new set of competencies, and I don’t want to oversimplify the challenges of designing high-quality game experiences. However, if you’re in a position to jump in and start designing, then I can at least offer a primer to help you steer clear of some of the most common mistakes.

1. Games Should Be Games First

Trading off the quality of the player experience in favor of some real-world objective is always self-defeating. This is the recurring problem with “gamified� designs, which too often just cynically tack points and leaderboards onto a product that is fundamentally gameless. First and foremost, a game needs to be enjoyed.

Schwab MoneyWise’s It’s Your Life game has a noble mission: to convince people to save more money for retirement and other long-term objectives. It’s Your Life presents players with a number of choices between spending and saving money over the course of a simulated lifetime. At the end, players get a letter grade on how well they did.

A screen from Schwab's It's Your Life game
At each step in Schwab’s It’s Your Life game, the choice that will lead to a winning outcome is pretty obvious.

The problem is that the designers were much more interested in hammering home their message than creating an actual game experience. If you want to win the game, then the right choice each step of the way is to save your money and not spend any of it. Ever. On anything. You can earn an A+, the highest possible score, if you:

  • Skip college,
  • Never move out of your parents’ house,
  • Never get married,
  • Never have children,
  • Never travel or take any vacations,
  • Work indefinitely past the age of 65,
  • Die alone with a lot of money and no one to leave it to.

I’m sure the designers reasoned that someone playing through the scenarios would elect to do meaningful things with their life, but they set up the scenarios so that doing nothing with one’s life while saving vigorously would be the surest way to win. Even though It’s Your Life is packaged as a game, the designers didn’t commit to it being experienced as a game.

2. Play Test, Play Test, Play Test

Games are highly dynamic experiences. The flow of events changes from moment to moment, and each decision a player makes can lead to a multiplicity of outcomes. Most games are also programmed with an element of randomness, so a player never has quite the same experience twice. Multiplayer games throw even more unpredictability into the mix.

As a result, the designer directly controls not the gameplay, but rather the underlying system in which play unfolds. Without actually seeing the game in action, you cannot reliably anticipate how it will work. Mike Ambinder, an experimental psychologist at game developer Valve, puts it in scientific terms: “Every game design is a hypothesis, and every instance of play is an experiment.�

Be prepared to put your game under the microscope again and again, and to adapt the design to make it more enjoyable.

3. Games Don’t Have To Be For Kids

With a large market catering to them, kids have the latitude to be very discerning consumers of games. Marketing campaigns pushing big-budget titles already crowd out one another, so you’ll find that just getting a young gamer’s attention is a tremendous challenge. You can’t assume that kids will want to play your game just because it’s a game.

And these days, kids are the minority of people who play video games. Eighty-two percent of gamers are over the age of 18, and 29% are 50 and older. Grown-ups are sometimes more receptive to playing games outside of the mainstream, and they have more disposable income to spend on games (i.e. if you plan to sell your game).

Only 18 percent of game players in the U.S. are under 18 years old
Kids under 18 represent a small minority of game players.

This is not to say that kids cannot make up a portion of your audience. But if your game is clearly intended for young children — as announced in breathless starbursts, reading “Hey, kids!� and “Super-cool!� — then you will turn off the larger segment of gamers. So, consider targeting your game to an older age group while keeping it accessible to a broad range of ages.

4. Action Can Be Boring

Call of Duty: Modern Warfare 3 is an amazing action game. It also took years to make and a team comprising dozens of designers, artists and engineers at a cost of many millions of dollars. You’re probably not making Call of Duty.

It’s very difficult to sustain adrenaline-pumping excitement for long. If you do choose to make an action-based game on a small scale, you’ll find that you’re limited to very simple and short-lived scenarios, such as racing a car, throwing a basketball or shooting a spaceship. Taken on their own, these types of experiences tend to grow tiresome quickly.

You’ll find a lot of creative opportunity in games that make the player think through interesting choices instead of executing twitch responses. The card game Hearts, for example, is all about choices. Which three cards should I pass to my opponent? Should I play a high card or a low card? If I play clubs one more time, will someone else stick me with the queen of spades? Should I shoot for the moon, or will that prove self-destructive? Each choice is evaluated from one trick to the next, depending on the changing conditions of your hand and on new information about what other players have done. Even though Hearts can be a fairly long game, it holds the players’ interest without any laser blasters or lava levels.

The card game Hearts
Hearts creates excitement by presenting players with a lot of interesting choices.

5. Fit The Game Into The Player’s Lifestyle

Think about the real-life contexts in which people will play the game. Start the design process by asking:

  • Who are your players?
  • How much time do players have to give to the game, and how much of that time will your players actually be willing to give?
  • Will your players need to take a break from the game and continue it later?
  • Where will your players be when they’re playing the game?
  • What kind of hardware, software and Internet access will be available to your players?

Unisys developed a series of online games for the company’s sales team to send to customers as holiday greetings. A customer would receive a link by email to an online holiday card with a personal message from the salesperson. The card would then open into the game, branded with Unisys’ logo.

Screenshot of the Unisys mini-golf game
Unisys’ mini-golf game was designed to be a quick, nonintrusive diversion from the workday.

Because the players were receiving these emails at work, the games couldn’t require a significant investment of time to reach the end, so all of them were designed to last less than five minutes. And because many players would be accessing the game while sitting in a cubicle, with their computer speakers probably turned off, the few sounds in the games were not made essential to the experience.

FarmVille cleverly makes itself adaptable to the player’s lifestyle. Players need to dedicate only a few minutes at a time, during which they can plant seeds for crops that take different amounts of real-world time to harvest. Raspberries take just two hours, so they’re useful when the player is able to check in several times a day. Eight-hour pumpkins fit in well just before and after a workday. Artichokes take four days to harvest — better for players who are able to check in only now and then. These staggered growth rates allow the time commitment to be made on the player’s own terms.

Different crops mature at different rates in Farmville
The staggered harvest times for crops in FarmVille allow players to decide how much gameplay they can fit into their lives.

6. Create Meaningful Experience

Players have to invest their time, concentration and problem-solving abilities to the challenges that a game throws at them. There should be a point to these efforts, a payoff for their investment. When the game ends, players should come away feeling that the experience was meaningful.

A great example is the card game Killer Bunnies, in which success is ultimately determined by a card picked randomly from the deck. The player who holds the match for that card (the “magic carrot�) is declared the winner. No player has any control over which card is picked; the selection is completely random. But the gameplay does give players some control over which matching cards they hold. Players compete for carrot cards over the course of the game, and shrewd players will work to hold the greatest number of them before the game is over. The game says a lot about the players’ mastery of the strategy, tolerance for risk and skill at reading other people. Players come away from the game knowing that they had control over their chances of success, which makes the experience meaningful.

Picture of the carrot cards in Killer Bunnies
Players exercise some control over the outcome of Killer Bunnies by acquiring carrot cards, increasing the probability that they’ll capture the randomly selected magic carrot.

7. Don’t Cheat

Because video game rules are enforced inside the black box of the computer’s circuitry, there’s a temptation among designers to take shortcuts by letting the game cheat. Don’t give in to that temptation. Players will be able to tell when a game is cheating, and they will resent it.

Suppose you’re designing a blackjack game that matches a player against a computerized dealer. As the designer, you need to write a script to control the dealer’s actions. You want the dealer to be a little hard to beat but not impossible. One easy way to create challenge would be to let the script choose which card from the deck is drawn next. You would then program the dealer to pick a card that either wins or loses, and put in a randomizing function so that two out of every three times it picks a winning card. This also creates an easy way to allow players to change the difficulty, so that on a harder setting the dealer will pick a winning card four out of every five times, while on an easier setting it will win just one out of every three. How would anyone even know you’re cheating?

After playing the game a few times, you’ll see how. The dealer will do seemingly irrational things, such as hitting on 20 and magically drawing an ace. The deck will not seem random, because certain cards will tend to show up early and others will show up only after those preferred cards have been drawn. After several play-throughs, these patterns will become obvious. When players realize that a game is cheating, they’ll make the ultimate winning move by turning it off.

8. Skip The Manual

The best way to convince people that a game is worth playing is by letting them jump in and try it out for themselves. Presenting written instructions at the beginning of every new game merely creates a barrier to entry at the very time when you want to be most accommodating of players. Instructions can also become a crutch, used to justify unconventional and unintuitive choices in the interface.

The best place to teach people how to play a game is right there in the game itself. Tutorials have become one of the most familiar patterns in games. Ask yourself, “What’s the smallest amount of information the player needs to make the first move?� Then provide nothing more than that; you can get to the second move when the time comes. Playing is learning. If people are interested in the game, they’ll be motivated to fill in the blanks themselves by playing it.

Screen from Kanyu
In Bri Lance’s game Kanyu, step-by-step instructions on how to play are cleverly incorporated into the game’s storyline.

9. Make The Game Make Sense

Players need to understand why things happen in the game in order to feel that they’re in control. In game design, a sensible experience relies on some mutual understanding between the designer and the player:

  • When the player loses, the reason they lost should be clear. If it’s not, then the player won’t be able to get better at the game by avoiding the same mistake in future.
  • When the player wins, the reason they won should be clear. If not, then replicating the victory will be hard.
  • Every effect should have a clear cause. When something happens, the player should be able to see why it happened.
  • The object of the game should be clear. The player needs to know what they’re working toward.
  • The player should always know what actions may be performed. At every moment, visible or aural cues should be provided to let the player know what they can do.

10. Make It Easy To Try Again

Step back and think about the game as a discontinuous and iterative experience. When a player loses, cycling back into the game to try again should be instant and effortless. Even large commercial games with multimillion-dollar development budgets make the mistake of forcing a lengthy loading screen into that anxious period between a player’s loss and a second attempt. Stretching that space of time to the second, third or twentieth go-round inevitably tries the player’s patience. Games such as Braid and Prince of Persia: The Sands of Time take a clever route around this problem by allowing players to rewind time to a safe point before their losing moment.

Playing To Your Strengths

These 10 guidelines will help you get started, but plenty of challenges lie ahead as you set about designing and developing your game, and you’ll need to learn how to manage them as they come up. One last piece of advice is to play to your strengths. If you have a background in designing conventional user interfaces, by all means use the skills and techniques that you gained from it. Wireframing, user testing, rapid prototyping, storyboarding, flow diagramming and other core skills all translate well to game design and can help you pull through the inevitable rough patches. When a game design issue confounds you, trust your instincts and ask how you would handle a similar problem outside of the context of the game. More often than not, you’ll point yourself in the right direction.

(al)


© John Ferrara for Smashing Magazine, 2012.


World of Imagination: Gallery of Fantasy Digital Drawings


  

Art is a powerful tool that can instantly transport you into another world. A world born of imagination and pure creativity. So many digital artists today specialize in bringing these worlds of fantasy into our world. Making them tangible and accessible, if only through the art they produce. It is these types of fantasy digital drawings that we are focusing our inspirational spotlight on today.

Below we have amassed a brilliant sampling of this vibrant artistic community to help inspire you and get you in a creative mood. Tour world after world of imagination via this impressive gallery of fantasy digital drawings.

World of Imagination

Sew Closed My Soul by DestinyBlue

Creation by sakimichan

The silent wanderer by alexiuss

A Once and Future King by alicexz

grave by sandara

Reach for the Stars by ANTIFAN-REAL

Ocean of my sorrow by sionra

Paramnesia by JenniferHealy

Hallelujah City by Novum1

The Blessing by Ironshod

Confession tower by RaVirr17

neverwonder station . by Megatruh

the Lunar Moth by Alicechan

Silva by anndr

Dragon Light by jjpeabody

fear of fire by ryky

At the edge of the water by thienbao

Zodiac Dragon . Cancer by The-SixthLeafClover

Beast Tracker by JasonEngle

Door to Nothingness by velinov

Ain’t No Mercy by fdasuarez

A NICE DAY IN HELL by uriska

Last Piece by DestinyBlue

IFX .Fairy. by sakimichan

Jigoku by sionra

Architectural worlds by ANTIFAN-REAL

Witness by JinniferHealy

Noble Dragon by Ironshod

weatheria . by Megatruh

Fairies by Alicechan

crown of horns by anndr

Red Haired Fey by thienbao

Moto Rani by JasonEngle

Talrand Sky Summoner by velinov

Tainted love by fdasuarez

Back to the Real World

Now that the showcase is over, and we are turning back to the real world, which of the images from the showcase have inspired you the most? Which ones are have made the biggest impression on you? Share your thoughts in the comment section.

(rb)


World of Imagination: Gallery of Fantasy Digital Drawings


  

Art is a powerful tool that can instantly transport you into another world. A world born of imagination and pure creativity. So many digital artists today specialize in bringing these worlds of fantasy into our world. Making them tangible and accessible, if only through the art they produce. It is these types of fantasy digital drawings that we are focusing our inspirational spotlight on today.

Below we have amassed a brilliant sampling of this vibrant artistic community to help inspire you and get you in a creative mood. Tour world after world of imagination via this impressive gallery of fantasy digital drawings.

World of Imagination

Sew Closed My Soul by DestinyBlue

Creation by sakimichan

The silent wanderer by alexiuss

A Once and Future King by alicexz

grave by sandara

Reach for the Stars by ANTIFAN-REAL

Ocean of my sorrow by sionra

Paramnesia by JenniferHealy

Hallelujah City by Novum1

The Blessing by Ironshod

Confession tower by RaVirr17

neverwonder station . by Megatruh

the Lunar Moth by Alicechan

Silva by anndr

Dragon Light by jjpeabody

fear of fire by ryky

At the edge of the water by thienbao

Zodiac Dragon . Cancer by The-SixthLeafClover

Beast Tracker by JasonEngle

Door to Nothingness by velinov

Ain’t No Mercy by fdasuarez

A NICE DAY IN HELL by uriska

Last Piece by DestinyBlue

IFX .Fairy. by sakimichan

Jigoku by sionra

Architectural worlds by ANTIFAN-REAL

Witness by JinniferHealy

Noble Dragon by Ironshod

weatheria . by Megatruh

Fairies by Alicechan

crown of horns by anndr

Red Haired Fey by thienbao

Moto Rani by JasonEngle

Talrand Sky Summoner by velinov

Tainted love by fdasuarez

Back to the Real World

Now that the showcase is over, and we are turning back to the real world, which of the images from the showcase have inspired you the most? Which ones are have made the biggest impression on you? Share your thoughts in the comment section.

(rb)


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress