New Work: The Universes of Fringe — an interactive data-visualisation tool that features all the facts, figures and phenomena behind season 4 of the show. Conceived by regular partners-in-crime Glass Eye, I was responsible for the art direction and GUI design specifications of the site. Source

Virtual book. Fully three-dimensional interactive model of the book “The Russian Album. Russia’s interior photographs of Fritz von der Schulenburg, “was prepared for the reception, held in celebration of the 10th anniversary of the magazine AD in Russia. Guests can browse through the book presentation and view the photos in a format much more paper edition. 3D Interactive Book “Russian Album. Russian Interiors Photographed By Fritz Von Der Schulenburg” Developed for an Event Dedicated to AD Russia magazine’s 10th Anniversary. Visitors could flip through pages and study the photographs on a large screen. Source

Interactive Presentation of the “Electronic University” System. Using the futuristic multi-touch interface the presenter could scroll through sections to choose one he wants to speak about. With a fast hand gesture he would then throw the section’s icon to the big screen where it would transform into a colorful video about the main features of the system. Source

10 Hottest Trends in Website Design [2012]

Article: Source

The world of web design is changing fast. Claudio Guglieri, art director at New York agency B-Reel, identifies 10 key trends you need to know about.

Website layout, meaning the positioning of its different components, is one of the earliest challenges a team faces in a project. It can be one of the hardest or one of the easiest decisions the team will make.

How you lay out your site is directly dictated by the purpose of the content, the needs of the user around that content, and of course the needs of the client who commission the work.

These three factors don’t always move in the same direction - so it’s the UX designer and the visual designer’s job to find the harmony between them.

Follow the trends

In addition to the theoretical aspect of it, the web design industry like any other creative field goes through phases, and these phases are defined by trends. These trends can be driven by new technological advances, new aesthetics or the pure desire of finding more efficient ways of presenting the content to the user, to name a few examples. 

I’d like to believe that trends are always for the best and push everybody in the industry to step forward and make even better products. For instance, responsive web design started as a trend and in a short time it has become a necessary part of the design process.

Inspiring examples

Thinking about those ongoing trends and how they push for specific types of layouts, I’ve selected a few that I find interesting and highlighted a few examples to illustrate them. Keep in mind that those trends are present within the different examples, so you might identify more than one in a specific reference.

01. Hierarchy of content

A more descriptive name for this trend could be called “show me what I care about about when I care about it”. It represents the end of the obsessive focus on “related articles” and the unnecessary “you might be interested in this…” clutter around the content that you actually care about at that moment. That doesn’t mean that curated content is a bad thing in itself of course; it still has room in your layout as long as it doesn’t get in front of what you are reading. Here are three great examples of this trend.

Cartelle

Dutch studio Cartelle’s website doesn’t let anything detract from the main content

Dutch studio Cartelle’s website has a vertical navigation, divided in sections that only appear when the user hovers over a specific area. This way the browser is filled entirely with what the user just clicked to see, not irrelevant content or unnecessary UI. When the user hovers over the menu this pushes the content away and places a black overlay on top of it so the user is completely focused on it.

The Great Discontent

Discontent offers a great example of how to present interviews online

This online journal of interviews with creative people is plain, simple and neat; it couldn’t be more straightforward. In terms of layout and UI, the design is entirely focused on the content. It starts with a big,  beautiful, responsive marquee featuring the person interviewed to grab the user’s attention. And when scrolling down, it turns into a three-column structure, where the left and right columns support the main centered story.

Quartz

News site Quartz provides a large amount of information without seeming cluttered

We’ve come a long way in web design when it comes to news sites. Remember the small screen resolutions, the requests to fit as many call to actions as you could above the fold, and don’t forget about the 300x250. The layout of Quartz, “a digitally native news outlet for the new global economy”, is a million miles away from all of that. It succeeds in providing a large amount of information without the site ever seeming cluttered or overwhelming.

02. Full screen imagery

More and more websites are taking advantage of the increasing popularity of widescreen monitors to show gorgeous imagery to full effect. Here are a couple of great examples.

Volvo Travel Guide

