Å·±¦ÓéÀÖ

There’s reading about UX/UI technique, and there’s putting it into practice. As part of our initiative to help designers learn â€� really learn —Ìýwe’re creating a series of Design Challenges.

From basic visual skills to advanced interactions, each Challenge will test your ability to solve design problems in creative ways. And we’re going to kick things off with a big one.

Today we’re pleased to announce the first UXPin Design Challenge: Redesign a nonprofit’s home page to improve donations and encourage new memberships. To do the challenge, you’ll need a .Ìý

We’re partnering up with ,ÌýwhichÌýis a media, community organizing, and entrepreneurial collective in the San Francisco Bay Area. Their projects include:

Housing and incubating enterprises developed and led by De-Bug members


The only community darkroom in the region that supports the professional growth of film photographers


An innovative program to enable families to have an impact on their local criminal justice system

They also operate a center in San Jose for its small businesses, media training facilities, and provides a home base for its community organizing projects. To that end, the ideal target audience would be potential donors and potential new members.

The Challenge

Their website needs a facelift to earn more donations. Your mission, should you choose to accept it, will be to create a new, mobile-friendly design using that engages potential donors and excites people into becoming members.

All entries are due Sept. 1, 2015. Limit one entry per person.

The Award

We know that prestige and boasting rights will only go so far in the design business. So the winning entry will win an Apple Watch.

Going Forward

We’re excited to bring you this opportunity that helps a nonprofit and offers you a tangible reward.Ìý

Summer isn’t quite over and neither are our updates. Our development team’s been hard at work on our latest feature that’ll enable both businesses and power users collaborate better with their teams —�.

Now you’ll be able to build your own library of elements then share them with your entire team.

Let’s take a look closer at this latest update, available in right now.

1. Communicate Ideas Faster and More Easily

Custom libraries within UXPin allow you to build brand-compliant design elements that you can share with your entire team, regardless of whether they are designers or not. These pre-built custom elements enable everyone to participate in the design process from the very beginning.

Anyone can quickly mock up in idea so they can better communicate what they envision. It also makes it easier for you to move from your requirements document to actual design.

Ìý

2. Less Busywork, More Focus on Design Problems

With customizable libraries, you’ll have a catalog of elements that you can quickly pull into your designs. That way you aren’t wasting time creating elements from scratch. You can reuse pre-built elements as needed or share them with anyone.

This means more time spent on figuring out tough design problems rather than spending your time creating and re-creating the same slider or tab over and over again.

Ìý

3. Maintain Consistency, Both for Your Brand and Your Team

Re-usable elements means that your team will all be on the same page. Everyone will be able to use the same patterns without risking the integrity of your brand. Not only that, but it will make for a smoother workflow as you collaborate through the design process.

Because elements you add to your custom library may be available for all members of your team, custom libraries solve the problem of maintaining consistent company design assets such as logos, icon sets, menu bar, etc.

Create and maintain your own customizable library today with .

Ìý

We’ve recently launched , where you can create an element, like an icon or pattern, save it and not have to recreate it each time you need it.

A custom library ÌýasÌýallowsÌýyou to share any elements Ìýyou create with your entire team â€� whether it’s a navigation bars, headers/footers, sample content, or other project-specific components.

With that, let’s dive into how you can actually build your own element library. If you want to follow along, you can .

1. Add an element to the library

Adding an elements or groups of elements (even with interactions or multi-states) to the library is simple.There are two ways to do it:

Right-click on an object and use the context menu to pick the option �Add to custom library�

Select the object and use alt + c shortcut

As you can see below, if your custom library is empty, you’ll be asked to fill it up!

Once you add your elements, make sure your custom library is on the list of all libraries. To do that, click on the cog icon on the left-hand side of the editor:

Your custom library should be marked as �On list� (here we used ‘Team library� as an example).

Then you can access your custom elements by picking custom library from the dropdown (in this case we named the library ‘Me�):

Ìý

2. Editing custom elements

Sometimes elements need a little refinement. That’s why you can edit custom elements after the fact.

The easiest way to do so is to open the custom library, find the element you want to edit and drag it on the canvas. Make all necessary changes and add it again to the custom library.

This will result in having two elements (an original one and the edited one). That’s not a mistake! You can decide whether you need them both. If not, you can just delete the previous one.

3. Editing custom libraries

By means of edit options, you can manage the list of elements included in each library. At any time, you can change elements the name of your element or simply get rid of an element if it’s no longer needed.

Those changes can be made in two places:

After picking Custom library from the dropdown on the left-hand side of the editor

Ìý

Or in Library management section:

This is only available in the Enterprise plan, on the list of all libraries you can see libraries created by you (�My libraries�) and those shared with you by others (�Shared with me�).

If you want to edit anything in the library shared with you but it turns out you can’t do it, � please ask the owner of the library to grant you the right permission.

In Pro-plus plan,Ìýthere’s only one library available. It’s called ‘Team libraryâ€� by default and it’s shared with the whole team:

4. Permission management

In the Enterprise plan, the owner of a particular library can define who sees the library and who can edit it.

The possible choices are: all team members or only the owner of the library.

To grant such permissions, click the �manage libraries� cog icon, enter your custom library and click �library settings� in the upper-right corner. This option is available only for the owner of the library (the one who created it).

You’ll find the permission settings on the right under the gear icon:

If you’re on a Pro-plus plan, all your team members have access to the ‘Team library� and may edit it freely. Those settings cannot be changed.

5. Creating multiple libraries

ÌýAs I mentioned before, for Pro-plus users there’s only one custom library available.ÌýFor the Enterprise plan, there are no limits.

In this way, a custom library may be created for each team in the company, group of people or it may be granted for a specific project.

And that’s just the beginning! You can add the very same element to several libraries at once!ÌýIt definitely makes life easier for team members who don’t want to rebuild their custom elements.Ìý

6. Custom Elements vs Smart Elements

There’s a subtle difference between the two.Ìý

Custom elements are perfect if you’d like to re-use them in other projects. Have you thought about creating some design patterns perhaps? They’re brilliant for that too.

Editing Custom elements influences neither those elements you have in a custom library nor elements you have already placed on the canvas. The change only impacts the one element that has been chosen. In other words, when you edit a custom element, you make only a local change.

Smart Elements, on the contrary, mean a global change. If you want to make a change that will influence all the other places you used your smart Element � that’s something for you.

Create your own custom elements library with .Ìý

An experience is the sum of all interactions. As soon as someone sees your site, an emotional reaction occurs subconsciously � that in itself is an interaction. Likewise, users also need to consciously decide how and where to click on your site.

Prototyping helps you refine all these tangible and intangible design elements. In this post, we’ll explain how to design more efficient layouts by mastering visual hierarchy.

An app or site needs to present certain information when the end user needs it most � and remove it when they don’t. The goal is to create an interface that respects users� time and attention.

For example, let’s say a blog has four categories. Listing them in a sidebar offers a list that users can skim Ìý(and then ignore) as they hone in on an individual post. A list, however, might not work for 20 categories since you’d create a wall of text. If users choose to read through it, they’ll spend precious seconds not engaged with a blog post.

So where’s the best location to show categories? The answer depends on the project, but the decisions remain the same.

Timing: When do users need to see categories?
Importance: How does a list of categories compare with blog posts and teasers?
Branding: What styles must the categories adhere to?

Timing

If we consider interaction design as a series of events, then timing is crucial. Consider this lo-fi prototype:Ìý

Photo credit:

Users tend to look at large, high-contrast elements first. In this case, the headline screams for attention. After that, users have a choice: Check out the body text immediately below the headline, or skip to the sidebar and (hopefully) return to the body text. We want to streamline designs as much as possible, and that momentary detour spells trouble.

