Artificial Intelligence and Robotics Chair at Singularity University Neil Jacobstein talks about some recent achievements where AIs have been able to solve complex problems. He speaks with WSJ’s Scott Austin at the WSJ CIO Network event in San Francisco, Calif., Feb. 27, 2016. Watch the full clip above or here. Full CIO Network coverage is here.
from CIO Journal. http://blogs.wsj.com/cio/2017/02/28/video-ai-is-getting-smarter-says-singularity-universitys-neil-jacobstein/?mod=WSJBlog
User experience design is much more than just a visual aesthetic or a popular term for good old web design. A study by the Design Management Institute shows that user experience (UX) design-driven companies outperformed the S&P 500 by 228% over the last ten years. Regardless of industry, businesses that significantly invested in UX design were able to demonstrate an impressive advantage. These companies include Apple, Coca-Cola, Ford, IBM, Intuit, Procter & Gamble, Starbucks, Walt Disney and Nike. But how did investing in UX design elevate these companies above their competitors in the market? The answer will surprise you.
What exactly makes UX-focused companies successful? They …
When we talk about a company being “UX design-led”, we are not just referring to the attractiveness of its products. A company which indeed follows a UX design philosophy is as concerned with user satisfaction and enjoyment during every interaction with the company and its products, as it is with the physical look and feel of what it is selling. For instance, if you had to use a manual to use the iPhone for the first time, this would not be a good design, no matter how beautiful the phone looks, or how nice it feels in your hand. When a product is not user-friendly or creates a bad user experience, that equals a fundamentally flawed or “bad” design.
Another example: If you could only drive for two hours with a Tesla before the gas ran out: this would create a bad user experience for the driver (and potential passengers) and would be a design flaw, despite it not being an aesthetic consideration. You may have already noticed that the words ‘design’ and ‘UX’ are used interchangeably in some circles, and because of this, for those new to the field, it can be hard to gain clarity on what ‘UX’ really means. While good design embraces great UX – at least in the ideal case – this only adds to the confusion.
At CareerFoundry, we would argue that UX is not just an element of good design, but the key ingredient to great design. This is because innovation or aesthetics alone will not make a successful product – only when it’s user-friendly it will take off.
Example: Remember the BlackBerry – the most popular business phone of its time? Well, when the app economy launched and business applications started to be increasingly mobile, BlackBerry maker RIM faltered as it failed to replicate the convenience and accessibility that other smartphones offered to access work tools.
When you buy an iPhone or a BMW, you are not just buying a phone or a car; you are buying an identity and joining an “exclusive” club. The brand identity becomes the customer’s identity. That is what we mean by “experience beyond product” – the customer receives much higher value from a product than just the product itself. But how do the mentioned companies manage to create experiences beyond their products? By focusing on the user experience from the very first step in the product development, that is how.
Think of Airbnb: Even though it is an entirely online platform, the most important part of the user experience happens offline – handing over the keys, the stay in the accommodation, the checkout. Typically, for online platforms, it is tough to guide offline interactions, but Airbnb – a company that is known for its heavy focus on UX – is managing offline interactions by utilising smartphone technology. By sending requests via text message, response times are fast, reminiscent of a hotel experience. Through the introduction of the Superhost-Program, it offers incentives to hosts to provide professional, delightful experiences to guests.
UX-led companies strive to exceed the expectations of their users time and again. “Delight” is the leading thought of great design, i.e. an intuitive, positively surprising and delightful/joyful experience. If the whole company is focused on, and measured by, creating delight, then the chances are high that it can deliver that. However, it takes a whole organisation living, breathing and thinking delight for this philosophy to succeed.
How do Apple, Nike and IBM manage to consistently deliver a great design and product experience for their customers? Let me tell you: by focusing the whole organisation on design. This is also called a (UX) design culture.
For example at Apple, every employee in the organisation is responsible for thinking about user friendliness. The organisation is structured in a way that encourages and supports great UX design. In the grand scheme of things, this is the secret sauce that makes the product so much more successful than if a single design team were to think about user-friendliness.
Design-oriented companies typically put a high emphasis on creating a positive user experience. Therefore, they invest significantly in the area of user experience (UX) and employ a good ratio of user experience designers. It also means that they gather user feedback in the strategy phase of a project, and then again at every stage of the project after that.
Since this UX focus leads to a much deeper understanding of their customers, they are in a much better position to create products that fit users needs, and they also save a lot of time and resources by not creating features that customers do not want.
Not convinced yet? Here some final stats on why UX-led companies can stand out from the competition, generate more happy customers and manage to turn such happy customers into repeat customers:
(Lead image: gerlt – Creative Commons)
from UsabilityGeek http://usabilitygeek.com/reasons-why-ux-led-companies-future/
Google’s Android Wear 2.0 watch platform is the company’s biggest shot yet at jumping into the fitness tracking world dominated by companies like Fitbit. Is it there yet? Not quite.
The company’s revamped smartwatch operating system improves upon many of the problems that plagued Android Wear watches for the past two and a half years. I’ve had a chance to try out some of its features on both the LG Watch Style and the LG Watch Sport.
The good news is the interface is cleaner and easier to navigate, with an on-watch Play Store for downloading apps, and watch faces that can be customized to include app shortcuts and widgets — including Google Fit stats like steps and calorie count for one-glance use. Shortcuts to start Google Fit workouts are easier to make, too.
When the update arrives on existing watches over the next few weeks, along with newly updated apps, the revamped fitness experience could possibly rival your Fitbit. But at this point, it still has work to do.
Android Wear watches always had some basic fitness-tracking features. They could track steps, distance, calories burned and active minutes. Google Fit will also automatically log workouts. It’s similar to what we have seen from Fitbit and Samsung. The watches know when you are walking, running, biking and even doing aerobics. The workout will then be logged automatically in the Google Fit app.
Automatic workout tracking is helpful, but sometimes it can get confused. A moderate walk with my dog was recorded as a bike ride, for example. The lack of on-watch indicators was also frustrating. It’s unclear when exactly an exercise is being recorded. You won’t know until you open the Google Fit app on your phone. On Samsung’s Gear S3, the automatic recording happens more clearly and with better heads-up stats on recent accomplishments.
Android Wear 2.0 now comes preloaded with a new and improved Google Fit workout. The app gives you the ability to view all of your fitness data right on the watch. It also lets you set a specific fitness goal, such as walking 10,000 steps or running three times a week. Unfortunately, the app still doesn’t support all-day heart-rate tracking or sleep tracking, although there are some third-party options available in the new Wear app store that do. But with Android Wear’s challenged battery life, I’m still probably going to keep mine charging at night.
In addition to tracking daily activities, the new Google Fit app now includes on-watch workouts. It’s similar to what we saw on the Fitbit Blaze, but a little more advanced since it can actually count your reps. You can choose from three different exercise challenges: push-ups, sit-ups and squats. The watch will then give you tips on how to do the exercise and show you the proper form.
The idea is to do a little more each day. If you did five push-ups on Monday, you should go for six on Tuesday and then maybe seven on Wednesday.
Overall, I found the rep counting to be accurate, as long as I kept the proper form (itching my nose during a squat gave me an extra rep). The workouts were fine, although I wish there was more of a coaching aspect. I did 20 push-ups, great. Now what? Should I really be doing 20 each day or should I only do it a few times a week? I wish the Google Fit app could provide feedback and recommendations on other workouts I should be doing, rather than simply logging my exercise.
Another new (and preinstalled) app is called Fit Workout. The app is used to track a variety of exercises, such as walking, running, biking, treadmill running, stationary biking, aerobics, stair climbing machines and strength training (if your watch has a heart-rate sensor).
The watch can show real-time data for each of these workouts, but it’s not great. The data is broken down into three live stats that can be customized with a specific metric, such as heart rate, pace, distance, elapsed time, calories, steps or time of day. That’s it. A lot of other watches, such as those from Garmin, let you customize each metric across multiple workout screens. I like to view pace, distance, elapsed time and heart rate when I run. This wasn’t possible with the Fit Workout app.
There are a lot of smartwatches and fitness trackers out there, all at varying price points, but few do fitness tracking better than Fitbit. The app is easy to use and has the largest social base. If one of your friends owns a fitness tracker, there’s a good chance it’s a Fitbit.
The benefit of this is being able to compete with friends and family members in a variety of competitions, which helps keep you motivated and more likely to reach your goal. Fitbit will also soon be adding a Facebook-like News Feed for even more social interactions.
There are no social features in Google Fit. You can’t see how friends are progressing and you can’t compete against them. There is no motivation factor whatsoever. The Apple Watch made small strides with social features in WatchOS 3 fitness. They’re not as good as Fitbit, but they’re better than Android Wear 2.
While Android Wear is cross-platform, Google Fit isn’t. Even though you can use an Android Wear watch with an iPhone, at this time there isn’t an iOS app to view your fitness stats. Your only option view them on the watch or on the Google Fit website.
Meanwhile, Fitbit offers a Web interface and apps for iPhone, Android and even Windows. Granted, Apple Watch has the same issue with its Activity and Workout app, but then again the Apple Watch doesn’t support Android. Samsung S-Health, by comparison, can also run across Android, Samsung and iPhone.
Running perfectly on an iPhone isn’t a deal breaker. But not working as well as a Fitbit could be. Google Fit has gotten better, but it’s still oddly bare-bones on Android Wear and sometimes sluggish when syncing data. Automatic fitness tracking should happen more obviously on-watch and more social connections are a must.
Fitness is one of the reasons people are buying smartwatches. At this point, I would opt for a Fitbit Blaze or Garmin watch for fitness tracking and smartphone notifications. Android Wear is moving in the right direction, but Google Fit isn’t the killer feature it needs to be.
from CNET News https://www.cnet.com/news/android-wear-2-0-fitness-features/#ftag=CAD590a51e
Valentine’s Day was a nail-biter for Jody Mulkey, chief technology officer at Ticketmaster. Coming off high-profile Grammy performances Sunday night, both Chance the Rapper and thrash-metal band Metallica put tickets on sale for their upcoming tours. Metallica went at 6:00 a.m. ET and Chance at 4:00 p.m. As fans flooded onto Ticketmaster’s website, Mr. Mulkey […]
from CIO Journal. http://blogs.wsj.com/cio/2017/02/17/for-those-about-to-rock-ticketmaster-migrates-infrastructure-to-aws/?mod=WSJBlog
Words are a powerful weapon. They can bring both success and failure depending on how you put them together. They can motivate or confuse, strengthen or weaken, call or push away. That’s why designing a digital product, it’s vital to remember that high-quality copy is as essential as the details of visual performance.
In one of our previous articles, we’ve already considered the big role of textual content in UI design, covering the definition of copy and its functions in graphic user interfaces. The important point to remember from it here is the words cannot be fully replaced with the graphics whatever amazing, high-quality and professional they are going to be. Efficient and engaging copy content in user interfaces is defined by two equally significant basic criteria: the quality of writing and the appropriate look. Words and visual elements should mutually support each other, exist in harmony and provide organic consistency. So, every single piece of copy should be thoughtfully analyzed and created in a way corresponding to the general design concept and enhancing positive user experience via successful interaction.
Could you imagine an interface containing badly-written copy with the same type sizes, fonts, and colors? The chances are big that it would cost users great effort to solve their problems or get needed information with the product, so they would simply choose something different that is more user-friendly and less time-consuming. Let’s check what types of copy content designers and copywriters deal with creating websites or mobile applications, and think over the points needing special attention.
To organize content in interfaces clearly for users, designers apply a well-known technique called visual hierarchy. It is initially based on Gestalt psychological theory and its main goal is to present the content on the carrier, be it a book page or poster, web page or mobile screen, in such a way that users can understand the level of importance for each element. It activates the ability of brain to distinguish objects on the basis of their physical differences, such as size, color, contrast, alignment etc. In the aspect of creating copy content for web pages and mobile app screens, there are two aspects important to consider: page scanning patterns and typographic hierarchy.
Understanding the importance of visual performance and readability of copy in digital products and its impact on user experience, numerous usability experts explore this issue comprehensively and collect statistics providing valuable data for designers. Lots of studies have shown that before reading a web page people scan it to get a sense of whether they are interested. According to different studies, including the publications by Nielsen Norman Group as one of the pioneers of this field, UXPin team and others, there are several popular scanning patterns for web pages, among which “F” and “Z” patterns.
F-pattern is referred to as the most common eye-scanning pattern, especially for web pages with big amount of content. A user first scans a horizontal line on the top of the screen, then moves down the page a bit and reads across the horizontal line which usually covers a shorter area. And the last one is a vertical line down on the left side of the copy where they look for keywords in the paragraphs’ initial sentences. It usually occurs on text-heavy pages like blogs, news platforms, thematic editorials etc. How could designers employ this knowledge? First of all, placing the information of key importance or core interest on the most scanned spots and trying to use short catching headlines and bold headers to draw users’ attention.
Z-pattern is applied to pages which are not so heavily concentrated on copy. A user first scans across the top of the page starting from the top left corner, looking for important information, and then goes down to the opposite corner at a diagonal, finishing with the horizontal line at the bottom of the page, again from left to right. This is a typical model of scanning for landing pages or websites not loaded with copy and not requiring scrolling down the page, which means that all the core data is visible in the pre-scroll area. In this case, designers place core information in the spots of highest attention, such as top corners, and put the other points requiring attention along the top and bottom lines.
Here we can see the design concept for a website which presents the online magazine «The Big Landscape». The interface is minimalist following the principles of clear visual hierarchy, good readability, intuitive navigation and aesthetic pleasure from visual perception. The designer followed Z-scanning-pattern placing vital elements such as the logo and CTA button in the corners of the top line while the bottom line informs users about the website creators and provides the ability to contact via social networks instantly.
Typographic hierarchy is a system that organizes copy content in the best way for users’ perception first of all via modifications and the combination of types and fonts. It is aimed at creating the contrast between the most meaningful and prominent copy elements which should be noticed first and ordinary text information. The contrast is created by regulating type fonts, sizes, and colors as well as their placement and alignment. Typographic hierarchy is presented with common types of copy content used in UI design.
A headline is the first thing that users should see in any interface. It is a large, bold word or phrase which transfers and emphasizes the core informative message on the page. It’s essential for headlines to be catchy and short so that they could draw users’ attention, and meaningful in order to inform users about the theme and benefits of the content of the page or screen. According to the research published by one of the popular social media sharing platforms Buffer, the ideal length of the headline is 6 words; Jacob Nielsen provides the study at which shows that headlines of 5–6 work effectively, not less than extensive headlines presenting a full sentence.
Another point to remember: it’s good when headline is visually supported by other elements on the page or screen, still it also should be understandable and meaningful without such context.
Here is the landing page for a company organizing photo tours and workshops for photographers. Functional and stylish minimalism is the basic approach behind the web interface. The bold headline is placed on the left which makes it noticeable but the major accent still remains on the head picture.
These are two examples of the websites concentrated on providing content around the same theme — food. They both have the minimalist design with centrally located headlines. However, the headlines differ with the message they send to the users as well as nature of the websites differs in its core: one of them stimulates uniting users around the action (cooking seafood) while the other is focused in presenting the goods (bread and bakery). The first example presents a website collecting recipes of meals with seafood from all over the world, so its headline contains a CTA with a key element — action verb in imperative form “Let’s cook!”, which dynamically tunes users into the activity. On the other hand, we can see another concept — a website for a small bakery selling homemade bread. The lyrical headline makes users feel warm, sets strong positive emotional connection and lets them instantly imagine the smell of bakery products which are sold via the website.
It’s impossible to put all the significant information in a headline, that’s why you need subheaders. These are brief, concise and catchy phrases that are similar to headlines, although they typically mark out the key points in separate sections while headlines summarize the theme or message of the whole page. Following the principles of visual hierarchy, fonts chosen for subheaders are usually smaller than for headlines but bigger than the rest of the copy. Traditionally, they are also bold and short.
Subheaders play a big role in landing page design. These two concepts for landing pages above are good examples of how subheaders inform users about the data provided in different sections. Bold subheaders point out the main idea of body copy helping users find the information they need easily and quickly.
Body copy is usually a part of text presenting the description or some essential information placed in a compact block, usually under a subheader or a headline. Fonts are thinner and smaller than in headlines and subheaders, sometimes they are presented in italic for even more prominent visual contrast.
There is no unified opinion about the best length of body copy. Some content creators support the approach that long copy is more informative and serious-looking, while the others claim that only short copy is effective because Internet users never want to read too much. Here in Tubik we support the approach that the length of the effective and user-friendly copy depends directly on target audience: users, as well as products, are incredibly different, they have diverse preferences, goals and wishes when search for web resources or mobile apps. Both long and short copy have their own pros and cons, and each of them can be appropriate than depending on target audience of the product and its conversion goals.
Short copy is often effective for mobile interfaces and landing pages: their users are usually keen to see concise and highly informative copy content. Moreover, mobile interfaces have limited amount of space, so too much copy won’t look nice and will demand additional effort for reading, which can be the reason for poor user experience. Long copy is good for web resources that provide users with complex information on specific topics as well as presentation of the products which aren’t well-known for users and need additional informative support.
Here is the example of a web page where long copy is useful. It’s a design concept featuring a website for architectural bureau following minimalistic and functional approach in creative practice and demonstrating it via website visual performance. The aim of such websites is to tell the company’s story, present professional level and achievements, so detailed copy works efficiently in this case.
This design concept also presents a website deeply based on the copy: it’s an educational project setting the online encyclopedia about the specific family of birds. Although it contains a great amount of information presented in text, this type of content is logically divided into many brief and concentrated copy blocks supported with prominent headlines as well as bright and catchy illustrations. This approach makes interaction with the website more dynamic which is especially effective for a teenage part of target readers that presumably often perceive encyclopedias as boring stuff.
As we mentioned above, short copy is useful for mobile interfaces since they are limited in space. The interface of brief tutorial for Toonie Alarm app demonstrates how copy is divided into short blocks in order to leave enough «air» on the screen and make copy readable.
The core elements that make UI interactive are those which contain a call-to-action (CTA). Some call-to-action elements may be represented with icons that don’t require copy using widely and instantly recognized icons such as a telephone receiver for a phone call or the envelope for mail. However, in cases when the image of an icon is not so obvious or can be misleading, it is more effective to use double scheme, when the icon, button, or link is supported with the copy.
The copy for call-to-action elements consists of one or two words or a linked phrase in a body copy. Verbs in the imperative form are one of the frequently applied mechanisms of engaging users. Designers are recommended to use various techniques of creating contrast, first of all via color, in CTA elements, so that they could stand out in the layout and draw user’s attention quickly.
The CTA buttons on these two landing pages are both centrally located, although they employ different types of copy. The first one consists of the four-word-phrase, while the other applies only one word. However, both look good and work effectively since they both contain the verb in the imperative form and inform target audience about appropriate action solving their potential task on this website.
This is a concept for an unusual Good Sign app that gives you a new sign to look for, and you make your wish every time you see it in real life. Such an extraordinary app has also unusual CTA buttons like “Make a wish”.
There’s no need to create CTA buttons exceptionally in bright colors — their main task is to be easily noticeable in the general layout. If the interface is bright and colorful, why don’t you make the contrast with light background which will make bright copy even more prominent, like in a concept for the Book Swap app above?
Caption is the short text under a picture describing its content. In web interfaces fonts are usually small and often italic, and in mobile interfaces, the sizes of fonts depend on a size of a picture.
Here is a concept for the landing page of a gym. The captions here have bold fonts that make them easy to read. They are shown only when the picture is hovered which makes interaction more engaging for the users.
All in all, creating a quality copy content isn’t that hard if you keep in mind the typographic hierarchy principles. And here are some basic tips on presenting the copy:
Here is the collection of recommended articles for further reading in case you would like to read more on the theme.
The 5 pillars of visual hierarchy in Web design
6 principles of visual hierarchy for designers
F-Shaped Pattern For Reading Web Content
3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern
Effective Writing For Your UI: Things to Avoid
The Ideal Length of Everything Online, Backed by Research
Copywriting in UI. Words that Make Design Go Round.
Our next publication will continue the comprehensive theme of visual hierarchy and its effective practices in web and mobile interfaces. Don’t miss!
from Sidebar http://sidebar.io/out?url=https%3A%2F%2Fuxplanet.org%2Ftips-on-applying-copy-content-in-user-interfaces-8d039c231dc5%23.sj4ugvq5d
The Cloudstitch Sketch Plugin is an open source extension of the Sketch Data Populator that lets you also use Google Spreadsheet and Microsoft Excel data in your Sketch designs.
The post Cloudstitch Sketch Plugin – Fill Sketch Designs with Data from Spreadsheets appeared first on Sketch Hunt.
from Sketch Hunt http://sketchhunt.com/2017/02/13/cloudstitch-sketch-plugin-fill-sketch-designs-data-spreadsheets/
Over at Medium, Jon Moore recently identified “non-rectangular headers” as a tiny trend. A la: it’s not crazy popular yet, but just you wait, kiddo.
We’re talking about headers (or, more generally, any container element) that have a non-rectangular shape.
Such as trapezoids:
Or more complex geometric shapes:
Or rounded/elliptical:
Or even butt-cheek shaped:
My money is on these gaining popularity too. So let’s beat the crowd, and talk about a few ways of coding these up. Because let’s face it: they do look pretty awesome.
Perhaps the simplest way to create any of the non-rectangular headers pictured above is to slap an image on top of your header.
See the Pen Image file-based non-rectangular header by Erik Kennedy (@erikdkennedy) on CodePen.
But there are a few issues here:
We can solve all of these problems at once. You might already know where this one is going.
Compared to exporting a JPG from Sketch, using an inline SVG is more performant, easy to make responsive, and easy to iterate the design of. In fact, for most cases, this is the way I’d recommend using. Versatile, cross-browser, vector, and fabulous.
See the Pen SVG trapezoidal header by Erik Kennedy (@erikdkennedy) on CodePen.
With an angled background one like, one choice you have to make is: what should remain constant as the screen-width changes, the angle or the height differential between the two sides?
If you want the angle to remain constant, set the height of the SVG in vw:
If you want the height differential to remain constant, set the height of the SVG in pixels:
And you need not pick just one – we can style this responsively, since SVG elements are subject to media queries. Check out this geometric style header at widths below and above 700px.
See the Pen Responsive SVG header by Erik Kennedy (@erikdkennedy) on CodePen.
Shoot, son. What’s not to love? Oh, and we can even do the butt-cheeks style.
See the Pen SVG “butt-cheeks” header by Erik Kennedy (@erikdkennedy) on CodePen.
(Perhaps that’s more properly done with beziers, but you get the idea!)
One more thing worth nothing, and that is if you want to do an SVG background entirely in CSS, you could save the SVG and reference its URL in a pseudo element.
header::after {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: url(divider.svg);
}And if you use `divider.svg` as a repeating element in different scenarios, you can also color it different as you need:
header::after polygon {
fill: white;
}But here’s an issue: what if the section below the header has a complicated background? In all these examples so far, we’ve just assumed a plain white background. What if there’s a fancy gradient, or another background image or something? Then what?
This property comes to the rescue if you have a moderately complex background below the header, and therefore want the masking to be done from within the non-rectangular header, as opposed to by an element after it.
See the Pen Non-Rectangular Header Using Clip-Path by Erik Kennedy (@erikdkennedy) on CodePen.
And like the similar SVG syntax, if you want to change the responsive behavior of the above from angle-is-held-constant to height-differential-is-held-constant, you can change the calculated height to a simple percentage.
Clip-path’s biggest downside? Browser support is not that great. However, depending on how important your non-rectangular header or div is, it might qualify as a progressive enhancement. In which case, clip-path away!
Now, up to now, we’ve only mentioned methods that work for generating all the shapes I called out above. However, if we know what particular shape we want our header to have, we might have access to an easier way.
For instance, a convex elliptical header is a perfect fit for border-radius.
See the Pen Convex elliptical header by Erik Kennedy (@erikdkennedy) on CodePen.
And a concave elliptical header could simply have the border-radius on the element after the header.
section {
border-bottom-left-radius: 50% 20%;
border-bottom-right-radius: 50% 20%;
}Another benefit to this method is that the background of the section below the header could still have background images.
If we know that we want to create do a trapezoidal header, we can use a CSS transform to skew the whole thing.
See the Pen Trapezoid Header Using Transform: SkewY by Erik Kennedy (@erikdkennedy) on CodePen.
This has the side effect of skewing any child elements of the skewed element, so you’ll want to add a child element in the header that gets skewed, and everything else will go in sibling elements.
Stripe’s homepage design uses this method, and even more brilliantly, they include a few children spans (each is a block of color) that get skewed with the parent element, creating a more complex and colorful effect.
As far as I’m concerned, SVG is generally the way to go. However, if you have a more complex background below the header, then the best choice depends on the shape. In that case, I’d investigate if skew or border-radius could meet the art direction needed, or if browser support was enough of a non-issue to go with clip-path.
| Allows complex BG below | Browser support | Shapes creatable | |
|---|---|---|---|
| Image | No | Yes | All |
| SVG | No | Yes | All |
| Clip-path | Yes | No | All |
| Border-radius | Yes | Yes | Elliptical only |
| Transform: skew | Yes | Yes | Trapezoidal only |
from Sidebar http://sidebar.io/out?url=https%3A%2F%2Fcss-tricks.com%2Fcreating-non-rectangular-headers%2F
So, you’ve got an idea, and you want your team’s feedback. You definitely don’t have time to worry about perfect pixels, organizing a beautiful deck, or spot-on colors. You just need to get the ball rolling.
Start off on the right foot with our newest tool from Craft by InVision LABS—introducing Freehand, a fast, flexible new way for your team to collaborate, in real time.
Freehand is an infinite, collaborative space for your team to work through design ideas in real time. Ideas are driven in part by diversity—how quickly and often can I get this new concept in front of my team, and how easily can they share their feedback?
With Freehand, it’s never been faster—or easier—to validate and expand on your ideas. Launch Freehand using your initial, live design files as a foundation—then click, draw, and deliberate your way to clarity.
With Freehand, you can:
Anyone can use Freehand, and it works for any project type. Collaborate in real time, from any device, with Sketch or Photoshop. Best of all, it’s free, and comes along with Craft’s other revolutionary plugins, like Data, Duplicate, and Sync.
from InVision Blog http://blog.invisionapp.com/craft-freehand/
Written in large letters along the wall of our office in Palo Alto is the phrase, “Great stories move the world forward.” On the facing wall, floor-to-ceiling photographs depict defining moments in our history — the Mars Curiosity rover crawling across the sands of the red planet; David Bowie as Ziggy Stardust; Jackie Robinson leaping to catch a fly ball. These images honor the great stories of our time that have moved the world forward. Stories like these embody the passions that drive people to improve our world: space exploration; musical expression and gender identity; sports and civil rights. At Flipboard we strive to create a product that gives people a place to find and engage with these kinds of stories.
Over the years, we noticed that people began to use Flipboard for more than just keeping up with the news. In fact, we observed that people got the most out of their Flipboard experience when engaging with things they cared about deeply — their passions. And so it was no surprise when our CEO Mike McCue tasked us with reimagining Flipboard to focus on people’s passions.
Designer Frank Chimero, in his book, The Shape of Design, writes about the distinction between “How” and “Why” when designing. As Chimero says, it’s one thing to ask yourself “How” you might design something — the colors and type, the interaction model, the copy and messaging. It’s a different question to ask, “Why?”. Before thinking about how a new passion-focused Flipboard might look and feel, we first needed to establish a set of guiding principles that would inform our work.
We began with a handful of research initiatives aimed at uncovering how people think about, consume, and organize their passions. One of the initiatives focused on examining our internal “interest graph” — a visualization that shows the relationship between the tens of thousands of topics on Flipboard.
We learned that people’s interests generally fall into high level categories — things like news, technology, and sports. In looking more closely, we observed that each high-level category contained smaller “clusters” of interest. For example, one cluster in photography included street photography, film, and black & white, while another included landscapes, DSLRs, and Photoshop. These clusters highlighted the fact that people tend to construct unique hierarchies of interest.
Our other research initiatives revealed similar findings. In-person interviews, surveys, and remote user-testing all showed that people’s passions were categorical at a high level, but uniquely different at their core. As a guiding principle, in order to focus Flipboard on people’s passions, we needed to design a system that would allow people to freely construct and access uniquely-tuned hierarchies of interest.
Constructing a hierarchy of interest sounds like a lot of work. We wanted people to be able to create personalized reading spaces quickly and easily. Flipboard should do the heavy lifting, bringing the best stories directly to you.
Some of our early design explorations focused on organization and gave people the ability to explicitly group anything they followed. However, this grouping meant people would need to constantly manage and sort the things they followed. This direction gave people clear spaces for reading about their passions, but required too much upfront effort and ongoing organization.
Creating and controlling these reading spaces had to be lightweight. People needed an interface that could effortlessly reflect their unique set of interests, not task them with constant management.
Ultimately we arrived at a design that quietly guides people to define their interests for any given category. Rather than constantly needing to manage what you follow, this approach allows people to simply select the kinds of stories they want to read, and Flipboard takes care of the rest. We call these new personalized reading spaces, “Smart Magazines”.
You can make a smart magazine for anything — news, travel, climate change, classical music. Personalize them by selecting subtopics that reflect your specific interests. For example, you can make a design magazine that focuses on prototyping, information architecture, and interaction design, or make one for typography, identity, and color theory. (Each of us on the design team has made our own design smart magazines, and they’re pretty awesome.)
Knowing how people would create and edit their smart magazines, we needed to design a way for people to navigate between them. Our research showed that people have different reading modes (catching up on the news in the morning; leaning back to read about travel in the evening). We wanted to respect these reading modes and give people a way to quickly switch between their passions.
Initially we tried an approach that modestly departed from our previous navigation model.
Although this approach built off of people’s existing Flipboard mental model, the bottom tab-based design was hard to navigate and didn’t truly focus the experience on people’s passions.
The final design is the result of over a year’s worth of sketching, prototyping, and testing — a new home space that brings a person’s passions to the front of the experience. No matter the reading mode, people can seamlessly move between their smart magazines, and effortlessly personalize them however they’d like.
Throughout this process, we also developed an entirely new set of visual and interaction standards — typography is more readable, interactions are smoother, and core UI components are more consistent. These new standards more clearly embody the Flipboard brand and aim to improve the overall experience.
This new Flipboard is just the beginning. We now have a new baseline to play with and build upon — a product that empowers people to engage with their passions and to discover stories that move the world forward.
Expect to hear more from the Flipboard design team in the coming weeks. We are eager to contribute to the shared body of knowledge started by our design colleagues across companies and industries. We believe that our collective stories can elevate the craft for all of us.
The update is available today on iOS and Android. We hope you’ll take the new Flipboard for a spin…or flip.
Best,
Matt Safian and Tyler Monteferrante
from Sidebar http://sidebar.io/out?url=https%3A%2F%2Fmedium.com%2Fflipboard-design%2Fdesigning-the-new-flipboard-9e4eca6705d0%23.xhvqoarq7
Icons8 Lunacy is a free tool for opening .sketch files in Windows. You can copy CSS of any object with one click, copy plain text for any text layer (more features are in development). Icons8 Lunacy works offline.
This tool was created to help designers who love Sketch and their clients or developers to collaborate.
The post Icons8 Lunacy – Sketch file viewer for Windows appeared first on Sketch Hunt.
from Sketch Hunt http://sketchhunt.com/2017/02/06/icons8-lunacy-sketch-file-viewer-windows/