Volvo’s new site features a set of full-screen images with a short contextual text box

This site by North Kingdom for Volvo features a Travel Guide through Scandinavia with a really straightforward layout. After an initial selection of numbered items, the site just features a set of full-screen images with a short contextual text box. It’s interesting how they decided to play it safe and draw a box wrapping the text so both visual and textual content wouldn’t collide inside the layout. Merging both together would have lead to more, maybe unnecessary complications.

Golden State of Mind

Golden State of Mind’s rotating brand showcase makes full use of the screen

Golden State of Mind was built by JUXT Interactive to showcase “art, fashion and happenings live from California” and the rotating brand showcase makes full use of the screen, making great use of a selection of gorgeous photography.

03. Focus on touchscreens

More and more sites, in terms of layout and interactivity, feels like they were made solely for touchscreen devices. As tablets become cheaper and adoption becomes more widespread, this trend can only intensify. Here are a couple of choice examples.

USA Today

USA Today’s site pushes the idea of sliding cards to change from one main section to another

I was lucky enough to be around when this brief came in and the design of this site, for the newspaper USA Today, was started. What this site excels at is pushing what would normally be an experimental interaction to be the main metaphor behind the navigation. The idea of sliding cards to change from one main section to another really lets the user focus on the selected content at the time.

Ignition Creative Agency

Ignition’s website seems like it was made for touchscreen devices

On creative agency Ignition’s website I almost feel more comfortable dragging than clicking or scrolling like you would in a touchscreen, and that’s the way this site works across all its sections. The site is fairly simple, but it has taken the traditional marquee area ‘above the fold’ to fill up the whole screen with one unique message. If the user decides to dive deeper into the site, the content is structured in columns you can either drag vertically or horizontally to go to a different section.

04. Back to the grid

Using the grid as a layout structure goes back to the beginning of the web, but the rise of responsive web design has seen a new emphasis on the use of grids. Here are two sites that show how to do it.

W+K Amsterdam

It’s remarkable how flexible W+K’s responsive grid really is

This site, created by Random Studio for fellow creative agency W+K Amsterdam, features a responsive full screen grid of content. In terms of layout it’s remarkable how flexible the grid is. Regardless of its size, it accommodates the same content through really smooth transitions.

RVLT Revolution

Streetwear site takes a risk in not showing everything all at once, but it pays off enormously

In the case of streetwear retailer RVLT’s site, it’s remarkable how clean and casual the grid has been made. There is a large number of shots of products that appear randomly in the initial grid but the user doesn’t discover them unless they really click through.

From a personal standpoint I really appreciate the risk they’ve taken in showing less and not showing everything all at once. Sometimes being more subtle can be more interesting.

05. Minimal content

The trend to show minimal content on a page is not about the aesthetic value of minimalism (although that may play a part). It’s more about an approach that’s focused around the user and enables them to take things one step at a time.

Domani Studios

Domani Studios keep content to the minimum, but its site is never boring to look at

The site of New York-based Domani Studios basically reduces the layout to the minimum amount of content the user needs in each scenario. This trend can get a bit too extreme when taken too far but in general reducing the amount of call to actions in the layout helps to communicate a clear message.

AKQA

Design agency AKQA’s site shows one unique piece of content at a time

I’ve been a fan of this site since it launched, not just because international design agency AKQA is a great firm, but also because I can’t even imagine the amount of meetings that were necessary to make this site as simple as it looks. The site shows one unique piece of content at the time. It has reduced the amount of “blah blah blah” to the strictly necessary; condensing huge projects to three main statements of three lines each - “Insight”, “Idea” and “Impact”. The layout is completely tablet oriented, reducing clutter to a minimum.

06. Parallax scrolling craziness

The parallax scrolling trend has been around for a while now. As a designer I started loving it and eventually I was fed up with all the misuse of it. However there’ve been a few examples where this effect has been successfully used, really adding some value to the content featured on it.

TCM Summer under the Stars

The scrolling effect on this movie channel website demands to be played with

Movie channel TCM offers a really good looking example of a long scroll page layout linked to a timeline progression. As you scroll through, the filmography of the selected actor is displayed and then the agenda for the screening. What is actually interesting about this site is how it combines two ways of scrolling depending on how much detail the user wants to get from the movies shown. Try to click one of the movies and the layout, a single column scroll, will be vertically divided into three - the top and the bottom pagination call-outs and the centre the active content.

Sony Tablet

This site for Sony Tablet is a long scroll page with vertically distributed blocks of content

This website came out in the middle of the parallax fever and started a newer trend within this already saturated group. Basically it featured a unique device in the centre of the composition that was animated as the user would scroll down through the content around it. From a layout standpoint, it’s structured as a long scroll page with vertically distributed blocks of content. It came up as an example of a drastically improved version of the parallax and masking solution.

07. Parallax animation

Parallax animation is a subset of parallax scrolling, although where one begins and another ends can be argued over endlessly… However you define it, though, parallax animation has obvious usefulness for movie sites, as this great example shows.

Paranorman the Movie

The Paranorman site takes you seamlessly through the movie universe

The website created for the zombie comedy movie Paranorman is by far one of the most justified examples of parallax animation in a website. This site takes you through the movie universe seamlessly, loading new scenes as you move through. The UI elements in the layout have been reduced to the minimum as the scrolling logic takes you through the site smoothly. As a hidden gem, the site has a menu activated upon clicking that takes over the whole screen.

08. Fullscreen marquees

A good picture can speak a thousand words, and so full screen marquees have come as a breath of fresh air on many news and blog sites. Here are a couple of recent examples.

FastCoDesign

Each new post on FastCoDesign’s site shapes the look of the homepage

Design blog FastCoDesign combines a top area that adjusts its height to your screen size, but always hints the beginning of the promoted post at the very bottom. By doing that, it is showing right away that the site has been drastically updated with new content, as each new post completely shapes the look of what the user will see first on their homepage.

GEOX Amphibiox

The marquee expands to the size of the screen when clicked on this site for waterproof shoes

In a similar way to how FastCoDesign uses a resizable marquee area, this site, selling “a new generation of urban waterproof shoes” combines the best of a well structured content site with a marquee that, upon clicking, expands to the size of the screen. What’s remarkable is how they decided not to jump out of the site but decided to keep the experience within the framework.

09. Focus on storytelling

If you want to convey a brand message, one of the best ways is to tell a story, and web designers are coming up with more and more ways to create inventive and engaging narratives. Here are two great examples of the trend.

Cadillac ATS vs The World

The Cadillac ATS website lets you explore four stories via a long scroll/timeline structure

Firstborn Multimedia has created a website that makes you forget about the technology and lets the user focus on the story. From a layout perspective it starts with a selection of four stories and lets you explore them by using a long scroll/timeline structure where the users can get more information by clicking on the call outs that will expand and take over the screen. It makes a great use of contextual tips along the way so users can either scroll or click through the content adjusting the size of the layout of the screen.

VOLVO FH

This site for Volvo FH makes great use of typography to tell a story

Made by the company I work for, B-Reel, this site features a single column of storytelling on each page, supported by pictures, videos and interactive components along the way. From a layout perspective it tells one story at the time, it makes an amazing use of the typography to establish a clear hierarchy and keeps the user interface to the minimum. Don’t miss the “Overview” button at the top where you can see a visual map of the site.

10. Editorial influence

Web design and editorial design are constantly looking at each other and getting closer in terms of aesthetics and layout. Here are a couple of great examples.

DUJOUR

Dujour concentrates content in one unique column

Dujour by Code And Theory is a “new national magazine with targeted local content”. The site has a fairly simple layout consisting of a beautiful magazine looking marquee area, a content area structured in one unique column, a hidden contextual menu on the left (generic) and a visual index on the right.

Design Week Portland

The marquee area takes over your screen size to transition into simple double columns

As a slightly different example of editorial influence, take the website created for the recent Design Week in Portland, starting with an marquee area that takes over your screen size to transition into a really simple double columns schedule that cycles through as you scroll down dividing the screen into day on the left and agenda on the right. Its simplicity, plain colors and big bold typography are clearly inspired by the print media.

26 Of The Best Ideas Ever

