A third approach explored a more web-oriented approach that places the timeline in the middle with white space on the sides. Another option we explored was using multi-column layout, similar to what we do with TweetDeck. We could scale the timeline to the entire width of the window, meaning giant and often blurry scaled up images on big screens. We set out to make these concepts work with Twitter’s timeline and had a few options. In their design documentation, they describe how make one app flex from a four inch phone all the way to a large display mounted on a wall, using what they call “effective pixels.” In Windows 10, Microsoft has announced Universal Windows Apps (UWP), a framework that lets apps scale appropriately to any screen size. It’s visually low-key but still brings some of the personalization of Windows 10 into the Twitter chrome. We thought that was interesting - but pretty overpowering.Īfter many, many more experiments, we landed on using accent color to represent the current view in the app, as well as for links and for the title bar across the top, like this: One early idea, shown here, was to try putting Microsoft accent colors along the lefthand side in the area that used to be a dark gray. We have two designers on the team who were design leads on Windows Phone, so we knew to look for ways to incorporate accent colors into the app from day one. Speaking of personal, we know firsthand how much Windows users love accent colors. To understand what “great” means, we thought back to some of the original Windows Phone design principles: “ personal, relevant, and connected.” Put another way, we wanted the information to be something notable happening, right now, that you might be interested in. And since both Twitter and Windows 10 are used all around the world, we needed to make sure the content was great for everyone, everywhere. We set out to take a view such as this and make it feel great on Windows 10. The logged-out experienceįortunately, we’ve been doing a lot of work on what we call, unsurprisingly, the “logged-out experience.” This is what you see today when you go to as a logged-out user: And that requires a lot of engineering effort to get right. It’s easy to mock up a pretty visual, but the page needs to be powered by real content, in real-time, to be valuable. We wanted to make sure that first experience was genuinely useful - even delightful. We knew this page could be much more engaging. After all, it’s disappointing when you get an app, decide to try it out and you’re just shown a blank login screen like this. The first load of any app is a big responsibility. Easy, right? Well… Getting the first load right In our case, it seemed pretty simple: Windows 10 is coming out, and we wanted to have a fresh version of Twitter available on day one. Understanding the problem we’re trying to solveĪll product designers are taught to understand the problem they’re setting out to solve. We thought it’d be fun to share some of the thinking that went into the final design. When we design products and features for the scale of Twitter and Microsoft, we learn a few new things. Today we launched Twitter for Windows 10 you can download it here.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |