Introducing Freehand from Craft by InVision LABS

Introducing Freehand from Craft by InVision LABS

In my career, I had many many opportunities to create within a group that were in the same room like a workshop type of thing. Other situations where you are working with a team where they are scattered all over the World through different timezones is on the other hand making things harder though. It’s quite hard at times because we are not in the same room but things have changed with the mighty folks from InVision. Introducing Freehand, their latest from Craft to collaborate in real time fast and flexible at the same time. With Freehand, you’ll have the opportunity to use it for any project type, collaborate in real-time and mostly on any devices including Sketch and Photoshop. Least but not least, it’s free and being part of the other awesome plugins from Craft. 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? See how it works   Features   • Add artboards or images from Sketch and Photoshop • Hand off control to your teammate • Co-draw to share sketches and rough ideas • Undo, redo, and scale • Comment to share your feedback • Save and share your work • And lots more! Get started now: https://www.invisionapp.com/craft.

Introducing Inspect now for Photoshop by InVision

Introducing Inspect now for Photoshop by InVision

We would like to share an announcement from the great folks over InVision and this time is about what we've introduced last month (or so), a tool that makes design-to-development process better for everyone. What do they mean is delivering PSDs or Sketch files to your developers, is now a thing of the past. Inspect by Invision but NOW available for Photoshop users. You'll be able to share your work easier for delivering the assets where the developers can have access to your colour palette, fonts, assets (download assets right off Inspect) and getting the exact specs from your mockups. Brands like WeWork, Bloomberg BNA, and General Assembly have already seen improvements in their team's workflows, making it easier and faster for designers to share their work with developers and for developers to get accurate information they need—like font names, hex codes, images specs, and dimensions. See how it works  Designing and building beautiful and usable interfaces is hard work, making design specification tools exceedingly valuable additions to the process. With Inspect, it’s easy for development teams to quickly get the information they need to start building products faster. Now, designers can get their screens into production in no time, whether they choose to create in Photoshop, Sketch, or both. When design and development speak the same language, in the same place, we all build better products. Streamline your design to development workflow with Inspect by InVision. How to get started with Inspect: https://www.invisionapp.com/feature/inspect-ps.

Introducing Craft Sync for Photoshop by Invision

Introducing Craft Sync for Photoshop by Invision

Earlier this month we shared the latest and greatest from the folks over Invision, the latest from Craft that is now available for Photoshop on Mac and Windows users. And they called it: Sync. What is it? It’s their latest on improving on workflow within Sketch or Photoshop where you’ll be able to sync directly your artboards to Invision with one single click, everything instantly. It’s going to be done! You’ll get to control what you sync and in addition it will be a great addition to how you hand-off your designs to developers using Invision Inspect. See how it works  Now with Craft Sync, experience a better product design workflow by seamlessly syncing your files from whatever design environment you choose. No matter where you choose to create, your path to design-to-prototype continuity is a simple as click, sync, and done.   That’s it! Choose individual files or documents to send, or select a whole bunch of them. Best of all, it’s instant—designs sync with lightning speed. How to get started with Craft by Invision.

Introducing Inspect by InVision

Introducing Inspect by InVision

We would like to share the another announcement from the great folks over InVision and this time is about their latest very much anticipated tool that makes design-to-development process better for everyone. What do they mean is delivering PSDs or Sketch files to your developers, is now a thing of the past. And they called it: Inspect. Aiming to improve productivity, process and less headaches on both parties. You'll be able to share your work easier for delivering the assets where the developers can have access to your colour palette, fonts, assets (download assets right off Inspect) and getting the exact specs from your mockups. It's more like magic and the developers will love this collaboration. See how it works  By making it easy for developers to get the accurate information they need about your designs, your team’s process is clearer and simpler than ever. Say goodbye to endless email threads and mile-long PDF docs. Your whole team can start building sooner, and get the information they need, when they need it—in real time. Inspect really consolidated the amount of tools and processes we've had to do in the past, and keeps everyone up to date on the latest prototypes." -- Gregg Meyer, Design Director, WeWork When design and development speak the same language, in the same place, we all build better products. Streamline your design to development workflow with Inspect by InVision. How to get started with Inspect: https://www.invisionapp.com/feature/inspect.