Article: Source

This one was worth posting. Take some time to really soak in these gems.

There are good ideas, and there are stupid ideas, but I’m primarily interested in the cross-section. Ideas that are stupid good. Here are 26 of them.

1. Pizza In A Cone

2. The Dish-Draining Closet

3. The Cat Tunnel Sofa

4. The Trip Rule

5. The World’s Most Elegant Office Prank

6. The Modular Cutting Board

7. The Most Amazing Halloween Costume Ever

8. The Catnip Tombstone

9. The Broom-Cleaning Dustpan

10. The World’s Cleverest Desktop Wallpaper Idea

11. The World’s Second-Cleverest Desktop Wallpaper Idea

12. Resigning By Cake

"Dear Mr. Bowers,

During the past three years, my tenure at the Hunters Point Naval Shipyard has been nothing short of pure excitement, joy and whim.

However, I have decided to spend more time with my family and attend to health issues that have recently arisen. I am proud to have been part of such an outstanding team and I wish this organization only the finest in future endeavors.

Please accept this cake as notification that I am leaving my position with NWT on March 27.

Sincerely,

W. Neil berrett”

13. The Zombie Treadmill Defense Concept

14. Turning A Toaster Sideways To Get Grilled Cheese

15. The Arm Sleeper’s Pillow

16. Pen-Cap Cutlery For Eating At Your Desk

17. The Built-In Wall Extension Cord

18. The Time Traveler Prank

19. Christina Aguilera Dishwasher Magnets

20. Staircase Drawers

21. The, Um, “Cozy Night In” Wine Glass

22. Soft Pebbles

23. The Cop Party

24. The Invisible Treehouse Hotel

25. Subtly Altering Someone’s Facebook Photos

26. And, Of Course, The Hood Thong

Best idea ever. Fake rocks not included with this one, but they’re always a good idea too.

Which 5 Technologies Will Shape the Future?

Article: Source

Envisioning Technology is an award-winning trend forecasting studio that has released a report called Envisioning emerging technology for 2012 and beyond that gives a timeline for technologies in categories such as Artificial Intelligence, internet, interfaces, robotics, biotech, energy, and space.

Their goal is to predict  where technology is heading in the future, and they have developed  visualizations, keynotes and custom reports, like the one here, to display their research.

You can download the PDF or visit their website and view the full list of the many technologies and their detailed definitions.

I have chosen 5 from the pack as most influential in their respected categories.

1. Geo-Engineering: Desalination estimated by 2030

Image source: (AP Photo/Brad Doherty)

The necessity for fresh water in the coming century is apparent to most people and yet it is often overlooked as a problem for the future. If we don’t start developing this technology now, it won’t be prepared for when we need it. There are some projects in motion such as the start-up Atlantis Technologies which has created “a low-cost, chemical-free desalination system that can remove salt from oil, gas, mining, and industrial waste water,” according to its website. The company is calling the technology radial deionization, but it is small scale compared to what is necessary to ensure easy access for H2O to the global population.

Now that is just for more developed nations who don’t have to fight for their water. Imagine what kind of positive change this could bring to countries in serious need. I will end this talk of desalination with a quote from Cracked.com: “But even if fresh water is running out, we can take comfort in the fact that, as rational people, we at least won’t be going to war over it all Mad Max-style, right? How about we just leave you with these links about water supply-related conflicts between Pakistan and India, India and China or Israel and the rest of the Middle East, and let you answer that question yourselves. Sleep tight!”
Read more: 6 Important Things You Didn’t Know We’re Running Out Of | Cracked.com http://www.cracked.com/article_19048_6-important-things-you-didnt-know-were-running-out-of_p2.html#ixzz2AkDF0JVT

2. Robotics: Self-driving cars by 2018

Image source: http://www.wired.com/magazine/2012/01/ff_autonomouscars/5/

Yes you read correctly. Self-driving car by 2018 is seeming more and more plausible as a reality.

Whereas the first technology is targeted at a severe need and is aimed to eliminate and imminent long-term problem; driverless cars are more about efficiency and convenience.

Don’ get me wrong there’s certainly a safety aspect to it as Google said on its official blog in August, that the autonomous cars have completed over 300,000 miles in a variety of conditions and “there hasn’t been a single accident under computer control.” Source.

No longer will there be those early mornings where you are so tired you nearly rear-end the car in front of you. No more having people shake you awake on long drives. You can actually use this time productively and did you know that North Americans Spend on average 15 Hours a Week in Their Cars. (Maclean’s February 27, 2006)

One landmark study on highway safety, determined that 369 269 Americans were killed between 2001 and 2009 by motor vehicles. More tragic then the number itself was the fact that 93 per cent of those cases were most  likely by caused human error. Regardless of what company releases self-driving cars first, it should make a big decrease in the amount of people injured each year by vehicles. The lives that have already been lost are a tragedy but at least now a potential solution emerges.

3. Biotech: Printing Organs by 2017

Image source: http://online.wsj.com/article/SB10000872396390443816804578002101200151098.html

The process of waiting for an organ donor is currently pretty morbid because if you receive one, it means someone else has had to give theirs up. Even worse, there may be no available organ to transplant in the limited time and then lives are at stake. Now, with 3D organ printing we may finally be able to match the growing demand for supplementary organs.

Bioprinting, is similar to ink printing on a page. Only it is not on a page but 3D and not with ink but living cells. Alright so it’s a little more complex but you get the picture. Of the technologies on the page, this one has some of the most research already in progress.

Wall Street Journal: “It allows us to print a tissue structure that is a functional, living, human tissue,” says Organovo Chief Executive Keith Murphy.

Organovo doesn’t sell them yet, but keeps the equipment for its own product development projects. It does share them with other researchers through partnerships with Pfizer Inc., United Therapeutics Corp., and Harvard Medical School, among others. Mr. Murphy declined to disclose the details of these arrangements or say what bioprinted cell products were in development.

The programmable printer has laser-guided printing nozzles that can extrude inks composed of different cell mixtures. In each drop of ink is a solution that contains about 10,000 to 30,000 cells. The bio-ink is a mix usually cultured from stem cells taken from a donor’s bone marrow or fat. Those cells can then be grown into the many different cell types necessary for tissues.

“You use building blocks of cells to make a 3-D structure, almost like building something out of Legos,” Mr. Murphy says. “The cells do all the finishing touches themselves.”

4. Energy: Space-based solar power by 2040 to 2050

Image source: http://www.nss.org/settlement/ssp/

The search for a long-term sustainable energy source has been going on forever and now we may have an answer. Although currently unattainable, much research has been done into discovering whether we can harness energy from space via solar collectors and beam it back to earth in the form of microwave rays which satellites will receive and  convert to electric  energy for the grid. Solar power on earth is subject to the constant changing from day to night as well as covering large portions of real estate. From space it would be gathering energy 24/7 and could solve the impeding global energy crisis.

Geek.com: “After conducting a three-year study, the IAA says that the technology exists to make beaming the energy down to collectors on the surface a reality. This model is ideal because space-based satellites won’t have to deal with weather, atmosphere, and other obstacles that hinder the collection of solar energy. It would also cut down on fossil fuel emissions since solar is “clean” energy.”

5. Geo-Engineering: Vertical Farms by 2026

Image source: http://webecoist.momtastic.com/2010/01/13/3d-farming-26-vertical-farms-and-green-skyscrapers/

A vertical farm is usually a converted skyscraper where each floor grows a different crop and all the water and nutrients are recycled to be used again. This concept cuts out the need to transport your agricultural products overlong-distances by providing farms to high-density urban areas. Also in an era where processed food are reigning supreme, it would be good to give local residents easier access to a healthy option when it comes to their daily diet.

Wall Street Journal: “One ambitious project under construction is trying to address all of those challenges at once. At 12 stories, the triangular farm in Linköping, Sweden, will be one of the tallest vertical farms in the world—most max out at several stories—and will use innovative ways to generate revenue. Not only will the company behind the farm, Sweden’s Plantagon, sell its produce at a local farmer’s market, but it also will lease out office space on most floors.”