Design is more than a static presentation. As described in the free e-book , users absorb information in stages, from initial page load through content interaction until they leave the page. Controlling each step means deciding how users enter the page, and what they do afterwards —Ìýan entire storyline. Category links aren’t just SEO-friendly decoration on the side. They’re exit opportunities that, in the design above, come way too early in the story.

We can solve that problem by considering the next factor.

Importance

Similar to timing, the categories� relative priority informs their placement in the user experience. There’s no if/or in this decision. The more clear priorities are, the better users will flow along the path you want them to take.

Photo credit:

We can argue the merits (or downsides) of mega-footers. The point here is that users have only one place to go: Straight down. As exit routes, categories occur at the end of the story. Astute readers will notice that the category links are also smaller —Ìýabout the same size as the body copy, which helps diminish their apparent importance.

Like we said, giant footers aren’t always desirable or practical compared to sidebars. An alternative is to build both.

Above, the sidebar keeps categories which you need to decide are more prominent than the others. For example, the categories to which this blog post belongs, or those that offer similar topics to what’s being presented. But their appeal is limited by size and color. Users are attracted to size and contrast, so playing down both keeps those highly-placed categories in second place compared to the page’s content. (.)

Prototyping lets us explore options

Where does prototyping come into play? As you may have guessed, everywhere.

From the initial sidebar design to the final comp, prototyping helps us determine how the story should unfold. They show us exactly what 20 categories look like compared to a blog post. They let us explore what happens when we tweak type sizes and spacing.

An experience is the sum of all interactions, in order. You can take advantage of importance to manipulate the timing of a page, thus controlling how users perceive its content. To practice what you’ve learned in this post, go ahead and start a . You’ll be able to prototype quickly with thousands of pre-built elements, a custom animations editor and .

Imagine me holding a ball. Now imagine me dropping the ball.

What did you see? I am sure the answers will vary depending on the person.

Describing an interactive process with a static medium leaves us open to misinterpretation. In this piece, I’ll explain how to use animation to create more useful mobile wireframes and prototypes. Feel free to follow along in UXPin with a since this is a hands-on piece.

When it comes to mobile, there is always an interaction before there is motion: Touch a button and something moves. As explained in the freeÌý, we usually use the techniques shown below to demonstrate motion and movement in a wireframe:Ìý

Figure 1: Annotating motion in .

In the top image, the interaction is a “Tapâ€�. ÌýTap the button and the next screen appears. The middle one is a bit more explicit by adding the word “TAPâ€�. In the bottom example the interaction is a “Swipeâ€�, as indicated by the arrow. We all understand that.

What we don’t understand is how we get from screen-to-screen with a tap or a swipe. Does the next screen magically appear?Does it zoom in? Does it zoom out? How fast is the motion?

Now comes the fun part: Try explaining that to the client or others not involved in the process. Each person will “see� it differently.

Rapid prototypingÌýjust might be theÌýsolution

You don’t normally tackle animations when you’re , but it can be helpful for complex designs (like mobile apps with plenty of microinteractions).

Photo credit: UXPin based on

A common UI/UX workflow starts with a lo-fi wireframe and works towards a . As we move through the process we start with a simple “Here’s how …� and finish with “Here’s what …�.

With interactivity and motion, the “Here’s how …� starts with initial motion concepts and, as we move toward the “Here’s what � � , the motion becomes more refined as time,speed, distance, easing and effects such as zooms and opacity changes are added and tweaked.

Does this mean extra work? Not really. Let me show you how to do it.Ìý

Creating a Rapid AnimatedÌýPrototype

In this demo, you’ll learn how to make an interactiveÌýiPhone prototypeÌýwith working, animated icons. The end result will feature a button that, when clicked, transforms into a new app view.Ìý

The goal of this rapid animated prototypeÌýis to help visualize how content might move around in a design. It’s not going to be visually polished, but that’s OK. We only want to communicate the behavior of the animation as quickly as possible.

Using the collaborative wireframing and prototyping tool , we’ll cover common concepts including:

Creating elements
Ruler guides
Corner radius
Colors
Alignment
Groups
Advanced animation

If you haven’t already, go ahead and start a , then follow along below.

1. Create a New Wireframe

We’ll start the project as a wireframe, and turn it into a prototype as we add interactions and animations.

2. Add a Phone Element

You can scroll through the library of elements � or type cmd-F (Mac) ctrl-F (Windows) to bring up the “find an element� search field. Find and click the phone body.

3. Resize the Phone

The phone is pretty big by default, and may not be fully visible on your screen. If so, tap the “properties� icon (circle-i) to enter exact measurements based on whatever fits your screen.

4. Define a Consistent Working Area

Drag guides out from the rulers to the edges of the phone’s screen. We’ll use these to help us resize the button’s background exactly where we want it.

5. Give the Phone a Background

The phone element’s “screen� is transparent by default. We want to make that black, which will contrast well with the animated background to come. Add block element to your wireframe, then resize the box to fit within the guides, and color it black.

Ìý

6. Make a Button

Add another light blue box, sized appropriately, and set a corner radius of about 10px.

7. Make More Buttons

To duplicate the button, hold down the option/alt key when you drag the icon. Do so three times to make a row of buttons.

8. Distribute the Icons Horizontally

Getting icons perfectly even isn’t easy by eye, so select all three buttons and use the Ìý“distribute horizontallyâ€� function, in the alignment toolbar at the top of your screen, to put the same space between all three buttons.

9. Center the Buttons

Let’s get picky with our pixels and center the row of buttons in the black screen. To do so, group all three buttons, select the group and the black screen, and finally choose the “horizontal center� function.

10. Make Many Rows

Like option/alt-dragging one button to make a row of three, you can option/alt-drag the group of three to make a series of rows.

11. Add an Action

In this demo we’ll make the upper right button animate.

Start by ungrouping the top row and selecting the right-most button. Then tap its “interaction� icon � the button with the lightning bolt. Finally, click “add advanced animation.�

The advanced animation editor comes with a “start� state (what the screen looks like before the user taps a button) and a step one (what happens after the user taps). Make sure you’re in step one.

12. Make the Change State

Changes in each step indicate what will happen when users click the button. In this case, the button itself will change its size and shape: remove the button’s border radius and resize the button to fill the guides.

13. Make the Close Button

The best way to return to the default state is to make a new advanced animation within the button’s advanced animation.

To do that, find the bottom left button � that’s tricky because it’s the same color as the new background, but if you click in the right spot, its handles will appear. Fix that by making it a darker shade of blue.

14. Give the Close Button an Action

This part’s easy.

Click “advanced animation� in the close button’s interaction menu. Then click to step one. Notice how the screen has reverted to its icon-full, black-background state? That’s exactly what we want. Just click save � and that’s it.

In this demonstration, we’ve created an animated iPhone wireframe in which one button expands to fill the screen, and another button resets the demo.

and you’ll see why animations are cool: they let users see exactly what their actions do.

When you’re done and want to share the interactive wireframe with someone on their device, just just click the “shareâ€� button Ìýon the top, right hand side of your screen and then click the SMS tab. Type in the phone number, and go ahead and send the interactive wireframe.

Ìý

Alternatively, you could also generate a QR code or send the design to the person’s email.

Next Steps

Wireframing motion is not time consuming but whether to add it to your workflow depends upon the budget, complexity and scope of the project.

There are, however, a few advantages to the technique:

It is iterative � You can easily change everything from timing to the very nature of the motion. For example, maybe the images should move from left to right or from top to bottom. All you need to do is change the positions in the interactions panel rather than starting over.


It is visual � Being able to show motion is a lot more precise than describing motion.


It can be refined � Yyou can concentrate on how things move throughout the entire process from wireframe to prototype. You can “tweak� the motion established at the start of the process rather than adding it as an afterthought later on.


