A panoramic projection screen controlled from multi-touch holographic platform. 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. Technologies used: Unity3d, C#, Scaleform, Flash, AS3.
After years of resistance, Apple’s iPhone 6 announcement last week officially signaled the Dawn of the Era of Huge Screens.
And it’s going to crash into existence in a big way. Just this Monday,Apple announced that they’d sold over four million pre-orders for the phones the opening night of pre-orders. In only one night, they sold almost half of what they sold the entire opening weekend last year for iPhone 5s and 5c.
So it’s looking like the 3.5” and 4” screens of yore will start their inevitable decline very quickly. That means that those of us who’ve gotten comfortable building apps, responsive sites and mobile-optimized web views with the old ways in mind have some learning to do (myself included).
The decline is already in motion. Adobe’s 2014 Mobile Benchmark Report claims that mobile browsing among phones with 4” screens or smaller is down by 11%.
That means that learning how to design for thumbs is now more important than ever. Luckily, it helps that these phone display sizes are going to be practically universal. A cursory examination of the most popular Android screen sizes points to a range of 5.1” and 5.7”.
Apple’s changes will make our lives easier as smaller screen sizes die off. But only if we learn to adapt our designs.
If not, the future is going to be pretty painful for those thumbs.
This is especially important for those of us who’ve only been building iOS apps. All those design tradeoffs we thought we never had to worry about are suddenly right here in front of us — in an avalanche of pre-orders.
DESIGNING FOR THUMBS?
What does it mean to design for thumbs? It means building interfaces that are the most comfortable to use within our thumb’s natural, sweeping arc.
But this gets complicated. We unconsciously adjust the way we hold our phones to reach certain controls in various areas of the screen. During any given day, I’ll wager that you stretch your grip, choke up on the phone, or angle it in ways that make reaching difficult areas easier.
But we have to start somewhere. Research suggests that most of us hold our phones in the following way — with the bottom of the thumb anchored on the lower-right-hand corner:
This assumption comes from a study that mobile expert Steve Hoober conducted with 1,333 people early last year. He discovered that people held their phones in the following ways:
- one handed: 49%
- cradled: 36%
- two handed: 15%
Handedness figures were also instructive:
- right thumb on the screen: 67%
- left thumb on the screen: 33%
Hoober notes that left-handedness figures in the population are around 10%. So the observed higher rate of left-handed use could be correlated with people doing other things at the same time — smoking, riding a bike, drinking coffee, eating currywurst, etc.
THE THUMB ZONE
The Thumb Zone is a heat map of sorts. It’s a best guess for how easy it is for our thumbs to tap areas on a phone’s screen.
Let’s use Hoober’s research to create a Thumb Zone map representing what seems to be the most common use case:
- one-handed use
- right thumb on the screen
- thumb anchored in the lower-right-hand corner
Here's the Thumb Zone heat map applied to every iPhone display size since 2007:
Here's a more direct comparison of the iPhone 6 and iPhone 6 Plus next to each other:
You’ll notice that the “safe” green zone stays roughly the same (more on why the iPhone 6 Plus is different in a second). That’s because our thumbs don’t magically scale with the screen size. And that’s also unfortunate, because I loved Dhalsim in Street Fighter as a kid.
But what changes is the sheer amount of “Ow” space, which becomes startlingly apparent with the iPhone 6 Plus.
Furthermore, you’ll notice how the shape of the “Natural” zone changes for the iPhone 6 Plus. That’s because it requires a different type of grip due to its size, using your pinkie finger as a stabilizer. It surprised me how different the experience was.
A note: my thumb doesn’t reach fully across the phone’s screen. Maybe you have bigger hands than I do. So terms and conditions certainly apply.
Let’s analyze how the Thumb Zones change when you shift your grip. Sometimes you might be in a situation where it’s easier to tap the phone with your thumb’s anchor at the vertical midpoint.
Here’s an illustration of this in action for iPhone 6 and iPhone 6 Plus:
Choking up might not be necessary, though, with iOS 8's "Reachability" feature. (That is if Apple takes the opportunity to teach people about its existence). By double-tapping the home button (not the same as "clicking" to display running apps), iOS will push the top of the screen down within one's grasp.
And here's how Reachability looks with the Thumb Zone overlaid on the iPhone 6 Plus. Notice anything?
Yes, Apple's demonstration images places the thumb in exactly the "Natural" zone.
Another observation on Reachability, as pointed out by John Gruber: "Reachability on the 6 Plus moves things further down the display, percentage-wise, than it does on the 6 — it’s all about moving the top of the display to a typical thumb’s length from the bottom of the device."
Here's that in action:
WHAT’S IT ALL MEAN?
Mobile screen sizes on the whole are becoming more similar, and that’s a good thing. But it also means that we can’t just treat screens in the 5.5” range simply as a scaled-up version of a smaller phone. Grips completely change, and with that, your interface might need to do so, as well.
I think prototyping will become even more important. So if you haven’t jumped on that train, now’s the time. (PS — I’m launchingXcode for Designers next week, which teaches designers how to build interactive prototypes in Xcode in less than a week. It’s chock-full of videos and has a really great pre-launch discount running right now. Get on the list if you’re at all interested.)
DOWNLOAD THE UPDATED THUMB ZONE TEMPLATES
Want a copy of the Thumb Zone diagram I drew for these screenshots? You’re in luck. You can download them as individual JPGs here.
Hopefully this helps with your current project. If you got any value out of it, I'd be grateful if you shared it. You can Tweet it now with one click.
VC DESIGN PARTNER JOHN MAEDA SAYS THAT THE MOST SUCCESSFUL TECH COMPANIES OF THE FUTURE WILL REALLY BE DESIGN COMPANIES. HERE'S WHY.
Are the fortunes of design on the rise in Silicon Valley? A resounding yes, says John Maeda, design partner at the venture capital firm Kleiner Perkins Caufield Byers. During a presentation at South By Southwest 2015 on Sunday, Maeda argued that not only is Silicon Valley taking design more seriously; design is actually taking over. Here are four key reasons why the most successful tech companies of the future will really be design companies.
MOORE'S LAW NO LONGER CUTS IT
Starting with Flextronics' acquisition of the design consultancy Frog in 2004, the last 10 years have seen an increasing number of tech companies acquiring creative firms. For example, Google now ownsindustrial design firms, while Facebook owns software and digital design firms Sofa, Teehan+Lax, and Hot Studio. And this trend is starting to hit critical mass: 27 startups co-founded by designers have been acquired by big tech companies since 2010, while six venture capital firms have invited designers onto their teams for the first time in the past year.
DESIGNERS ARE NOW HIRED AT A RATE OF ONE TO FOUR COMPARED TO ENGINEERS AT TECH STARTUPS.
This trend is only going to continue, Maeda said during his presentation, because "Moore's Law no longer cuts it as the key path to a happier customer" in Silicon Valley. For years, the solution to every problem in tech was to build a faster chip. Now, design—not silicon —is seen as the answer. For example, look at the new MacBook: from a pure silicon perspective, it's slower than the old MacBook and MacBook Air, but its industrial designpushes the envelope in other ways, from the simplicity of its ports to its effortless portability.
START WITH DESIGN, DON'T END WITH IT
With design capturing more and more venture capital dollars, there's a shift occurring in tech. Before, tech companies saw design as something to spray on a product at the end—think of the generic beige case you might slap a desktop PC into, but increasingly, the companies that are making the biggest splash are integrating design into every product from the beginning, like the Nest smart thermostat.
The happy marriage of technology and design long predates Silicon Valley's rise. Consider, for example, Michael Thonet's No. 141 chair, also known as Vienna coffee house chair. Designed in 1859, the No. 141 was designed in such a way that exactly 36 chairs could be packed into a one-meter shipping container when disassembled. It's the original flat-pack furniture, and that design allowed Thonet chairs to be manufactured cheaply in Eastern Europe, then shipped to places as far away as New York while keeping the price low. Over 50 million No. 141 chairs have been sold since 1859, a feat that would be impossible if good design thinking hadn't informed every part of the manufacturing process.
"To achieve great design, you need great business thinking/doing—to effectively invest in design—and you need great engineering—to achieve unflagging performance," Maeda argues in his presentation. Letting design lead your business isn't something Apple came up with. It's something that the best businesses have always done. Tech is only really figuring out.
TECH IS NO LONGER FOR TECHIES
There was a time when tech companies didn't have to worry about design, because their audiences were techies, just like them. Not only is that no longer true, but the ubiquity of tech has made user interface and experience design more important than ever before. Back in the '80s and '90s, you might only interact with a bad user interface a couple of times a day—Maeda calls these "pain points"—but now that we check our smartphones hundreds of times a day, the number of possible "ouch points" that can alienate a user have increased tenfold. "User experience matters so much now, because we are experiencing so much," Maeda says in his presentation. "A pain point can become a 'pain plane' on mobile. That's a lot of ouch."
THE HAPPY MARRIAGE OF TECHNOLOGY AND DESIGN LONG PREDATES SILICON VALLEY'S RISE.
WHY DESIGNERS ARE IMPORTANT TO STARTUPS
Designers are key to startups and established tech companies alike, Maeda argues. In startups, early hires heavily influence corporate culture, so bringing in designers on the ground floor is hugely important. That's a fact startups are surely starting to wake up to: designers are now hired at a rate of one to four compared to engineers at tech startups. According to KPCB's talent partner Jackie Xu, this ratio used to be closer to 1:15 or even 1:30.
That's how designers can help build a company from the ground up. But Maeda also sees a new trend starting to happen. More and more designers are being hired in upper management positions in tech companies, advocating for design from the top down. Take Nike, which has a designer as CEO.
Read Maeda's Design in Tech report here.
An interactive contents with large format movie for experiencing a modern history. Implementation - Create a modern history contents for 8X6 Interactive floor in large scale. - Create Main Movie in high resolution (7680 * 3240). Installation place Gunsan Modern History Museum (past Cho-sun Bank)
2010 National Museum of Ethnology Japanese hiragana is made of a consonant and a vowel sound. And japanese words are made of a combination of hiragana. Kotoba Stamp is a interactive display to understand a mechanism of word and sound using stamps. Each stamp has one sound, visitors can see various graphics and listen to sound which are displayed on a table depend on a stamp combination or the order. This is a first trial to apply our science exhibition know-how to the liberal arts area.
Interactive Kinect Videowall made for CUBO (Unipol). People can interact just with movements. fuse* interactive.
interactive museum for "fondazione archivio diaristico nazionale" The exhibit is a tribute to the soul of the L’Archivio and is a wonderful melting pot of memories, confessions and secrets hidden on the shelves and in the drawers, just waiting to be revealed.
Stimulant created a dual-screen "Pipeline Explorer" that featured data-driven layouts of molecules being researched and studied.
With the Cicret Bracelet, you can make your skin your new touchscreen.
It’s hard enough to design a great mobile or Web site but what about experiences that span these devices and more? Join Luke for a set of lessons learned designing Web products that attempt to embrace simultaneous and sequential multi-device use. What worked and, more importantly, what didn’t?
Volvo Trucks has developed new technology that can do a 360 degree scan of its surroundings and suggest actions to avoid incidents. The technology is developed specifically to protect vulnerable road users like pedestrians and cyclists.
Tech from Korean company Mediafront has produced video displays that are completely transparent. Demonstrated with commercial possibilities such as vending machines and refridgerators, it is easy to see how this tech can be used for new media art. Here are some short videos of the tech in action - the first two were taken by my new favorite Japanese tech blogger, Kyoko Omi: http://prostheticknowledge.tumblr.com/post/99756057691/transparent-displays-tech-from-korean-company
Over the past three years, Tom Chi & I have presented ourInfluencing Strategy by Design workshop to over a hundred professional designers across the World. This full-day course teaches mid to senior level designers how to influence and improve strategic decision-making within their organization.
In particular we outline how organizational dynamics, metrics, design skills, and executive presentations can open up unique opportunities for designers and get them a "seat at the table". Over the years, I've been compiling the materials we have presented. Here's a set of our workshop materials and presentations.
Each time, we start the course by asking attendees to share what factors they felt were limiting their organizational influence. Each time a common set of themes emerged: organizational imbalance, lack of shared understanding, resource constraints, and market dynamics.
At the start of each course we asked attendees to share what they wanted to see as a result of greater strategic influence. Here’s a compilation of what we’ve heard.
One of the first areas of focus in the Influencing Strategy by Design course is organizational dynamics. Many designers hoping to increase their role in product and corporate strategy start with their design organization and its position in the company.
Do these phrases sound familiar? “Our design organization needs to be more strategic.” “The design team is not included in up-front strategic decisions, we need to convince the organization we should be.” These circumstances are frequently blamed on either reporting structure (where the design team reports in), or a lack of organizational understanding about the role of design. While both of these factors may be in play, focusing only on them to increase influence is unlikely to yield results.
We also walk through some global trends that provide designers with an opportunity for leadership roles. Specifically Tom illustrates the transition from the 1800s craft economy to the 2000s creative economy.
Perhaps the biggest area of focus in the course is how a designer’s existing skills can be applied to business and product strategy. Many design organizations seek to impact strategic decision-making by learning how to speak the language of business. But until they master these new skills, they are likely to be the least qualified people to discuss business strategy at the corporate decision-making table. Yet no one else at the table besides the design team has a complete set of design skills. These skills define a unique perspective that designers can bring to strategic work. Additional information:
- Design Skills for Strategy: the short version
- Strategic Skills of Designers
- How Designers Build Strategy
We spend a fair amount of time discussing the impact of metrics on product design and strategic influence. Metrics are used by the organizations that track them to decide what initiatives to pursue, to understand the impact of behavioral trends on decisions, and to interpret the impact of past decisions.
One of the last topics discussed in the course is executive presentations. When working on strategic initiatives that impact business direction, more likely than not, designers will need input and buy-in from key stakeholders.
Presenting to executives doesn’t have to be a high stress affair. In fact, many senior level leaders relish the opportunity to hear customer stories and get an influx of data from “the front lines”. Because of their far-reaching responsibilities, executives can’t know all the information they need and are often short on time. As a result, they are data hungry and want the information they need presented with high data density and clarity. Understanding this mindset illuminates several ways to structure and get the most out of executive presentations.
We also outline several tips for presenting to executives or senior leadership within an organization.
At a high-level we advocate these three steps for any designer or design team interested in expanding their strategic involvement or influence.
More on Strategic Influence
- Articles by Luke Wroblewski on strategy and design
- PDf of presentation from Influencing Strategy by Design session at VizThink 2008
Mike Stern, Apple User Experience Evangelist in Designing Intuitive User Experiences - 211 WWDC 2014 session (at 31’ 57"):
But I feel like I would be remiss If I didn’t use this opportunity to talk with you about hamburger menus. AKA Slide out menus, AKA sidebars, AKA basements, AKA drawers.
Now, these controls are very common on iOS, and on other platforms. And I’m sure many of you here work on apps that have these. You guys made the decision to put it in your app. And I’m sure that you did so with the very best of intentions. And I will say that these controls do a couple of things very well.
View the article with images here http://blog.manbolo.com/2014/06/30/apple-on-hamburger-menus
For one thing, they save space. So rather than taking up a bunch of room at the bottom of the screen for a tab, you’re just taking up a little bit of area in the top left corner for the hamburger menu.
And you practically have the entire height of the screen to show options to people, and if that’s not enough, you’re going to cram more awesomeness into your app, people can scroll, right.
But, this is - I actually haven’t played around with the latest version of Xcode, so I really hope that they haven’t changed this - I don’t believe you’ll find a hamburger menu controller inside of Xcode.
Now, typically we don’t provide design advice about the things that we don’t offer to you guys, but I can’t help myself, right? I’ve so many conversations with people about this control, spending hours and hours talking about it, and you know, I think it’s important that we talk about it here today.
And again, I’m not going to say that there’s no place for these controls categorically. I think there are some apps that could maybe use one. But I will say that their value is greatly over-stated, and they have huge usabiliy downsides too.
Remember, the three key things about an intuitive navigation system is that they tell you where you are, and they show you where else you can go. Hamburger menus are terrible at both of those things, because the menu is not on the screen. It’s not visible. Only the button to display the menu is.
And in practice, talking to developers, they found this out themselves. That people who use their app don’t switch to different sections very frequently when they use this menu. And the reason for that is because the people who use their app don’t know where else they can go. Right? They don’t know because they can’t see the options, or maybe they saw it at one point in time, but they have since forgotten.
And if you use this control, you have to recognize that the people who use your app may not realize the full potential of your app.
Hamburger menus are also just tedious, right? If you want to switch sections from the Accounts tab to the Transfers tab, all you need to do is tap the button and you’re there instantly, and if you want to go back, you tap the account button, and you’re back where you started from.
Doing the same thing with the hamburger menu involves opening the menu, waiting for the animation to finish, re-orienting yourself, finding the option you’re interested in, tapping that, and then waiting for the animation to complete, getting back to where you were before, and if you want to go back, you have to open the menu again, go through that whole process, and there you are, again.
It takes at least twice as many taps to change sections. Something that should be very easy and fluid is made more difficult.
And the other thing the hamburger menus quite frankly do badly is that they don’t play nicely with back buttons. Right? I’ve seen this a lot. Back buttons are supposed to go in that top left corner position, but instead there’s this hamburger menu there, so people put the back button right next to it, but no longer does this look like a back button anymore, it just looks like this arrow which is pointing to the hamburger menu, looks ridiculous, and sometimes people recognize that it looks ridiculous so when you drill down into the hirerarchy of an app, the hamburger menu goes away. Now it takes even more steps to switch to a different section. You have to go back up enough times to get to a level in the hierarchy of an app to get to a view that contains the hamburger menu.
Now, sometimes people will try to solve this by putting the menu on the right-hand side, but that’s not advisable either. That location is a really important location. Usually, you can put some kind of action there, you know, like a plus sign to add something, or an edit button.
And finally, the downside of being able to show a lot of options is that you can show a lot of options. Is that you will show a lot of options. The potential for bloat and misuse is tremendous. They allow you to add all sort of stuff that your users don’t really care about. Like information about the app. Or version history, or credits. I hate to break it to you, but no one cares.
And the other thing is that people wind up taking ads and special offers and making them look just like regular sections and putting it in there too. That sucks. No one wants that either. Look, drawers of any kind have a nasty tendency to fill with junk.
Okay, let’s move on. [ Applause ]
Apple could not be clearer: don’t use hamburgers menus on iOS.
The 6 Plus is the first iPhone that sports a “Retina HD” display — the sharpest display Apple has ever made. It forces designers to provide an additional set of image resources to developers to match that sharpness.
View the article with images here http://www.smashingmagazine.com/2014/10/15/create-assets-for-multiple-scale-factors/
We needed only one set of assets for the original iPhone up to iPhone 3GS. And when iPhone 4 came out with the Retina display, we also needed 2x assets — images twice as detailed. Now, with the display of the 6 Plus being even more detailed than that of the iPhone 4, we will also need to provide 3x assets. The numbers 1x, 2x and 3x are also called “scale factors.”
Of course, Android developers have always had to deal with many different sets of assets. Still, designers are finding themselves questioning their production workflow. In this article, we’ll focus on iOS, but you could easily extend this approach to Android and the web. We won’t try to provide a silver bullet, and perhaps other ways might seem easier at first, but this article lays out a solid workflow that scales up for big projects.
First off, your icon sets should be vector-based. The approach described in this article focuses on generating multiple asset versions from a single vector shape in a Photoshop document that contains all of your icons.
A unified icon document has the advantage of keeping everything together in one file, allowing you to see how well your icons and assets harmonize.
If you’re designing for iOS 7 and above, then you might think that 1x versions aren’t needed anymore. However, you’ll still need them for devices such as the original iPad Mini, the iPad 2 and potentially Android and the web.
Set Up Photoshop
First, I’ll show you how I set up Photoshop. If you know what you’re doing, you can use other settings. But for those curious about how I like to work, this is it:
- Disable eye candy like “Animated Zoom” and “Flick Panning.”
- Disable “Snap Vector Tools and Transforms to Pixel Grid.”
The first point is a matter of personal taste, but not following the second point can get in your way when you’re trying to be precise with the Direct Selection tool.
These selections will help you working precise with the Direct Selection tool. (View large version)
Then, I’ll configure the Move tool (V) to select layers. You don’t need to check “Auto-Select” because you can select a layer automatically by pressing theCommand key while clicking. Disabling this option protects you from moving layers unintentionally.
Configure the Move tool (V) to select layers. (View large version)
First and foremost, I believe that design and production are two separate phases.When your creativity is flowing, you shouldn’t worry much about production constraints.
Design at your favorite resolution (perhaps 2x), and lay out using the dimensions of a device you’re familiar with. But definitely use a real device, and use apps like Skala Preview and xScope to mirror the design live on your device. You should not be working with apps unless you are constantly checking the design on a real device.
Tidy Up Those Vectors
As noted, I’ll assume that you’re designing your icons in Illustrator. Before copying them to Photoshop, you’ll need to tidy them up. Use Pathfinder to add and subtract paths until you have a single shape.
If you design your icons in Illustrator, you need to tidy them up before copying them to Photoshop. (View large version)
On the left above is a complex icon made up of multiple shapes, including a white shape to simulate transparency. For the icon on the right, I subtracted the white rectangle from the black one behind it. Do this by selecting the two rectangles and pressing the “Minus Front” button in the Pathfinder panel. Then, select all shapes and click “Unite” to combine them into one.
Now, copy the path to Photoshop, and paste it as a shape layer.
Paste your path as a shape layer.
If your shape ends up a mess, that means you didn’t tidy the vector graphic properly.
When you paste the icon in Photoshop, it might look something like this:
When you paste the icon in Photoshop you will probably see those gray pixels around the shape. (View large version)
When you zoom in close on the icon, you will probably see those gray pixels around the shape. Those “partial pixels” occur if a shape does not fill an entire pixel. We don’t want any of those.
We want to start working from a 1x version of the icon because, when tidied up properly, you will be able to scale this version up to 2x and 3x without any problems. If you did the original design in 2x, then you’ll need to scale the shape down to 50%.
Now it’s time to align the horizontal and vertical lines to the next full pixel. It’s OK if curves and diagonal lines don’t fill up entire pixels.
Use Photoshop’s Direct Selection tool to mark a group of misaligned anchor points, and use the arrow keys to move these points between two pixels.
Note: The closer you are zoomed in (use Option + Shift + mouse wheel), the more precisely you will be able to move the anchor points.
The anchor points of the bottom and the right side are now aligned to the pixel grid.
All partial pixels are gone.
Do A Check-Up
Now, make sure all anchor points are on the grid by scaling your 1x version up to 500%. If you see partial pixels, then align them as described above. If everything checks out, then scale the shape down to 20%.
Remember: From now on, you should always scale proportionally from the upper-left corner, and always make sure that the X and Y values are round numbers.
If you see partial pixels, then align them as described above. (View large version)
Let’s see how different resolutions of our icon work out. Select the 1x version (V, then Command + mouse click), and duplicate the icon (Option + click and drag) to a position next to the 1x version.
Scale the duplicated icon up to 200% proportionally from the upper-left corner. The 2x version should show no new partial pixels. It should only be bigger.
To keep things simple, we will assume you are happy with the 1x and 2x versions and that you now want to see the 3x one.
Duplicate the 2x version (Option + click and drag), move it off to the side, and then scale it up by 150%. (So, 200% × 150% = 300%)
Later in this article, I’ll tell you what to do if you are not happy with the results. But if you are happy with the 2x and 3x versions, then you know now that 2x and 3x versions can be generated from the 1x version without any problems.
Go ahead and delete the 2x and 3x versions — we will be generating them automatically.
Generate And Enjoy
Photoshop has a built-in tool called “Generator” that automatically renders a shape layer to multiple image versions. To do that, we have to create a layer group and give it a special name: the file name and scale factor for each version.
In this case, it should look like this: cover.png, 200% firstname.lastname@example.org, 300% email@example.com
The commas separate the versions, and the percentage tells Photoshop the amount of scaling.
The commas separate the versions, and the percentage tells Photoshop the amount of scaling. (View large version)
Now, activate Generator.
Activate Generator. (View large version)
Generator will create a folder next to your PSD file and will automatically save PNG files to it when you save the Photoshop document.
Generator will automatically save PNG files when you save the Photoshop document. (View large version)
To add a new scale factor at a later point in time, you simply have to alter the layer’s file name.
Get Creative For Different Resolutions
Modifying artwork for different scaling factors is a common practice because you can show more detail in a 2x graphic than you can in a 1x version.
In the following example, the 1x version of the icon contains just a single eighth note, whereas the 2x version contains a beamed note.
Create different icons for different resolutions. (View large version)
Obviously, you wouldn’t delete the 2x version because it is different from the 1x. Create an extra group for the 2x version, and give it a layer name that is compatible with Generator. Because you’ve already scaled the 2x version in Photoshop, don’t add “200%.”
To end up with a 3x version after working in 2x, you’ll have to scale by 150%. So, you would add this number to the 3x file name.
To end up with a 3x version after working in 2x, you’ll have to scale by 150%. (View large version)
Making the 2x versions of your assets exactly two times larger than the 1x assets is absolutely critical. Sometimes this is harder to do than you think. Consider this keyboard:
Making the 2x versions of your assets is sometimes harder to do than you think. (View large version)
For the 1x version (the smaller keyboard on the left), I decided that 1-pixel-wide black keys were to thin, so I used 2 pixels.
When you scale that version up (marked in pink in the keyboard on the right), you end up with black keys that are 4 pixels wide, which looks a little too wide.
But with 3-pixel-wide keys, the distance between all of the keys changes. To keep everything symmetrical, we need to make the keyboard 1 pixel shorter. And because we can’t scale 3 pixels by 1.5 without ending up with fuzzy graphics, we also need a special 3x version.
To fix the export size of our 2x asset, we can add a layer mask. Generator will always use the dimensions of a layer mask if one is present.
To fix the export size of our 2x asset, we can add a layer mask. (View large version)
Generator will always use the dimensions of a layer mask if one is present. (View large version)
Hopefully, the methods described here will simplify your workflow. As you can see, creating pixel-perfect assets for different screen sizes and densities isn’t such a chore when you use vector graphics to your advantage and let Photoshop do the grunt work.
DOWNSIDES OF THIS APPROACH
- Assets are stored at 1x in the Photoshop file.
UPSIDES OF THIS APPROACH
- Create multiple image assets from a single shape layer, potentially saving yourself a lot of time in the future.
- Icons are all in one document.
- Generating assets for other scale factors from your PSD becomes easy for other people.
- Seeing which resolutions of an icon need special attention becomes easy for other designers.
The best review of the Apple Watch I have read so far. Tons of photos on the original post seen here: http://www.hodinkee.com/blog/hodinkee-apple-watch-review
I'm not even sure we can call it a watch. Okay, it goes on the wrist, and it happens to tell the time, but that's about where the similarities between Apple's just announced watch and the hand-assembled, often painstakingly finished mechanical watches we write about, and obsess over, end. I was lucky enough to be invited to Cupertino to witness the announcement of the Apple Watch firsthand, and though I do not believe it poses any threat to haute horology manufactures, I do think the Apple Watch will be a big problem for low-priced quartz watches, and even some entry-level mechanical watches. In years to come, it could pose a larger threat to higher end brands, too. The reason? Apple got more details right on their watch than the vast majority of Swiss and Asian brands do with similarly priced watches, and those details add up to a really impressive piece of design. It offers so much more functionality than other digitals it's almost embarrassing. But it's not perfect, by any means. Read on to hear my thoughts on the Apple Watch, from the perspective of a watch guy. Oh, and there are dozens of in-the-metal pictures, too.
I won't get into the raw functionality of the Apple Watch – for that, refer to my colleague Kelly Jasper's introductory article here. Instead I've chosen to focus on the many things I believe Apple got right and those I believe they got wrong, all the while viewing this piece of wearable technology not as a digital peripheral, but as an actual watch. Essentially, what can our friends in Switzerland learn from Apple, and what can Apple learn from the Swiss.
WHAT'S GREAT ABOUT THE APPLE WATCH
The overall level of design in the Apple Watch simply blows away anything – digital or analog – in the watch space at $350. There is nothing that comes close to the fluidity, attention to detail, or simple build quality found on the Apple Watch in this price bracket. The Sistem51, for example, is a very cool, inexpensive mechanical watch. But it feels like it costs $150 (for the record, I bought one and adore it). Then, for closer to the price of the Apple Watch, you could own this, which is, well, downright horrific in just about every conceivable metric. Seiko does offer some nice things at $349 or less, but again, they feel like they cost exactly what they do. The Apple Watch feels like a lot of thought went into it, and no doubt it did. It feels expensive.
Overall design of the object – most obviously, the way that curved screen flows perfectly into the case – is just gorgeous. As Tim Cook said during the keynote address, you can barely tell where the software stops and the hardware begins. The rounded edges are very Apple, even very Marc Newson, who, based on absolutely nothing but a gut feeling, I'm sure had something to do with the design of the Apple Watch. Why? Just look at it. Also, take a read of this article I wrote back in 2012 when Newson's Ikepod showed its then new Horizon. I call attention to the fact that the bezel is seamlessly integrated into the case. Not dissimilar to the way the screen of the Apple Watch wraps into the body. And the strap found on the Apple Watch Sport? Look at the strap from the Newson-designed Ikepod. Jony Ive's friendship with Newson is well documented and it's possible they simply shared ideas over drinks, or maybe Newson was entrenched in the project, imparting all he learned at Ikepod with his friends at Apple prior to the announcement he'd join their ranks. We will never know.
The Apple Watch is available in both 38 mm and 42 mm. I tried them both on, and they both worked perfectly on my wrist. They didn't exaggerate the options and make one decidedly male oriented at 44 mm and a girly equivalent at 35 mm or the like. Any man, woman, or child could pull off either size with ease. This may not seem like much, but remember this is Apple's first watch, and it would be a very easy mistake to make it too big or too small. I'm sure there was much discussion about making it larger – how could there not be? It would've made the entire interface bigger, bolder, more recognizable from afar and easier to use. The fact that they chose to actually make the thing wearable shows a great deal of restraint. The 38 mm example is particularly nice on the wrist as seen here.
The Apple Watch, in its own way, really pays great homage to traditional watchmaking and the environment in which horology was developed. We have to remember that the first timekeeping devices,things like sundials, were dictated by the sun and the stars, as is time to this day. The fact that Apple chose to develop two faces dedicated to the cosmos shows they are, at the very least, aware of the origins and importance of the earliest timekeeping machines, and the governing body of all time and space – the universe. (Sidenote: this "Astronomy" face will make it super easy to set the moonphase on your perpetual calendar. #watchnerdalert)
Apple will also offer a few faces that are reminiscent of modern analog watches. I expect that we will see many developments on the face front when Apple Watch hits stores.
Further, they kept the crown. Okay, so it's a "digital crown" on the Apple Watch, but for a company founded by a man known for his distaste of buttons and switches, the fact that they kept the original horological control center says something. Sure, it is critical to the UI of Apple Watch, but I was surprised to see that they hadn't attempted a device that is completely void of physical controls.
Options, And Obsession
There are so many different variations on the Apple Watch it's hard to keep it all straight. There is the normal Apple Watch, the Apple Watch Sport, and the Apple Watch Edition. That means it's cased in steel, DLC-coated steel, aluminum, grey DLC-coated aluminum, rose gold or yellow gold. There are six different styles of straps and bracelets, in a number of colors.
Does that mean there is an Apple Watch for everyone? No, it doesn't, but it reinforces Cook's message that this is Apple's most personal device, offering a range of options that fit someone's varying lifestyle. No watch from Switzerland comes with this many choices of finishes, and in a world where every industry is splitting hairs (I'm looking at you, BMW 4, 6, and 8 series / and you, Audi A2, A3, A5, and A7), it only makes sense to offer the chance for people to obsess of the details. Details are what make life interesting, it's what allows me, for example, to have a job writing about something that we literally do not need in any capacity, but enjoy a great deal. I guarantee that there are a very high number of people out there who just adore the standard Apple Watch, and hate the Apple Watch Sport. Similarly for the solid-gold Apple Watch Edition, because though it received over 2,000 likes on Instagram, many of the comments were quite negative. I think Switzerland should take a clue here, and realize that once you find something that works, it doesn't hurt to offer it in any number of aesthetic options. Consider how robust our straps business in on the HODINKEE shop – that is because watch consumers simply didn't like having only the OEM-supplied strap or bracelet as an option. We're starting to see the slight deviation model a little bit from the Swiss, an example being the Tudor Black Bay, which comes with a burgundy bezel and gilt dial, or blue bezel with silver dial, each with three strap options.
And that leads me to my next point. Apple absolutely, positively, indisputably NAILED its straps and bracelets. In addition to offering a bevy of options from leather to fluoroelastomer to link bracelets to Milanese, it is here that you really see how much attention Apple was paying to the way people wear watches, and the how bad existing options were.
The Apple Watch can take an integrated strap or bracelet, or one with wire lugs. It totally changes the look of the watch, and swapping them couldn't be any easier. Changing straps is one thing, but the attention to detail on the straps and bracelets themselves is downright incredible, and when I mentioned above that nothing comes close in this price range, it is very visible when talking about straps.
I mentioned the Ikepod style closure of the Sport watch straps above, which is clearly just a superior way of closing a strap like that. But, it gets better. The leather is super soft, super high quality. It is much nicer than any leather strap I've ever felt on a $350 analog watch. Then, look at the buckle. It looks like a normal tang, but notice that the tang itself doesn't simply sit on top of the cross bar, it's actually integrated into the buckle itself.
Then you have the link bracelet. Did you know that the entire thing is sizable with just your own hands, no tools required? All you have to do it press on the center link from the rear of the bracelet and a link pops right out. It reminds me a little bit of how IWC's Aquatimer straps attach to the case, with a center release button, but here it's for every single link. Additionally, the deployant (did you notice Jony Ive called it a "deployment" buckle in the video? Cute.) is again so slick, where it actually folds over itself to be far thinner than a traditional bracelet clasp.
But for me, it's all about the Milanese bracelet, baby. The fact that Apple even knows what this is is remarkable. I promise you not a single other tech company in the world would've spent the time to make this admittedly outdated looking option. But I absolutely love it.
I love it because it's so comfortable, so different than a traditional link bracelet. I love because it's so 1950s and '60s. I actually wear a Milanese-style bracelet on my 1957 Omega Speedmaster (ref 2915-2 for you nerds) and I get more compliments on it than just about anything I own, because of the bracelet.
The 42 mm Apple Watch on this bracelet was the one I was determined to try on first, and here it is on my wrist.
This "loop" style bracelet is just fantastic, and unlike the bracelet on my Omega, it just works. It's magnetized and you can close it at any size. It is light to wear, but substantial, and feels fantastic on the wrist. How does it compare to this nice Tissot with a similar bracelet? Switzerland, you don't want to know.
Again, Apple has paid excruciating attention to detail in the design and wearability of the Apple Watch. In many cases, its offerings make what is coming out of Switzerland (or Asia) look amateurish. But, let me remind you that I am looking at this object as just that, the physical form, not in the interface. If this was simply a digital watch, I could say it's a well designed, well-executed one. But it's not a watch, and that's where I think it missed the mark.
WHAT'S NOT SO GREAT ABOUT THE APPLE WATCH
Emotion, Or Lack Thereof
What surprised me the most about the introduction of a large(ish) device, complete with a screen and not simply a wearable, is that it shows Apple is comfortable not having its object worn by a significant percentage of early adopters who normally flock to their launches. Those who love, and wear, mechanical watches tend to be slightly higher income. They tend to want things that are beautifully made with great purpose – in a nutshell, Apple products. But what makes the millions of us that would never trade a Rolex in for an Apple is the emotion brought about by our watches – the fact that they are so timeless, so lasting, so personal. Nothing digital, no matter if Jony Ive (or Marc Newson) designed it, could ever replace that, if for no other reason than sheer life-cycle limitations. My watches will last for generations, this Apple Watch will last for five years, if we're lucky. On an emotional level, you can't compare them, and that is why I don't believe many serious watch lovers (who, again, would normally be racing to spend their cash on an Apple release) will go for this. It's directly competing for the same real estate, where as if we had seen a bracelet of some kind announced yesterday, those early adapters, myself included, would be begging Apple to take their pre-pre-pre-order (truth be told, I'll obviously be buying one, but you know what I'm saying).
If I had to criticize the actual form of the Apple Watch, it would be a complaint you've heard from me before (most recently with the Habring2 in our latest Three on Three); the Apple Watch doesn't fit under my shirt cuff without serious effort, if at all. I believe that great design should not disrupt daily life, and a watch that doesn't fit under a shirt sleeve is missing something. Apple is amazing and building thin, elegant machines, and I was surprised by how bulky this is, especially when the 45 minutes prior to the introduction of the Apple Watch were spent discussing how svelte the new iPhone 6 is. I understand the physical limitations and the required dock on the rear of the watch, but the Apple Watch is bulkier than I would've liked.
Could I have likely figured out a better solution for all that went into the Apple Watch to make it thinner? Certainly not, but to get mass adoption, I think it needs to be sleeker.
Digital Watches Are For Nerds
And about that. The Apple Watch is an incredible piece of engineering, no doubt. It is still not as cool as a mechanical watch, to real people. This might change with time, but my feeling is that not any time soon will a digital wristwatch, no matter what it's capable of, be considered "cool." I am talking pure aesthetics, and 100 perfect superficial judgement here, but at the end of the day, I don't see people that love beautiful things wearing this with any great regularity.
Imagine a man who grew up in the middle class, went do a decent school, got an okay job, lives in a nice apartment in some metropolitan town, maybe drives a German car and occasionally splurges on something nice for himself. Do you see him wearing the Apple Watch? I don't. I do see him buying the Apple Watch,but it will need to go further than that. Take me, for example, I am sitting here on a gorgeous 27-inch iMac, wearing an ultra-thin perpetual calendar in white gold, and in fact, to my left is an Ikepod Hourglass (designed by Marc Newson) that I wanted from the minute I laid eyes on it. I saved up and bought it because it's a perfect object, and even those people who don't care about time, or design, agree that it's beautiful. The average well-to-do person buys an iPhone 6 because it's the absolute best offering in the category in both form and function. I'm not sure the same can be said about Apple Watch because things like my Patek Philippe 3940G exist, and they always will.
The biggest concern those in the mainstream press have with the actual functionality of the Apple Watch is that it must be tethered to an iPhone. Does that mean, if you were to go for a jog, that the iPhone has to come with? During yesterday's hands-on session we asked that directly to Apple PR, and they didn't have an answer at that moment. If so, that's a problem, but one I expect to be remedied quickly, if even a valid concern at all.
Market Leader In A Category No One Really Asked For
The Apple Watch is absolutely the best smart watch on the planet. That much I'm sure of. But are we sure that wearable technology is something we really want? In the same way those who publicly wore blue-tooth headsets five years ago and those who wore Google Glass one year ago, will smart watches ever become a thing that people genuinely want? If anyone can make it happen, it's Apple. It's going to take a lot of time, and a lot of test cases when this thing launches next year.
IS IT A THREAT TO "REAL" WATCHES?
This a question I've been asked countless times in the media of the past few months ( / days / hours). Will anyone be trading in their Lange Double-Split for an Apple Watch? Certainly not. But, will the average Lange owner buy an Apple Watch, wear it on the weekends, and then, after a great workout with it, decide to leave it on next for a vacation to the beach, and then maybe on casual Friday to the office? It's possible. Apple products have a way of making someone not want to live without them, and while I wasn't able to fully immerse myself in the OS yesterday, what I saw was impressive. So while certainly not direct competition for haute horology watchmaking right now, the Apple Watch is absolutely competition for the real estate of the wrist, and years down the road, it could spell trouble for traditional watches even at a high level. When you realize you just don't need something anymore, there is little desire to buy another.
At the lower end, I believe the Apple Watch is a serious threat to those less faithful lovers of analog watches. There is a certain percentage of the population that simply doesn't care if they're wearing a watch of any great manufacturing process and the Apple Watch will appeal to them, if it works as advertised. Brands like Suunto should be worried. Casio as well. Even Seiko with its Astron line could fall into the same group of those looking for pure function. The other thing that could spell trouble even for the Swiss is Apple's cool factor with the young. At 16, will someone want a swatch or an Apple watch? At 20 will they want a Hamilton or the Apple Watch 3. At 25 will they want an Omega or an Apple Watch Plus? That should be a very real concern for the Swiss, appealing to a younger generation of buyers who live and breathe Apple.
Again, Apple paid great attention to detail with this new wrist-bound peripheral, and it shows the Swiss that it is possible to have great design at low costs. That is the most exciting thing about the Apple Watch for me – it will push the Swiss to take the sub-$1,000 mechanical watch category more seriously.
The Apple Watch is slated to ship in early 2015, and you can be sure we'll put its through its paces once available. You can read more on it here, and enjoy the dozens of live photos from the launch event below.
Few days ago, Apple introduced iPhone 6 Plus. The new iPhone substantially changes the way graphics are rendered on screen. We've made an infographic to demystify this.
See full article here http://www.paintcodeapp.com/news/iphone-6-screens-demystified
How touch screen controls in cars should really work
Several automotive companies have begun replacing traditional controls in their cars with touch screens. Unfortunately, their eagerness to set new trends in hardware, is not matched by their ambition to create innovative software experiences for these new input mechanisms. Instead of embracing new constraints and opportunities, they merely replicate old button layouts and shapes on these new, flat, glowing surfaces.
So even controls for air condition and infotainment - which are commonly used while driving - now lack any tactile feedback and require the driver’s dexterity and attention when operated. Considering that distracted driving is the number one cause for car accidents, this is not a step in the right direction.
I propose a new mode that can be invoked at any time: It clears the entire screen of those tiny, intangible control elements and makes way for big, forgiving gestures that can be performed anywhere. In place of the lost tactile feedback, the interface leverages the driver’s muscle memory to ensure their ability to control crucial features without taking their eyes off the road.
The interface reacts not only to the number of fingers, but also to their distance from each other. E.g. two fingers can be placed close together or further apart to trigger two different modes. The interface will react accordingly and select the appropriate control.
Welcome to the UX/UI Design Fundamentals Prep Course for the Bitmaker Labs User Experience & Interface Design 12 week immersive.
Structure of this Prep Course
There are five main parts to this prep-course. They are not intended to replace the actual curriculum, but are just here to get you started. It’s essential that you complete each part in order:
Part 1: An Introduction
Part 2: Tools of the Trade
Part 3: Researching Design
Part 4: Learning the Basics of Code
Part 1: An Introduction
Once the course gets started, we’ll have a lot to cover, so it’s important to get a good understanding of the fundamentals to start strong.
While you complete this prep course, you might have questions and may need a hand— that’s awesome. These are three resources to help you out.
Part 2: Tools of the Trade
We’ve broken down this section of the tutorial between all the tools you’ll need to know to make sure you’re well equipped with a jump start into getting down to design & development from Day 1.
Your first task is to research and write about these elements of UX Design:
Research on each of these topics, and structure your findings in any way you’d like.
But do write them down on a piece of paper, or post-its, or a notebook.
Then write a series of blog posts on Medium with your findings. Take pictures of your research and include them in your posts.
To help you with structuring your topics, and get you thinking about questioning design, here are the topics of your blog posts. The ultimate point is to take away the ambiguity so that we’ll all be talking the same thing when we kick off the course, and actually tangbile conclusions to with each other.
Part 4: HTML & CSS
We don’t like to think of things in terms of hours, or tasks. We’d just like you to take the time to really dive into, and have fun with a web environment that teaches HTML & CSS.
Our UX/UI Fundamentals course will cover the same concepts that are introduced in this Code Academy course. The magic will be in applying them to real, hands on projects with a design focus.
To prepare, CodeAcademy has a great interactive tutorial to run you through the basics:
Completing this code academy prep course is mandatory to start our program. Send section completion screenshots to firstname.lastname@example.org
Part 5: Design & Code Your First Homepage
After you’ve completed the HTML/CSS course on CodeAcademy, you should be familiar with the basics of how to build a profile page for yourself.
1. Create a narrative
Your profile page should answer the following questions:
i. Who are you? Where are you from?
ii. What do you currently do? What do you want to do?
iii. Let’s see you! Do you have an avatar / picture?
iv. Have you done any type of design related work?
v. Have you built anything lately?
vi. Have you completed a non-design related project?
Answer these questions for that work:
i. Show us a picture / image of it
ii. Give it a title
iii. Describe what it is?
iv. What did you learn from this project?
v. How do you think it relates to UX Design?
2. Sketch a rough layout on paper
Sketch how you’d lay this content out on a single page site. Use your blog post #5 as inspiration and look for examples on Dribbble of designers home pages. Mine for example is pretty old right now (I can’t wait to design a new one with you when the course starts!), but it still tells a pretty good story.
3. Design directly in code
Once you’re done designing, using your sketches of the layout you’d like, and using the inspiration from your research in blog post v, develop a basic 1 page layout with your answers from task 1. Pay attention to things like: font-size for headers, sub-headers, and body copy, and font weight for all of these things as well.
We don’t want you to dwell too much on the prettiness of the colours, so use when deciding on a colour scheme, use this for inspiration (and actual colours!)http://flatuicolors.com/
4. Publish your site on Dropbox
Follow the instructions on this page to host your site on dropbox. It’s the fastest way to get your page out there. Share it on twitter with the hashtag #helloworldUX
I found myself using geometry while designing user interfaces quite often, so I decided to share a simple example I was working on the other day.
Aligning interface elements in Photoshop is pretty easy as it comes with the pre-defined aligning options. And for the 95% those are all you really need. What can you do in those 5% examples when you can’t use these options? Well, it actually depends a lot on what you’re working on. Let’s see a specific example.
Aligning an Icon to the Center of…
the quarter of a circle. This was my most recent example when I had to use geometry to get that pixel perfect UI element.
I was working on a confirmation window, which was inside a circle. Yes, we’re trying out all sorts of cool stuff at wondermags. What we want to do is ask the user if he’s sure of the action he’s about to execute. We give him an explanation of what will happen and options to confirm or cancel.
Here’s a quick sketch for this window:A very rough sketch :)
So the problem we’re trying to solve here is how to properly align the two icons to the center of each of the buttons at the bottom half (confirm and cancel). If you use the align to vertical and align to horizontal center in Photoshop, this is what you’ll get:Icons are not properly aligned to the actual center of the buttons.
Now this doesn’t look right at all and it certainly looks very strange to say the least. Photoshop aligns it like this because it still treats it as a rectangle, not a quarter of the circle (there’s no difference for Photoshop).For Photoshop, this is still a rectangle.
Square Area is the Answer
I was thinking, what would be the easiest and most precise way to align it right to the actual center. Here’s where geometry comes handy. I figured that the key here could be the square area of the quarter of the circle. All I had to do is calculate the square area of it and draw a rectangle with the same square area to use as a guide. But first, I had to find out what dimensions I had to use.This is the square area that interests me (dashed area).
The formula for calculating square area of a circle is A=π*r^2. But in my case I was only using quarter of the circle. So my formula was:
A = π * r^2 / 4
π is a standard which is 3.1416 and r is the radius, which in my case is 145 pixels (also half of the width of the circle).
I made the calculations and the square area of the rectangle I had to draw was 16,513 pixels.
But the square area info doesn’t help me much. I can’t draw a rectangle in Photoshop so that I would set the square area of it. What I need is the width of the rectangle. And to get it, I just had to add the square root to my formula.
A = √(π * r^2 / 4)
The end result is 128.5 and lots of decimals. Now I could draw a square on top of my quarter of the circle with width set to 128 pixels and align it to the top left corner. The center of this square is the actual center of my button. This is what my icon needs to be aligned to.Rectangle with the same square area as the quarter of the circle.
I aligned the icon to the horizontal and vertical centers of the guide rectangle on top of my circle.Aligned the icon to the center of the guide square.
Applied the same process for the other button and that’s it. Pixel perfect alignment, pixel perfect user interface design.Pixel perfect UI.
Here’s the comparison of before and after:Before and after: wrong and right.
I would like to highlight two major points of this article. One is that geometry and mathematics in general can help you a lot in pixel perfect user interface design and web design. You just have to find the right way to figure it out.
The other one is that if you do something, do it properly. If you have to design an interface, go for the pixel perfection or don’t do it at all. This is what separates average interface designers from the best ones. Put some extra work in it, even more than necessary if you can.
Try, fail, think, learn.Source