Luck is where the Crossroads of Opportunity and Preparation Meet. Source

5 Perspectives On The Future Of The Human Interface

Article: Source

The next generation of apps will require developers to think more of the human as the user interface. It will become more about the need to know how an app works while a person stands up or with their arms in the air more so than if they’re sitting down and pressing keys with their fingers.

Tables, counters and whiteboards will eventually become displays. Meeting rooms will have touch panels, and chalk boards will be replaced by large systems that have digital images and documents on a display that teachers can mark up with a stylus.

Microsoft General Manager Jeff Han gave developers at the Build Conference last week some advice for ways to think about building apps for this next generation of devices and displays. I am including his perspectives as well as four others who have spent time researching and developing products that fit with these future trends.

Han talked about the need to think how people will interact with apps on a smartphone or a large display. That’s a pretty common requirement now, but the complexity will change entirely as we start seeing a far wider selection of devices in different sizes. He said, for instance, developers need to think how people stand next to a large display, how high they have to reach and the way they use a stylus to write. The new devices we use will soon all have full multi-touch capabilities so a person can use all fingers and both hands to manipulate objects and create content. Here’s the full talk he gave at Build, which includes a discussion about the types of devices we can expect from Microsoft going forward.

Jim Spadaccini of Ideum, which makes large interactive displays, said in an email the primary consideration that his team thinks about  is how multiple individuals interact together around a table. Does the application encourage collaboration?  Is the application designed in such a way that multiple people can interact?

He said that in looking at these questions, issues such as the orientation of information and overall structure of the application become really critical:

We look to design applications that have elements that are omni-directional or symmetric. These allow individuals to approach a table from any direction (or the two “long” sides) to interact together. The interaction is as much social engagement — visitors interacting with each other — as it is about interaction with the program.

Cyborg Anthropologist Andrew Warner said to me in an email that there’s a tendency in computing to think that we are becoming increasingly disembodied. In some senses this is true. In other senses, though, this is becoming less true. Every generation of computing becomes more tactile. The first interfaces were awkward keyboards and terminal, then came the mouse (which required the whole arm to move), then the touchpad (which we lovingly stroke with our fingertips), and then the touchscreen (which integrated display and touch).

The next generation of technology will bring new ways for people to get similar tactile experiences that we get when we touch objects or materials. Developers need to remember that people are sensual beings, and our bodies are the best interfaces we have. Even though we have ways to transmit thoughts directly to music, people still use embodied interfaces because we have been fine-tuning our nervous systems throughout our entire lives as we learn to interact with our environment. Additionally, we are “wired” to receive a basic pleasure from physical activity (exercise gives us serotonin and dopamine feedback). Developers need to harness this and make computers sensual again.

Amber Case is the co-founder of Geoloqi, the mobile, location-based company acquired by Esri. Known for coining the term cyborg anthropology, she is also the founder of Cyborg Camp, which took place in Portland this weekend. She mentioned on Twitter the concept of computer aided synesthesia. For instance, this correlates to the concept of using  senses to simulate what another sense is unable to do.

From Artificial Vision:

However, a main drive for investigating artificial synesthesia (and cross-modal neuromodulation) is formed by the options it may provide for people with sensory disabilities like deafness and blindness, where a neural joining of senses can help in replacing one sense by the other, e.g. in seeing with your ears when using a device that maps images into sounds, or in hearing with your eyes when using a device that maps sounds into images.

Matt May is an accessibility evangelist who works for Adobe. He said to me that the most important thing right now is for developers to realize they can’t control which interface (or which combination of interfaces) people are going to prefer.

We’re going to have to test our apps with the boring old keyboard and mouse, as well as touch, voice, different display sizes and resolutions, and assistive technologies to make sure we’re actually still reaching everyone. It’s a very exciting time, and that usually leads to some really bad decisions. It’s important to choose what we use and how we use it wisely so that each user can participate as fully as possible.

People with little interest in computers have come to love their iPhones. They are easy to use because of their touch capabilities.  This means we will see far more people using computers because they fit with their lives. Displays will be everywhere. The challenge will be in the UI and how we adapt it to the way we move about in our personal lives and in our work.