You can play low risk “What If …� games � The very nature of this technique is it is iterative. By using boxes and circles you can quickly answer such questions as “What if the images bounced into place?� or “What if a button shrinks or expands when it is tapped?�

Now it’s your turn. Practice what you’ve learned by playing with UXPin with a .

You’ll see that animations in wireframes and prototypes don’t just help you communicate ideas better � they also help you explore interaction design much easier. Considering how today’s most popular sites and apps are rich with animation, you definitely want to get started as soon as possible.

The appropriately-named interaction picker lets designers create ways for users to work with elements on a view. With this tool you can make elements react to users� actions, like taps and hovers, and then change the interface accordingly. Text links, for example, can take people to new pages. Hovering over elements can present tooltips. And tapping search icons can present entire forms. Better yet, you can apply interactions to anything including form fields, text blocks and whole groups of elements.

Invisible elements, though, are only selectable from the Layers menu. That’s both a handy way to select items underneath other items …Ìýunless you want to work with them directly.

In this tutorial we’ll explore ways to select elements and add interactions. If you aren’t yet using UXPin, you can and follow along.

Choose the right element —Ìýor group

As you probably know, you can add an interaction to a single element within a group, but it’s also possible to add it to entire group. To do so, place your mouse cursor just slightly outside of a group or multistate element. Look carefully and you’ll see the yellow highlight expand, indicating you’re about to act upon the group, not just one part.

Every element has a name, and as you hover over one, you will see a tooltip that will tell you which element you’re about to choose.

Ìý

You can also add interactions to elements by selecting them from the Layers panel.

Finally, here’s a handy time-saver: You can quit the interaction menu using the ‘esc� key.

Seeking invisible Layers

Since the very beginning of , our users wanted us to make all the ‘hidden� elements/layers to be actually invisible in the editor and not selectable, so that they could click through the invisible layer to the layer beneath. Now they can, which is one of the updates we’ve recently made.

Right now all elements with visibility set to “off� are now truly invisible. Once you hide your layer/element using the “eye� icon in the properties menu, or the “eye� icon in the layers panel, they won’t be selectable on the canvas � only via the Layers Panel. It means that you can select visible elements underneath them without accidentally selecting the wrong thing.

Remember that you can add interactions to hidden elements using the interaction picker either by clicking on a layer on the canvas or by selecting it from the layers panel.

However, if you need to select invisible elements, we offer a simple workaround. First, show your layer again (using layers panel), then change its opacity to 0%. In this way the element will be transparent but still selectable, if needed.

Going forward

The first step in adding interactions to an element is to find it. You can hover over elements, hide the ones you don’t need, and use the Layers menu to find anything in your prototype � then liven up your prototypes with taps, hovers and more.

Before we go, we do want to leave you with a couple of recent updates to UXPin. First, we’ve tinkered with the “tooltip� element so that it’s fully functional.

Also, we revised the scrolling on the sitemap, which appears in the editor left of the screen, so that it actually � scrolls. Check it out:

Take what you’ve learned here today by to UXPin.

Ìý

Iterating through design doesn’t stop with prototypes. Many people find the ability to share PNGs, PDFs and HTML/CSS handy to have. Such versions are great for archiving drafts, printing out for whiteboard discussions, or testing in real browsers on mobile devices.

In this tutorial we’ll explain how to quickly export a prototype. If you want to follow along, .

Here’s the process breakdown.

Look for the share icon in the upper left corner of the UXPin editor.
The first four options share the live preview. To download files, tap on “export� to the right.
Choose your format (PNG, PDF or HTML).
UXPin will generate the appropriate files.
Check your inbox for a message with a download link.

Let’s sum it up in a quick animation:

The PDF export gives you the option to save a file with page numbers. While not production-ready, the HTML export can include an optional sidebar sitemap and responsive breakpoints (if your prototype has any).

The only downside to exporting a prototype arises when you make changes to the original. Although live previews stay up to date with the latest iteration, anything saved to external files do not. On the other hand, this technique is great for comparing old versions to new and reviewing offline.

