The creators of Ushahidi, a crisis mapping platform, have developed hardware that keeps wireless communication going in the midst of chaos.
The people behind Ushahidi, a software platform for communicating information during a crisis, have now developed what they are dubbing a “backup generator for the Internet”—a device that can connect with any network in the world, provide eight hours of wireless connectivity battery life, and can be programmed for new applications, such as remote sensing.
]]>The following is a guest post by Joshua Bader. Joshua noticed that certain 3D effects on the web could benefit from adjusting perspective as the web page is scrolled. I'll let him explain.
People love to make flat things appear as if they're three-dimensional. There are two ways to pull off this effect in a 2D environment, shape and movement.
By give a flat shape the appearance of edges or sides, we can make buttons or other objects appear as if they are raised or sunken into the screen. This is seen even here on CSS-Tricks:
The movement effect is a bit trickier. In a three-dimensional world, objects closer to you move fast, while the ones further away move slow. The further away an object is, the slower it moves. This is called the parallax effect. The parallax effect has been used in all sorts of places for the past few years.
The first method, shape, works because it makes things appear to be popping out, or pushed away from you. The second method, movement, works because it makes things seem as if they are positioned in context with each other. But, what if we combined them. An object that looks sunken into the screen, like a shelf, and its edges shrink and grow, using the parallax effect, making the object appear as if it really is in 3D space.
First we need to add some markup on our page and give the items we want to affect the class of inset. Any block level elements will do. Here is a simple form with inputs that will have the effect applied.
<form>
<label>
First Name:
<input class="inset" type="text" placeholder="Enter First Name" />
</label>
<label>
Last Name:
<input class="inset" type="text" placeholder="Enter Last Name" />
</label>
<label>
Email Address:
<input class="inset" type="text" placeholder="Enter Email Address" />
</label>
<label>
Address:
<input class="inset" type="text" placeholder="Enter Address" />
</label>
<label>
Phone Number:
<input class="inset" type="text" placeholder="Enter Phone Number" />
</label>
</form>Next we will need to style our inset elements. By giving the item slightly different color borders we can give the element the illusion of depth. This is because the joint between borders is an angle and with the different colors, it appears as if light is hitting different "sides" of a 3D area. This is the 'shape' method we mentioned earlier.
.inset {
width: 100%;
box-sizing: border-box;
background: #f9f9f9;
border-style: solid;
border-width: 30px;
border-top-color: #e5e5e5;
border-right-color: #eee;
border-bottom-color: #e5e5e5;
border-left-color: #eee;
}Now that the shape we want to manipulate is styled, we can use some simple jQuery to get the element's original border-width, window height, scroll position, target element's position on screen and convert that position to a percentage for the top edge and bottom edge.
var origBorderWidth = parseInt($('.inset').css('border-top-width')),
win = $(window),
windowHeight = win.height();
$('.inset').each(function() {
var self = $(this),
scrollHeight = win.scrollTop(),
elementPosition = self.position(),
positionPercentTop = Math.round((elementPosition.top - scrollHeight) / windowHeight * 100);
positionPercentBottom = Math.round((elementPosition.top + self.outerHeight() - scrollHeight) / windowHeight * 100);
});Once we have all of these numbers as variables, we can resize the top and bottom border-widths of each element based on its position on the screen.
var origBorderWidth = parseInt($('.inset').css('border-top-width')),
win = $(window),
windowHeight = win.height();
$('.inset').each(function() {
var self = $(this),
scrollHeight = win.scrollTop(),
elementPosition = self.position(),
positionPercentTop = Math.round((elementPosition.top - scrollHeight) / windowHeight * 100);
positionPercentBottom = Math.round((elementPosition.top + self.outerHeight() - scrollHeight) / windowHeight * 100);
self.css({
'border-top-width' : origBorderWidth - (origBorderWidth * (positionPercentTop / 100)) + 'px',
'border-bottom-width' : origBorderWidth * (positionPercentBottom / 100) + 'px'
});
});Now comes the fun part – recalculating each element's top and bottom border-widths while the page is scrolled. This will give us the desired parallax, 'movement' effect.
var origBorderWidth = parseInt($('.inset').css('border-top-width')),
win = $(window);
function set3D() {
var windowHeight = win.height();
$('.inset').each(function() {
var self = $(this),
scrollHeight = win.scrollTop(),
elementPosition = self.position(),
positionPercentTop = Math.round((elementPosition.top - scrollHeight) / windowHeight * 100);
positionPercentBottom = Math.round((elementPosition.top + self.outerHeight() - scrollHeight) / windowHeight * 100);
self.css({
'border-top-width' : origBorderWidth - (origBorderWidth * (positionPercentTop / 100)) + 'px',
'border-bottom-width' : origBorderWidth * (positionPercentBottom / 100) + 'px'
});
});
};
win.on('load scroll resize', function() {
set3D();
});There you have it. To see the effect, keep you eye on a single element as it moves up and down the page when scrolled. You will see its top and bottom border-width change depending on its position on the page. Its subtle, but effective.
Check out this Pen!
3D Inset Parallax Effect is a post from CSS-Tricks
]]>
 |
Welcome to another interview in the series called “How I Work.” These interviews revolve around how leading thinkers and creators in the Web world design, code and create. The goal is not to get into the specific nuances of their craft (as that information already exists online), but rather step back and learn a bit about their habits, philosophies and workflow for producing great work.
You might want to have a look at the first interview as well, which features Doug Crockford, Yahoo’s JavaScript evangelist.
Today we’ll talk to Duane Bray from IDEO, a firm that is consistently listed as one of the world’s most innovative companies due to its uncanny ability to constantly come up with great ideas for its clients. Duane Bray is a partner at IDEO and heads up the firm’s digital business from its New York City office.
Duane Bray at IDEO’s New York City office.
Like all IDEOers you meet, Duane Bray is unfailingly nice, with a soft, well-spoken voice. He reminds you of the kid in the back of algebra class doodling away during lecture and still acing the tests.
We recently sat down with Duane over a couple sessions to get his thoughts on Agile development, how you too can gather great user insights, tips for prototyping digital projects with clients and why he still sketches interfaces out on paper.
Q: What has you excited about digital work these days?
Duane: I’m particularly excited about the movement away from standards-based specifications towards real stuff. For us, we’ve been doing a lot more experimentation around Agile development processes and pairing up designers and developers side by side throughout the process from day one. The last thing you want to do is hire a designer who is really talented at conceptual thinking and say, “Okay, now you’re going to spend six weeks documenting everything with InDesign for the thing you did.”
What’s funny though, is when you have a designer working with a developer on weekly builds, all that stuff still gets done. But from the designer’s perspective, they are constantly making. We’ve found our teams to be super excited to be working in this way.
Certainly we’re not the first to discover Agile, but it’s made a big difference in our culture because we want people to get their ideas as real and tangible as soon as possible.
Q: How does IDEO go about getting big, breakthrough insights?
Duane: Well, for a lot of our clients, they come to us with these sort of vague questions, and they want us to help them figure that out. So, we want to start off by making sure we’re a bit exploratory — and that involves going out and being inspired by behaviors.
For example, there might be a question around new forms of video consumption online. We want to go out and find people that are representative of some extreme form of behavior. This helps us get inspired and further shapes our strategy.
One woman we found has two computers at work. One is displaying her work and the other one is displaying reality television. She needs both streams to do her job. The interesting thing is you can almost hit pause and ask her what’s going with the show and with her work and she can answer both.
So it starts to suggest, what are some of the interesting forms of literacy that are coming through our digital tools? And how might we design for this? Are there new mental models we haven’t thought about before, rather than going with industry standards?
A brainstorming session at IDEO.
Q: IDEO is famous for “thinking with your hands” via prototypes — how do you transfer this over to digital?
Duane: For me I don’t see any distinction in how IDEO designs digital products compared to our other products. We’re still going to get out there and be inspired by what’s going on in the world.
We always start our projects with some sort of investigation into what are people doing and how it impacts how they’re going to engage. And we get tangible quickly — and it’s not so very different from any other prototyping process. We do group sessions to generate ideas, we sketch together, we might have someone make a mock-up on a phone or tablet to test out a behavior. What’s most important for a prototype is to choose the right fidelity for the question you’re seeking to answer.
Q: What’s this discovery process look like?
Duane: Sometimes we’ll prototype something in the browser or on mobile to test some of these concepts out. We’ll also play around with paper prototypes because it’s an appropriate way to get client input.
But I like to find ways to disrupt the conversation when we’re talking with consumers.
For example, if something is very polished, consumers will feel they have to say they like it because it’s polished. So sometimes having hand-sketches, along with something on an iPad, we’re able to get very nice conversations going.
Prototyping is about blending that low-fidelity and high-fidelity process and blending our thinking as we go along.
Q: How would you make a case to a Smashing Magazine reader for adopting a prototyping process with their clients?
Duane: Well, the client is going to be in a better position to make more informed decisions because they are seeing things that are real. I would also argue that it isn’t a massive investment anyway and there is a better payoff down the road because you’re getting more real (tangible) early on — which means you’re going to get better input from users.
Imagine not going through that process: doing a bunch of sketches, building out a spec document, a developer builds it, you test it and people hate it.
At that point there has been such a huge investment in producing that thing. So there is actually a lot of emotional attachment now and it’s either going to be financially impossible to correct it or people will be too wedded to the idea and it’s going to be impossible to change.
Q: How do you show these prototypes?
Duane: We do a lot of live work. We’ll recruit a panel of end users. Particularly in the early stages when we’re looking for inspiration, we’ll want to be in their (the users’) context. So instead of bringing them into a focus group, we might go into their homes or offices and observe them. We’ll also put stuff up on the web and blast out an SMS message and ask people to interact so we can get a more broad approach as well.
Sometimes we’ll do a hybrid of both and have our developers do quick builds and mock-ups and then go back out into the field to get more insights with a select group.
We want to know less about what percentage of people clicked on this or dropped off and more about their process of going through and using that experience. What are the specific things that are barriers and why?
At some point, when we have a much more robust build, then we’ll push it out to more people. So there is definitely an interim phase. We tend to start high touch and stay that way for a while. We’re looking for finding the emotions around why people engage or why they don’t. If we understand those, it becomes a lot more powerful in how we tune the tools.
Q: What’s your experience been with Agile Development processes?
Duane: One of the things we’ve found when we’re working in an Agile process is that we can actually be incredibly fast.
An iPhone app that IDEO created for Lincoln Center.
To give you an example, we did a project here in New York for Lincoln Center, which was their first iPhone app, and we ran it as an Agile process. We went from kick-off to an app in the iTunes store in eight weeks. That’s concept, design and build (and I wouldn’t want to claim we can do every project on that timeline). But we had an amazing client that was able to make decisions very quickly, so we had a fast turnaround time there.
But again, it was because we were getting very real, very fast.
Q: Can you give us a step-by-step breakdown for creating this app in only eight weeks using Agile?
Duane: Sure. First, we spent half a day with our designers and developers at Lincoln Center’s campus, and in advance we created briefs about what an app could look like around different themes. We broke up into teams and every group had to go and interview people at Lincoln Center and talk to them about the theme and do a tour themselves.
We had clipboards of iPhone screen printouts, and they (the teams) had to sketch an experience and get feedback — all in four hours. It was a great way to get immersed: we talked to security guards, out-of-town tourists, locals who would hang out there, people at the information desk and we got a ton of insights.
So, we had all these amazing stories to go back and work with for honing our hypothesis on what this experience should be and we started building it. We did a detailed sketch session, prioritized the feature set, mapped out the flow, did some wireframes and then did a planning session with our development team (from Pivotal Labs). The project was so fast; there were literally just screenshots on the iPhone to simulate the flow. We were sharing it with people quickly and got to the stage where there was a build a week.
Screenshots of the iPhone app that IDEO created for Lincoln Center.
But the reality about that process is that you couldn’t do waterfall in eight weeks. I would say it’s more efficient than an old-fashioned step process.
Agile has been around for 20+ years, and we’re certainly not the first to discover it but now it’s finally getting traction. Designers and developers want to spend time making stuff and getting it out there and this process is all about that.
Q: What habits or hang-ups do you see in great web designers and developers?
Duane: Well, one of the things I think that is probably the most challenging for working in this more iterative, rapid-fire way is the ability to be more open and transparent with the work that you’re doing. Sometimes as designers we want to spend some time crafting, hiding in a corner and sketching and then do the “ta-da!” But some of this new way of working requires us to move beyond that.
One of the things I’ve been thinking about is how do you encourage greater transparency of work that’s in progress? We’ve been prototyping with tools like Flowdock that allows for conversation to sit around the workflow. That is particularly important, if we’re talking about getting stuff out there really early. These are the certain things that aren’t to the nature to how a designer is trained.
There is also this thing about great developers having curiosity. Being curious about the end user you’re designing for and involving the developers in that process for insights. Being able to imagine if they’ll use the thing you’re making.
Some folks are really natural at that, and in other cases it takes a lot of work. But I think that’s where we’re going — working off of blended teams with people of different skill sets.
Q: Any tips on how a small shop can get similar disruptive insights like IDEO does?
Duane: As designers it’s easy to get blinders on because we know what we know and it’s easy to get caught up in it. So, take some time to start over like you’ve never done this before. Sign up for some new tools and track your progress and behavior as an end user. There is something about just getting out to find inspiration. Look for stuff going on, whether it’s a related conference or just inviting in some experts to talk over wine and cheese at your office.
Even a small shop can reach out to friends of friends and watch them interact with some early prototypes or simply have a conversation. Say you’ll buy them drinks every other week and just show them stuff and see what you can learn from building that into your process.
One thing I do is have a screen on my phone that is just apps I would never normally download. So, we might be doing a project around, say, video, and I’ll go try every app out there and use this as a great way to learn. Projects are often an opportunity to dive deeper into a subject area you’re not necessarily interested in but you could be super-inspired by it.
Q: Now how do you capture those inspirations?
Duane: I usually have my notebook open as I’m using all these apps and I’m sketching out ideas and patterns. You start to get a feel for trends and think about different ways to accomplish the same task.
Sketchnotes in Duane Bray’s notebook.
Q: Where and how do you do your best work and not get burned out?
Duane: I usually get away from my desk. I’ll go sit up front on the couch with my laptop and my sketchbook. I force myself to move around. If you just sit at your desk you’re inclined to get into bad habits because everything is sitting around you. Some people have the zero inbox but I have 35,000 messages, so I just use the search box in email.
I’m someone who runs on intuition and not organizational processes. I have a thousand sticky notes on my desk.
But I’m pretty rigid about taking weekends off. I wasn’t always this way but I’ve learned that by being open to being inspired by stuff that has nothing to do with what I’m working on is really important.
Otherwise, you’re not grounded enough to bring something original to the table.
(cp) (ea)
© Jacob Cook for Smashing Magazine, 2013.
]]>
Every week we feature a set of comics created exclusively for WDD.
The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.
These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.
So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.
Feel free to leave your comments and suggestions below as well as any related stories of your own…
Can you relate to these situations? Please share your funny stories and comments below…
| MENSO: 4 Fantastic Premium UI Sets – only $19! |
 |