Introducing Craft Sync by Invision

Introducing Craft Sync by Invision

We would like to share the another announcement from the great folks over Invision and this time is about their latest feature on Craft. And they called it: Sync. What is it? It’s their latest on improving on workflow within Sketch or Photoshop where you’ll be able to sync directly your artboards to Invision with one single click, everything instantly. You’ll get to control what you sync and in addition it will be a great addition to how you hand-off your designs to developers using Invision Inspect. See how it works  Now with Craft Sync, you never have to leave your native design environment to send your designs to InVision. Click, sync, and you’re done. • Improved speed: Users can now send their designs to InVision faster than ever before. • Greater control: Lets designers choose which artboards to send to InVision. • Seamless workflow: All designs sent to InVision via Craft Sync work with Inspect (currently in Enterprise beta).Choose individual artboards to send, or select a whole slew of them. Best of all, it’s instant—designs sync with lightning speed. Craft Sync is now available for Sketch as in today. They will release Craft Sync for Photoshop in a few short weeks. How to get started with Craft by Invision.

A Few Tips for Prototyping with Atomic

A Few Tips for Prototyping with Atomic

Needless to say that there is a wide range of prototyping tools out there and I won't say which one are the best ones because there isn't one. I liked to say it all depends on your workflow and what's your purpose of this tool. That being said, I've been using this prototyping tool called Atomic and what I enjoyed the most about this tool is how fast it is and the fact you can customize with CSS is a must (for me). Here's a few tips that will make your experience with Atomic more accurate and fluid. In Atomic's Words Type To quickly and conveniently select a color within the color picker, just type the name of the color or paste the HEX code into the color selector. You can even type different shades of popular colors. Just be sure to exclude the spaces between words when you type them. For example “darkgreen” or “lightblue”. Gradients • Open a Custom CSS Gradient Generator such as this. Choose your preferred colors, angle and opacity. In the CSSmatic example, there’s quite a few settings you can play around with. Just tweak it until it feels right. • Once you’ve chosen your settings, select ‘Copy Text’ and navigate back to Atomic. With your element selected, paste the CSS into the Custom CSS field in the Atomic. (adsbygoogle = window.adsbygoogle || []).push({}); Convert • Import your image into Atomic • With the image selected, navigate to the Custom CSS window and paste in the following: border-radius:50%; Mask • Import your image and full size • Convert your image to a Container. • Resize the boundary of the Container to mask the image About Atomic Atomic is a prototyping tool and collaboration web app for designers. Originally from New Zealand, this team has been making buzz on the Web with their fast and efficient tool with awesome weekly content. For more information and get your hands on Atomic: https://atomic.io. Originally from: http://blog.atomic.io.

Principle for Mac - Prototyping tool

Principle for Mac - Prototyping tool

If you design products prototyping has to be part of your process, there's no way to design good experiences without trying it. In the past, not so distant, you would have to know how to code to come up with a good prototype. Fortunately for us that has been changing in the fast couple of years and some new tools were just released that will make our lives much easier. Principle for Mac is one of them and probably the one with the easiest learning curve. I played with Principle for a less than an hour and I was able to create a prototype that in JS would take me much longer, maybe days. The interface is quite familiar for those using Sketch and the timeline helps to fine tune the animations. It's also a Mac and iOS tool and I believe it won't change due to the deep integration with Core Graphics and Core Animation. Nevertheless, it's an amazing V1 tool and I look forward to what comes next. Principle makes it easy to create animated and interactive user interface designs. Whether you're designing the flow of a multi-screen app, or new interactions and animations, Principle lets you create designs that look and feel amazing. For more information check out http://principleformac.com/ Download Free Trial Some prototypes from Dribbble By Nicola Felasquez Felaco By Sam Thibault By Imran Ashraf By Arthur Guillermin Hazan By Arthur Guillermin Hazan By Creativedash By Nicola Felasquez Felaco By Ulrik Stoch Jensen By Nicola Felasquez Felaco By Mateusz Dembek

Interview with Anders Lassen from Fuse

Interview with Anders Lassen from Fuse

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!