Regardless of your purpose, sharing a draft of your work is super simple now that you know where to look. Start collaborating with your team in different media like HTML/CSS, PDFs and, of course, .

The UXPin editor comes with many features that help you communicate your ideas to clients, developers, and other designers. Here’s how you can start using the UXPin editor to make prototypes in a snap.

Before we dive in and if you want to follow along, you can get UXPin with .Ìý

Add Elements to a Prototype

This is an easy one. The Editor comes with many prebuilt elements like text boxes, buttons, icons and other common elements. More than 900, in fact. And putting them to use is as easy as drag and drop.

Choose a library with the elements you need.
Drag the element into your prototype.
There’s no step three.

Search for the Elements You Need

You don’t have to memorize the libraries and their contents. You can search with cmd-F (Mac) or ctrl-F (Windows) to quickly search for the elements you need (or click the magnifying glass icon on the far left). As a bonus, the search tool remembers which elements you used most recently, making it a great way to create multiple copies of the same thing.

Edit anything with the properties panel

Every element has its own settings like size, position, color, etc. Some have unique properties, like lists� options or text blocks� typefaces. In any case, you can count on the properties panel to get you the settings you need with a single tap.

Bonus: Rename your prototypes

It’s a small feature with great value. UXPin’s dashboard lets you search for project folders and prototypes by name, so naming your work is critical to success. You can edit a project’s name right from the editor by tapping a certain block in the upper left-hand corner.

The editor has many features, but you can get started making great prototypes by searching for elements, dragging items into view, editing them on the fly —Ìýand naming your prototypes well.

Try what you learned with a and start creating prototypes in about the same time as you took to read this post.

Visualizing data comes up more and more in my work as a UX Designer. Data can be visually striking, but it needs a language and story to follow in order to be effective.

Over the years, the art of storytelling has become the structure I use as the foundation of my designs. Every good story has a hero who is on some sort of quest. And like every quest, there’s always a monster that must be slayed. Describe your user and the problem, then craft a story that helps everyone better understand the journey.

I’ll explain a process I followed on a recent project that will help you with your own UX design project.ÌýFeel free to follow along in .Ìý

Seek Inspiration Outside of the Project

Visual language taps into the foundation of human-centric design.

Humans created visual language before the alphabet we use today. Cave paintings were man’s earliest form of communication. Like a good tooltip, the drawings explained issues and how to solve problems. Those early drawings weren’t intended as a primitive form of interior design. Cave drawings told topical news stories. They warned of potential danger. They shared tips for survival. Essentially, cave drawings are visualized data.

� �. . .

As described in the free e-book , the eloquent simplicity of an image holds a lot of communicative power. But how do you harness this power into pixels?

Recently I needed to design an interactive system map that conveyed several key factors including:

Size
Distance
Risks
Activity
Paths
Connections

Essentially, the network security app needed to help find a dangerous needle in a haystack while showing how that needle got to that specific location in the stack.

Photo credit: .

Looking at examples of clustered network data, the images were elegant, but highly impractical from an interactive perspective. Yes, it is possible to make networks look beautiful, but it’s hard to make them functional once interactive. I saw little usability in designing the interactive map in a traditional way. I needed to find inspiration from another place. Something outside the existing examples of visualized network data.

In order for visualized data to be easy to read, there needs to be distinguishable attributes. This is where the structure of a visual language comes into play.

Embrace the Storytelling Power of Metaphors

My inspiration often comes from nature. Within nature is perfect design. A forest is chaotic, but there is a method to the madness.

The story of a forest isn’t understood by it’s larger holistic view, but rather the intimate view when standing within it. The same principles applied to the system network I needed to design as a map.

Data on it’s own means nothing. An overview of data presents high-level information that is helpful but rarely actionable. Context matters and must be presented with data. The ability to understand connections requires a closer view.

