Karol Podlesny and Sebastian Witman shared a very interesting project on their Behance pages, it was the redesign of UXPin, a collaboration tool to manage the entire design process. It's not that often that we see the design process behind design tools, and because of that I thought it would be nice sharing with you all. About UXPin UXPin is a design platform that makes it easy to go from static design to fully animated prototypes - without any code. Everyone can comment directly on designs. Videos The UXPin Editor search feature from UXPin on Vimeo. Detaching the Layers menu in UXPin from UXPin on Vimeo. For more information check out the Behance project.
Adobe just announced the preview or public beta version of their highly anticipated design tool for interface designers. I got the chance to test drive during the first closed beta and since day one I was quite impressed with the tool and how Adobe decided to take action. Well, they killed my favorite tool, Fireworks, so they had to do something about it :). Jokes aside, Adobe Experience Design CC also known as project Comet is a promising tool that still needs some work but there's a lot to love the way it is. The first thing you will notice when using it is how fast it is. Compared to Sketch, it's crazy, I wish Sketch was that fast. Figma, another great tool is also super fast but I give the edge to Adobe. Other things that draw me to the tool is the new UI, nothing like old Adobe apps, simple and elegant. Some bets they took are also admirable at last, like not having a layers list and keeping the app laser focused on fewer things. As I said, there's still some work to be done, like multiple shadows, a more robust prototyping tool, mobile preview, etc but I know Adobe is working on that and the best thing to do is to download, use it and provide feedback to them. They have been super attentive to what the community wants. So for this post I want to share a project created with Adobe Experience Design CC Preview. The project was created by Serge Vasil and originally posted on his Behance page. I'm thrilled to have been asked by Adobe to test and explore the new Experience Design CC (formerly Project Comet). Using this advanced software, I designed and prototyped a mobile application that showcased the revolutionary new features and benefits of this program while simultaneously creating valuable assets for Adobe to be used in further demo and instructional materials. For more information check out Adobe Experience Design CC website. Live Prototype
Just a little while (past week), we've announced Craft-Styles by Invision LABS and today Invision announced that they acquired Silver Flows to bring prototyping live in Sketch. This is the future right here, both a passionate user of Sketch and Invision, allowing designers to prototype and see their designs live (real-time mirroring) on your devices for a better user experience. As we know that it's not about being pixel-pushing-perfect but giving the best practical contact for your users. The Silver Flows team joining InVision is yet another giant leap toward our vision of building the product design and collaboration platform of the future. A vision shared by the nearly 2 million users already on the InVision platform today. Silver Flows helps designers to define all of the logic and transitions required to create prototypes directly within Sketch, a first for the design industry. By enabling UX designers to design and build prototypes in the same space, they can more quickly test and validate the broader user experience their apps provide. Together, InVision and Silver Flows are building a creative cloud within Sketch that provides an unparalleled degree of continuity for designers and their teams. Watch it in Action For more information: http://www.invisionapp.com/craft
Invision LABS has just released Craft-Styles, a tool (only available on Sketch) where you can create stunning, comprehensive style guide with just a few clicks. Craft has been a game changer in their recent release to a sustain increase of productivity among us designers. This is what I really do enjoy about this community, creating better tools together. We have seen significant adoption among the design community, with 86% on Sketch and 14% on Photoshop. • Styles, which exists within the new Craft Manager, creates a new page within Sketch with the project's color palette, fonts, and text styles. • Users can also include a host of custom elements, like buttons, symbols, and more. • The Styles-generated guide syncs to projects, so when designers make a change to the guide, the change applies across the entire project. • Styles is exclusively for Sketch users. Craft is 100% free. When users update or download Craft, they will get Styles and the new Craft Manager too. Watch it in Action Download Now Download For more information: http://www.invisionapp.com/craft#styles
Adobe has been the biggest software maker for the design community. Since I started my design journey I have been using their software, especially Photoshop. One of my favorite tools, however, was the forever missed Fireworks, an app that was initially created by Macromedia which was bought by Adobe. Fireworks had it all, pages, frames, symbols, vector and a lot of top UX designers using it. That wasn't enough for Adobe and they killed it. The outcome was a big gap in the market and when there's a gap there's opportunity and a small team created a killer app called Sketch which in a small amount of time took over the UX design community. Adobe, observing this trend, decided to respond and the answer seems quite awesome, it's called Project Comet. I was invited by some Adobe friends to visit their San Francisco office for a demo of a new tool. I was super curious about it, are they resurrecting Fireworks? Once the demo started I understood that this wasn't a new version of Photoshop or Illustrator for the web, it was a brand new product, started from scratch. I was amazed to see that approach by Adobe. The fact that it is a new app gave them the opportunity to do it right, not get paralyzed by constraints of legacy code. The result is a blazing fast rendering engine, for me that was one of, if not the most, impressive features. A whole new experience in user experience design. Design and prototype websites and mobile apps faster than ever with Project Comet, the first all-in-one solution for UX designers. There are tons of details and features that were made to increase our productivity. The idea of merging a design and fast prototyping tool is a great example. Another super useful feature is the Repeat Grid feature. I hate designing lists of content because there's always changes to be made, and that is always super laborious. Comet fixes part of my workflow beautifully well. Another great feature is the Live Preview on the device via USB. I know there are tons of apps that do that. But the fact that it's via USB solves one of the biggest hurdles designers from big companies have, the WIFI security issues that block mirroring tools. It's great to see Adobe back in the game and it's even better to see that now there's more competition in this field that has been dominated by Sketch. Sketch is my tool of trade, I use it everyday but I am excited about Project Comet. I am excited to see what it will do to the market, I am sure 2016 will be one of the best years for UX designers in terms of tools. We see an avalanche of apps coming to life, like Principle for prototyping, Flinto, InVision, Pixate. With Adobe in the race the only thing that can happen is that we will have better tools that will allow us to spend less time doing repetitive work and more time creating, ideating and innovating for the future. For more information check out Project Comet website.
The process behind designing a product is all about understanding the goals, the audience and what it's intended to do. It doesn't matter if it's a chair or a mobile app, the process is very similar, what changes are the tools and materials. For mobile apps, one of the most difficult parts of the process is to prototype with a high level of fidelity in quick turn arounds so we could test on the devices. The past year we saw an insurgence of great tools like Framer, Origami, Pixate, Invision and many others. Today, we share a great interview with the folks behind Fuse, a tool that will help us to design and develop beautiful, smoothly animated native apps for iOS and Android. Fuse is a development tool combined with a rich set of libraries that help both developers and designers build better apps. Tell me about yourself. First and foremost, I’m a programmer and self-proclaimed problem solver. I’ve been programming since my early teens and I’ve always been interested in real-time graphics, in the form of games, demos, graphics hardware and anything in-between. In addition to all the pretty pixels I’m deeply fascinated by the complex problems you have to solve if you want to get the most out of whichever platform you are working on. Not just the technical challenges but also understanding the entire process involved in creating something great. My background is from the demoscene, a somewhat underground digital art community that originated back in the early 80s. It started out with young programmers trying to best each other in pushing the boundaries of their home computers but has evolved into a more free-form community of digital creatives who create amazing stuff for kicks. Out in the real world I’ve worked on creating software and demos for all sorts of devices and also helped build graphics processors that ended up in hundreds of millions of phones. A few years back I co-founded Fuse, a Norwegian design and development tools startup, to make it easier for everyone to build awesome apps. What’s Fuse, anyway, and why should designers care? Fuse is an app development tool suite that lets developers and designers work better together. It’s bridges the gap between static designs and fully working native apps on iOS and Android. It’ll enable designers to work directly on the actual app in much the same way as they do on prototypes and mockups today. It also makes it easy for developers to create things that can be immediately customized by the designer, without going through awkward iterations of telling the programmer “three pixels to the left, please”. What makes Fuse truly unique is that all this power and flexibility is available both through pure code in a powerful dialect of C#, as well as an artist-friendly abstraction layer that compiles down to the same source code. No compromises, just great workflow. The project started because we as developers wanted to remove some of the tedious plumbing work and repetition involved in creating interactive experiences that ran well on mobile phones. At first we focused on the programming side, building abstractions that make it easier for any developer to do things that have usually been reserved for game development specialists. However, we soon realized that the real problem was at a higher level: How could designers get the same level of control over the final application as the programmers, on their own terms? Since then we’ve been developing tools and frameworks to allow the two groups to work closer together and simplify the entire app development process. What should designers consider when creating a mobile app? User experience first. While many designers are already great at this it’s always worth repeating. Nothing should ever get in the way of the app’s purpose and how that is communicated to the user. That said; this is obviously not the same as making boring apps. With mobile devices today having so much power I often feel that we’re missing out on some great opportunities for taking user communication to the next level. Designers should definitely consider how they can use more of this potential to make their work really stand out in the crowd. After all, if all apps conform strictly to the same guidelines.. which ones will be remembered? I’m not necessarily talking about making stuff that looks like it came out of the TRON movies (although you could if you would) but about using motion and visual effects in meaningful ways. On the slightly more mundane side there’s responsiveness and making designs that work on a range of different devices and form factors. Android has been extremely fragmented more or less since day one and now that iOS also supports several different screens there’s no denying that designers have to master this in order to reach as many users as possible. Who are some app and demo scene designers who inspire you and your team? Starting on the app side, there’s obviously a lot of talent out there, and sometimes it can be hard to pinpoint who actually worked on the apps you like. Favourites around the office are people and studios like Marcus Eckert, Creative Dash, ustwo and of course Tommy Borgen and the team at Uppercase who have actually contributed to the design and direction of Fuse. To be honest, I’m often more inspired by prototypes and concepts than anything I find in the app stores, because they can take things further and offer a peek into the future and to what ideas can become reality soon. As for the demo scene I’m actually fortunate enough to be working together with a lot of people who do extremely exciting things in their spare time. The guys in Excess, Dead Roman, Spaceballs and Elix / Youth Uprising are all on the same floor as me in the office. Looking outside our own walls, we’re always amazed by what Fairlight & CNCD comes up with, and Still are also personal favorites. But what’s just as inspiring as the work done in the demo scene is what some of the same people are doing outside of it. An obvious example is the game industry where almost any studio you can mention is either founded or strongly powered by people from the scene. Rovio, Remedy, DICE, Supercell, Grand Cru - we could go on forever. Speaking as a programmer, are there code-related issues designers often miss? The key thing is how well the design matches the capabilities of the development tools and the target device. Something that seems trivial at the design stage may be extremely time-consuming, or even impossible, to implement in the actual app. The only real way to fix this, without the designers having to become programmers themselves, is through close collaboration with the developers and by getting their ideas into code so that they can be tested and tuned as quickly as possible. This also raises the issue of communication between the two skill groups: it’s crucial to get past the point of designers asking for “a softer bounce” and the programmer answering “which dampening factor?”. If we find better ways of communicating ideas between people who usually think and work very differently it will greatly benefit the things we build together. Another issue I’ve often seen is what I call “the danger of real data”, which is when something that looks great at the design stage falls apart when it’s hooked up to real-world data instead of mock content. Typical examples would be apps that display text from external sources and suddenly come across unexpected text formatting (like long names), or beautiful maps that weren’t designed for the very real case when all your highlighted points of interest are clumped together in one spot, or when you’re making a music player app and the cover images from music backend API for some strange reason aren’t as beautiful as the ones you hand-picked from Google when you designed it. Shocking stuff, I know, but you’d be surprised how often this happens. Again, the way to deal with this is to find a way, and sometimes the guts, to test your ideas in the real world as soon as possible. What current trends are you noticing in mobile design? We have evolved tremendously over the last 10 years. From overly rendered icons to strictly flat designs to “2.5d” and shadows and anything in between. I like where we’re at now, where something can be clean but still a bit more playful and spiced up. I don’t think this is just caused by a change in tastes and trends though, but also due to the maturing of apps design in general. Of course, many people still tend to jump on the latest bandwagon just for the sake of “Oh! Shiny!” (parallax on the web anyone?) but there’s a lot more willingness to experiment and try to carve out something unique with fine detail and personal touches. Another of the driving forces behind all of this is probably the users; they simply expect a lot more from their apps nowadays. How will the world of mobile app design change in the next 2-3 years? As I see it, there are three main points here: Apps will to a much larger degree define the personality of organizations and products, even in the cases where the app itself is not the product. While this is already happening to some extent there will be a shift to the point where the apps are the public face of what an organization does, more than just one of many equally important pieces in an overall brand. This’ll obviously means that designers will play an even bigger role in the app creation process than today. The internet of things will drive user interface innovation, also on the devices we already use today. New use cases and products spawned from the IoT revolution will require entirely new ways of presenting and interacting with data in order to be successful. While there already exists hardware and software that can implement sci-fi-style scenarios like fully automated homes and seamless integration between all your smart devices no one has yet come up with user interfaces that makes all of this intuitive and easy to control for most people! (e.g. all those people who didn’t actually build the systems). A new generation of tools that are not just “nice to have” but actually crucial. User expectations will continue to rise at an even higher pace than today, and while mobile hardware technology will increase at a more evolutionary rate than the phenomenal jumps we’ve seen in the last 5-7 years it’s still very much improving. Unless anything else changes this means that the investment needed to create apps that stand out from the rest may become back-breaking. The obvious remedy here (just as it has been in the game industry) is the creation of new and much better tools, allowing designers and developers to spend their time solely on building the products they want to instead of “fighting with the platform”. What's next for you and Fuse? We’ll begin to open up the beta program very soon and that’s the number one thing on everyone’s mind back in the office right now. There’s been a huge amount of interest so far and it definitely seems like we’re on to something that people want. Not just the cross-platform support but a massively improved workflow and a chance to create apps that really stand out. That said, we have ambitious plans for Fuse and the beta is really only the beginning. Fuse has been built bottom-up in order to be extremely extensible and we’re really going to take advantage of that. We are building higher-level WYSIWYG tools on top of what we already have today and there’s a lot of new features planned for both developers and designers. Some are already in development but ultimately it’s the feedback from beta users that will decide what comes first. We really would like anyone interested in app design and development to sign up for the beta, so please help spread the word!
Product design is one of the most sought after fields nowadays. In order to design products a design must have a grasp of the whole creative process, from conception, UX, visuals, user studies and of course prototyping. There are several tools and prototyping frameworks, most of them requiring coding skills. Macaw was created to challenge that and provide a design tool that works like an image editor but also generates great code. Macaw is changing the way the web is created with a revolutionary design tool that works like an image editor but also writes professional-grade HTML and CSS - something long considered impossible. By bridging the gap between design and development, Macaw is lowering the barrier of entry for budding web designers and dramatically accelerating the creation process for pros. The superhot web design tool of the future - Jeffrey Zeldman Features Responsive: Set breakpoints and optimize your site for all devices. Interactive: Set variable names and add scripts for fast prototyping Positioning: Utilize static, absolute and fixed positioning for dynamic layouts. Components: Store elements in your library and reuse them on any page. "I dunno what sorcery they're using to make the code, but it's amazing and beautiful." — Mike Finch REAL-TIME, FLUID LAYOUT ENGINE Macaw’s design environment is powered by a real-time layout engine called Stream, which allows elements to be manipulated in a manner similar to image editors like Adobe’s Photoshop. Behind the scenes, Stream calculates all of the properties necessary (floats, clears, margins, etc) to place the elements into a static document flow just as a seasoned developer would. The days of fighting layout logic are over. The Team Introduction Video For more information visit http://macaw.co/
Today the Pixelmator Team released Pixelmator 2.2, a major update of one of my favorite apps out there. This new version codenamed Blueberry has some amazing new features. Pixelmator now has a powerful vector tool, new text features, shape styles and of course really cool light leak effects. I've been playing with Pixelmator for years and I am really excited with this new version. Get ready for more Pixelmator tutorials very soon. “We’re excited to deliver even more, easy-to-use, advanced features to our Pixelmator fans and continue to create the best and most enjoyable image editing experience,” said Saulius Dailide of the Pixelmator Team. “With new state-of-the-art Smart Shape Tools, people can fully enhance their images, create logos, Web layouts, posters, and much more, all easier than ever before.” Pixelmator 2.2 Blueberry comes with more than 100 new features and improvements, including: Smart Shapes Tools, which let you quickly adjust a shape’s outline with easy-to-use controls to get just the look you’re after; Shapes palette packed with dozens of readily available shapes that are as easy to add as dragging and dropping; Shape Style palette, so you can effortlessly create more polished and advanced shapes; Convert Text into Shape, which allows you to convert type layers to shape layers and then easily apply gradients, shadows, strokes, or even reshape individual letters; Smart Move Tool, which knows when you are working with image or shape layers and gives you just the options you need at that time; Paint Selection Tool, which is the simplest and the fastest way to make even the most challenging selections in your images with just a few brush strokes; and Light Leak effect, which makes it easy and fun to create stunning, retro-artistically illuminated images from any of your photos. Additional features include the new Color Popovers for quicker access to color swatches, new gradient presets, improved drawing tools, an improved Type Tool, the ability to copy and paste shape styles, and major performance improvements. Pricing and Availability Pixelmator 2.2 is available from the Mac App Store at a promotional price of $14.99. For existing Pixelmator customers who purchased the app from the Mac App Store, the new update is free. More information on Pixelmator and a free 30-day trial can be found at http://www.pixelmator.com About the Pixelmator Team Founded in 2007 by two brothers, Saulius Dailide and Aidas Dailide, the Pixelmator Team develops the most practical, fun, innovative, and easy-to-use software for Macs. Just four short years after the company was founded, the Pixelmator Team was honored with a beautiful Apple Design Award for Pixelmator. To make it even clearer that Pixelmator is well on its way to being the best image editing app in the world, Apple named it Mac App Store App of the Year in December 2011.
The Cage App is a new way for designers and teams to share, manage and approve your creative work and build an easier relationship with your clients. It is as simple as it sounds! Let me take you through some of those features and you will see how quickly you'll love to give it a try! Cage allows users to easily upload and present files, manage tasks, organize revisions and receive approvals all in one simple environment. Since Cage entered private beta in 2011, more than 20,000 creative professionals have signed up to use the product, including many who work at some of the biggest brands in the world. To get more information about Cage, visit their website at CageApp.com. All Rights to CageApp All Rights to CageApp Features Useful features to help you better manage creative projects online Users can now manage, assign and complete tasks without leaving the appIn-app Sharing: Users can now send and receive projects seamlessly without having to copy and paste links into emailVideo Player: Clients can now offer frame-by-frame feedback directly on video projectsApprovals: Users can now receive client approvals directly within the appRevisions: Users can now easily version client feedback and present changes within the appFile Support: Users can now upload a wide variety of files, including popular image and video formats, and even PSDsNotifications: Teams and Clients stay in the loop with customizable email notificationsActivity Steam: Users can now catch up and stay current on all activity in the appArchive: Users can now archive inactive projects to reference in the future Our biggest goal in re-imaging Cage was to make it useful for any type of designer, artist or creative team without a lot of clutter. Leaving out vital features for the sake of simplicity leads to workarounds, and that doesn’t work for anyone. We wanted to make sure the tool we built would make it easy for creatives to present, manage and secure approvals on their work…and look like geniuses while doing it. All Rights to CageApp All Rights to CageApp All Rights to CageApp All Rights to CageApp All Rights to CageApp Video Discount Code Cage App will give each person 20% for the first month on any plan you might like. Use the code: abduzeedo.
One of the most enjoyable moments for a web designer is coding CSS. It's such a nice language that it actually gets fun to work with it... style your pages and actually watching your designs gain life and forms. But sometimes, a little help is welcome. Even being a fun thing to do, sometimes you run into some problems, trying to find the right way to get a certain look. But for our sake, there are many many great sites out there that help us during these times, such as the great CSS Play, Smashing Magazine, and others. Taking a quick ride thru my Delicious, I took a look at some of my CSS tag favorites, and I'd like to share them with you. These are really resourceful articles, worth the visit. From tools to simple techniques that will help you at some point. Hope you all enjoy these!! Cheers. ;) 50 Extremely Useful And Powerful CSS Tools 12 CSS Tools and Tutorials for Beautiful Web Typography 101 CSS Techniques Of All Time- Part 1 53 CSS-Techniques You Couldn’t Live Without Powerful CSS-Techniques For Effective Coding 25 Code Snippets for Web Designers (Part1) 25 Code Snippets for Web Designers (Part2) 25 Code Snippets for Web Designers (Part3) CSS Dock Menu Most used CSS tricks