Once you start to zoom-in, the forest takes on a whole new meaning. When you look at a single tree up close, it’s perceived in a whole new way. The closer you look, the more texture and detail you see. And at a microscopic level, the relationship between forest elements illustrates how the forest grows.Ìý

I thought about how everything grows in partnership of each other in a forest. It’s a network of layers and natural laws dictating how plants grow. Color plays into how living things survive and a plant’s proximity to the sun. Everything grows and dies in perfect harmony. When a plant dies, it becomes food for the next generation.

Ìý

Photo credit: .

I decided that a flat map-like experience was easier on usersâ€� cognitive loadÌýthan a 3D shape. Reducing cognitive load made it easier to tell the story. Interactive components should help focus the user on the key areas of the map. I studied different treemaps in search ofÌýthe right treatment for the data within a mapview.

Creating the Story

Putting these elements together took time. What helped me was the creation of a story, which was:

“A user is flying in a plane above a dense forest looking for a place to drop into in order to locate a single red seed. This red seed was introduced to the forest by an outsider who wants the plant grown from the red seed to eliminate other plants. The damage is unacceptable. There is more than one red seed, and the user needs help locating the seeds and removing them before they grow into plants.�

This story helped me identify the types of interactive features necessary for the user to complete the tasks described below:

The user must fly over the entire forest.
The user must isolate the color red.
The user must distinguish between seeds and other elements of the forest.
The user must find the seed before it turns into a plant.
The user must understand the relationships between trees, plants, leaves and seeds.
The user must understand growth patterns in order to establish a timeline.
The user must find paths to follow on the ground.

Obviously, all of this is a fictionalized version of the real tasks performed by users within the product. But by using a story as a metaphor, it was possible to design a themed experience that shared a common language. This was especially effective when communicating the product’s key features with the team and client. All of us were able to share the same mental model created by our common story metaphor.

Based on our metaphor, real user tasks are translated as:

The user needs a holistic view of the network.
The user needs to isolate targets within the network.
The user needs to be able to isolate key attributes of the network.
The user needs to filter network activity by date.
The user needs help navigating the network.

Turning Stories Into Reality

I researched a lot of examples of visualized networks and found this plot lines tree diagram on . It became the perfect visual model for the network security app I was working on.

Photo credit:

As a tree diagram combined with a subway map, it’s really easy to understand high-level information. It makes perfect sense because it fits into the forest metaphor. We see roots representing the accounts of focus and the branches representing the entire forest (network). Color coding calls out what’s most important, as well as the sources which are; groups, account types and devices. And we see the high-level relationships of everything as an easy to digest image.

The model allows users to immediately view the entire forest (whole network), the red seeds (security breaches), and how they entered the forest and if they’re growing (paths of entry and destination).

Photo credit: via

When the user flies over the flat forest, the key areas are easy to identify. As you can see in the below lo-fi mockup created in , I used color coding to highlight the time between a red seed finding it’s way into the ground (a security breach) and beginning to grow into a plant with roots and leaves (a spreading virus). The red seed is a risk. The development from seed into plant is an even greater risk. The different colors visually told the user which seeds to investigate first.

I’ll admit it’s not the prettiest prototype, but it illustrates the rough functionality � and that’s exactly what we’re looking for.

Photo credit: via

Once the user selects a seed to investigate, the path to take becomes clearly highlighted. The other elements of the forest are still visible, but aren’t distracting. In fact, all the unnecessary layers peel back to reveal the journey of the red seed and its current development status (which is what users care about most).

Next Steps

For the above prototype, I simply dragged an existing image into a UXPin project, added hotspot elements to where I wanted interactions, then dropped in the boxes on the left-side to build out the pop-up modal.Ìý

To designÌýmore narrative-driven interfaces, seek inspiration outside of the office. Pay attention to nature, to great visual artists, to anyone who boils down complex structures into simple emotional understanding. Once you have your direction, go ahead and start prototyping in UXPin with a like I did.Ìý

Designers from all over the world are gathering in Amsterdam this winter for three days of talks, workshops, and networking, all culminating in a massive cocktail party in one of the city’s historic church venues.

has been a partner of ours for years, and their conference is one of our favorites in web design. Let’s explore what they have in store this year.Ìý

The Ìýfrom January 27-29th 2016 features 15 talks and 3 workshops provided by design experts from around the world. Tickets are .

’s yearly gathering of design professionals keeps attendees informed about the current state of web design. Attendees discover current and future trends, learn advanced new front-end techniques, practice creative work skills, learn about popular case studies directly from the sources, and of course socialize with like-minded professionals.

Speakers

The former Principal Designer at Twitter was named one of the “fifty designers shaping the future of design� by Fast Company.

This lead designer for Canonical, the company that delivers Ubuntu, takes charge of Ubuntu’s presence across the web.

The Principal Developer Evangelist for Microsoft brings his web know-how and quirky sense of humor to the conference.

The current UX Vice President of Huge has worked with such well-known brands as Lowe’s, Royal Caribbean, American Express, and JetBlue.

This Cannes-award-winning director from Switzerland has in the past designed for FIFA, McDonald’s, Sony, Disney, and the United Nations.

Other speakers include:

, Global Creative Director at B&O Play (Denmark)


, Creative Team at Resn (Netherlands)


, IxD Director at Unit9 (England)


, Art Director at MediaMonks (Netherlands)


, Creative Director at MediaMonks (Netherlands)


, Group Director at Fjord (Spain)


, UX Consultant (Denmark)


, Creative Director at Stupid Studios (Denmark)


, UX Director at AKQA (Netherlands)

Ìý

Workshops

In addition to the talks, the AMS conference is hosting three hands-on workshop run by notable names in the design industry. All these day-long workshops include lunch, snacks, drinks, and materials.

The acclaimed Lebanese front-end developer explains the best practices for adopting one of the most significant new appearances to the design industry, scalar vector graphics. With their advantage in the varying screen sizes of responsive design and the security of crisp visuals in HD displays, SVGs are rapidly replacing raster formats like .jpg, .gif, and .png.

This day-long workshop will run through an entire SVG workflow, including CSS manipulation, cross-browser responsivity, and seven different techniques for embedding.

Stepping away from the computer, UX designer and illustrator shows how to apply the classic art of sketching to web design. Targeting web professionals from designers and developers to product managers, this workshop explains both the theory and technique of sketching across all skill levels. Communicate better through your sketches by learning to draw different screens, flows, transitions, and interactions.

Every designer knows the importance of a site’s emotional connections, but few know how to create them. Dogstudio designer hosts a workshop teaching how the visual principles of painting aesthetics can be applied to web design for the same emotional impact. Learn about light theory, composition, texture, typography, and other classic art principles to create more immersive and interactive environments for your users.

Venue

Planning to top past Awwward conferences in Paris and Barcelona, the first of next year’s two conferences will be held in Amsterdam’s . Located next to Oosterpark, this neo-renaissance estate offers an inspirational setting for the presentations, and a central location for exploring the city after hours.

Cocktail Party

At the end of the three-day conference, all attendees are invited to the cocktail party for networking, unwinding, and simply enjoying a night in Amsterdam. The popular event location is a converted church chapel with original ceiling paintings and marble pillars still intact.

For four hours, conference attendees are treated to a free bar and standing dinner with vegetarian options. A DJ entertains as designers from around the world kick back for this exclusive international party.

Tickets and Reservations

Tickets are available with options for conference/party, workshop, or all-inclusive. before the event sells out.

NYC Conference

Our own CEO Marcin Treder will be speaking at the 2016 Awwwards Conference in NYC. The conference will be held June 15-17, in New York’s FIAF Auditorium. Keep checking as more information develops on speakers and events, or to receive up-to-date news.

Meanwhile, if you’d like a refresher on web UI best practices, check out our free 100-page e-book . Once you’re done, feel free to practice what you’ve learned in with our step-by-step animations editor.