articles on

Introducing Form: a free wireframe kit from InVision

Introducing Form: a free wireframe kit from InVision

Our friends from InVision have launched two things recently! First of all, they are introducing a new design of their blog now called: Inside Design. They are also sharing a free wireframe kit, to celebrate their launch as well, how cool is that?! Introducing Form: a free wireframe kit from InVision, it's 190 templates ready-to-use for your next/current design project. It's integrated with a wide variety of layouts for popular page categories and just to make it even more perfect. It's totally free, get it now. Form is a free wireframe kit for speeding up your design workflow. This free wireframe kit is ideal for creating beautiful, seamless, large-scale design projects, faster. Designers can pull from a massive library of ready-made layouts, components, and symbols, allowing them to focus on what really matters: creating beautiful designs (rather than building repeatable processes from the ground up each time). What's inside: 190 templates 19 categories 200+ UI elements More Links Download your free kit Inside Design A Preview

Adobe XD: New updates Responsive Resize, Timed Transitions, and more

Adobe XD: New updates Responsive Resize, Timed Transitions, and more

Adobe has recently announced huge news with the introduction to their Open Platform. With the month of September, Adobe XD has released new tools to help you design multiple screen sizes, timed transition elements. With responsive design of being now an industry standard, I am more interested in the new timed transitions. It will allow us to simulate the effects of loading states, looping animations and more. I would definitely think that you should take some moment to watch the short tutorial videos below. September brings an exciting update to Adobe XD, as we’re now releasing new tools to help you easily design for multiple devices at different screen sizes, and introducing timed transition elements to add an extra realisms to your prototypes. Responsive Resize “When building new components, to add to our ever-growing library, our team must account for devices of all sizes starting from the truly early stages of ideation,” said Greg Pilawa, UX/UI design manager for Wyndham Hotels and Resorts. “XD’s new responsive resize feature gives us the power to rapidly conceive, design, and test across multiple devices without having to rebuild each component from scratch or adjust every element individually. This will undoubtedly allow us to build more, faster.” Check out responsive resize in the video below. Timed Transitions When creating a transition between two artboards in Prototype mode, you’re now able to select Time instead of Tap as your trigger, and you can define how long you want your delay to be and the transition you want it to take. XD will save your attributes from that same screen and offer them as the default on further screens. Watch the video below to see Timed Transitions in action, and see how they can be used to simulate an onboarding experience in an app. Spell Check Now, the great lifesaver of digital copywriting is officially part of Adobe XD. Spell check is integrated in XD, meaning you’ll have access to real-time spell checking directly on the design canvas. All you have to do is enable spell check in XD (it’ll be on by default), and once you select text in your design, you’ll see any potential spelling errors right there. Check out what spell check looks like in Adobe XD in the video below. Improved in XD: Web prototype full-screen viewing We’ve made a number of improvements to the full-screen options in Adobe XD, meaning you’ll be able to show others a much more accurate representation of your work and provide a more realistic experience when viewing a web-sized artboard in the browser. Web and custom artboards are now displayed from the top of the browser, without black padding issues, while mobile artboards continue to be centered on the screen in full-screen mode. The background color in full-screen mode is now white instead of black. This will eliminate any user confusion — most browsers have a default white background, and black doesn’t provide an accurate representation of a real web experience. Additionally, we’re excited to announce that HCL Technologies has chosen Adobe XD CC as its standard tool to design, prototype and share engaging experiences. More Links Get the Starter plan for Adobe XD for free #MadeWithAdobeXD

Adobe XD CC: Introducing Open Platform for Experience Design

Adobe XD CC: Introducing Open Platform for Experience Design

Adobe has announced big news with Adobe XD where they are opening its platform to enable users to customize their tools through an ecosystem of community and partner-built plugins. Leveraging their APIs, developers can now build on top of XD, adding new features, automating workflows and connecting XD to the tools and services designers use every day. Following up from what we have shared last month, they are also integrating with what's existing collaboration tools like Microsoft Teams, Slack and Jira Software Cloud. We are committed to developing a rich ecosystem around Adobe XD to fit the modern designer’s needs,” said Scott Belsky, chief product officer and executive vice president, Creative Cloud at Adobe. “Delivering seamless, engaging user experiences is imperative for brands, companies and all digital products, and Adobe is focused on serving designers with powerful collaboration capabilities In their words The open platform will be made publicly available later this year, but Adobe is already working with early developer partners to build plugins for XD, including Microsoft, Trello, UserTesting, Airtable, Dribbble, Silicon Publishing, Slope, inMotionNow, Astute Graphics, Anima and Google Cloud, along with its own Behance and Stock services. These solutions complement a series of integrations Adobe announced earlier this year, offering friction-free workflows with popular third-party tools and services such as Dropbox, Sketch, Zeplin, Avocode, ProtoPie and Sympli. $10 Million Fund to Empower Creative Innovation Initial grants and investments include individuals and companies building tools and services on top of Adobe XD to empower designers around the globe with several expected to be available in the product later this year. CloudApp, Protoio, Inc, Stark, Florian Schulz, Precious Design Studio, Odin Chart, Iconscout, Impekable, UI Faces and more Enhancements in Adobe XD Earlier this month, Adobe also released several new features in Adobe XD, which streamline designers’ workflows and facilitate the designer-to-developer handoff process to make coordination faster and simpler than ever before. Marquee new features include the ability to extract assets in Design Specs, making it more productive and efficient to work with developers. First released in November 2017, Design Specs is also no longer in beta and designers can now mark assets for export and give developers the ability to extract them in the format they need to be used in their code. The $9.99 Adobe XD Single App plan gives Creative Cloud members unlimited shared prototypes and design specs. Additional details on plan options and pricing for each tier are available on Adobe’s website. More Links Get the Starter plan for Adobe XD for free The new plugin ecosystem for Adobe XD

Getting the First Look at the #InVisionStudio Platform

Getting the First Look at the #InVisionStudio Platform

Our friends from InVision took us by a storm today with the announcement of #InVisionStudio Platform. What is it? Well, it's simply to create the best screen design tool on a daily basis to achieve greatness. Cheesy?They believe that together we can build a unified work design environment for everyone. It's really nice seeing InVision engaging different companies too who really have the same goals at the end of the day. Inside the asset library for example, you will find components, icons, and typography to speed up your design workflow. Give it a first look! In their words That is our mission—our promise—with InVision Studio: to create a unified design environment that empowers creation and collaboration like never before, helping you push your vision and your craft to new heights. Coming soon, our new app store lets you connect Studio to the design, productivity, and collaboration tools you and your team use every day. We’ve been working with Atlassian, Salesforce, Getty Images, UserTesting, Google Material Design, and Dribbble to create seamless integrations. You’ll have access to the most seamless digital product design workflow ever created, with apps and assets to bring your creative work and workflow to new heights, all right inside Studio. More Links Learn more about #InVisionStudio Platform Asset Library Asset Library Through our asset library, we’ll provide a selection of incredible content to help take your screen designs to exciting new places. You’ll find UI kits to jumpstart your next project, components, icons, and typography to speed up your design workflow, and more—all without ever leaving Studio. Open API Our flexible open API will let you build apps that fine-tune you and your team’s product design process. You can keep your amazing app all to yourself—or you can share it with the community in our new Studio App Store. Design the Future InVision Studio Partners #InVisionStudio Platform

Introducing the new InVision - Sneak Peek

Introducing the new InVision - Sneak Peek

We are very close to the end of the year and the mighty team from InVision are still sharing a preview of what is coming for 2018. The new year could be easily one of their biggest years to date, we are quite excited for them. We can't wait to get our hands on their latest so we can share our feedback with you guys. Today we are introducing a sneak peek the new InVision, please take some time to watch the video. It comes with new features like up to 8x faster, new design, introducing spaces, powerful sharing and more. Give it a look! In their words Over the last two years, our product and engineering teams have been working tirelessly to essentially rebuild InVision from scratch. The new InVision—codename: V7—runs on an entirely new code base, is remarkably fast, and redefines collaboration across teams and stakeholders. It also comes with a whole new look. V7 was built to address what we recognized as an evolving trend in the world of Digital Product Design—namely, that the volume of new products being created is scaling along with the diversity of the teams building them. Design has evolved into a cross-functional discipline that touches everyone from engineering to marketing to the executive suite. Given this, our highest priority with V7 was to support this scale through performance, responsiveness, and accessibility for a wider variety of individuals than ever before. Up to 8x faster: V7’s entirely new architecture ensures lightning-fast responsiveness and reliability at scale. New unified design: V7 introduces a new universal design system to deliver a unified, consistent user experience throughout the platform. Introducing Spaces: Spaces make it possible to organize all of your project-related documents into one space. This includes Prototypes, Boards, and Freehands, as well as documents from other critical tools your organization relies on. Powerful sharing: We’ve taken sharing to the next level with the flexibility to distinguish roles and customize access across your projects. Built for what’s next: V7 lays the foundation for the future of our platform, including tightly coupled integrations with Design Systems Manager and Studio.   More Links Request your Early Access Follow InVision on YouTube The new InVision is coming in 2018, and we can’t wait for you to get your hands on it. Watch the Sneak Peek

Introducing InVision Design Manager + Brand.AI Acquisition

Introducing InVision Design Manager + Brand.AI Acquisition

Let me start by saying that the awesome folks from InVision are literally on fire lately. In a very good way, they are bringing their tool with more features and changing our way of working in this beautiful industry. Last week, we've featured their latest InVision Studio and now they are back and introducing InVision Design Manager. What is it? It's basically one place where you can manage all UI/UX components with versions, access from both Sketch and InVision Studio, keep code in Sync and a lot more. Let's take a dive! In their words Most design systems today are homegrown, leveraging a mix of tools and platforms to manage—this makes them difficult to scale and maintain, especially at the enterprise level. There’s clearly room for innovation and growth in this space. A leading platform for managing design systems, Brand.ai is one of the most widely used tools for in-house design systems management. Thousands of teams and leading Fortune 500 companies, including Verizon and Zendesk, use Brand.ai to create, maintain, and evolve their team’s design systems. Combining the best capabilities of the Brand.ai product with the power of the InVision platform, we’ve built InVision Design System Manager (DSM). Video   Create a single source of truth: One place to manage all brand and UX components, so teams can stay in sync Design with ease: Access libraries directly from Sketch or InVision Studio to push and pull changes—from assets to deeply nested symbols—all with a click Iterate with confidence: Changes sync to the whole team, and designers can switch to the latest version or roll back changes at any time Manage updates collaboratively: Roles and permissions provide complete control over who can view or edit each library within the system Share with external teams: An automatically generated and customizable web portal lets any stakeholder preview and use design, documentation, and code Keep code in sync: No more manual updates or time wasted tracking down updated specs—developers can use the DSM API to integrate directly into live code Protect confidential information: Enterprise-ready features like SSO, Private Cloud, and more protect your company’s most strategic assets  More Links Request your Early Access Follow InVision on YouTube InVision’s DSM isn’t just about smoothing out someone’s workflow, it’s about enabling their voice and allowing them to play a more active role in the process of designing as a team. A good design system should empower designers instead of restricting them, and this tool absolutely furthers that goal.” —Dan Ross, UX Designer, Shopify Preview Gallery  

Introducing InVision Studio: the World’s most powerful screen design tool

Introducing InVision Studio: the World’s most powerful screen design tool

On a very quiet Wednesday, the awesome folks from InVision took the whole design community by the storm by announcing their latest game-changing screen design tool. Introducing Studio, a desktop app where you will be able to design responsive apps, sites from the start to finish. I am talking from screen design, prototyping, advanced animation and a lot more. Imagine having everything in one place where you can also collaborate, handoff and create a design system. We are pretty stoked about this over at Abduzeedo, we can't wait for its release in January. Request your early access! In their words With Studio, InVision has developed an end-to-end platform for designing digital experiences. Traditionally, teams have had to cobble their workflow together across a number of disparate tools, many of which were built for earlier generations of graphic and print design. This fragmented workflow slows teams down and prevents them from doing their best work. Video Studio starts where the previous generation of screen design tools left off, then adds powerful new dimensions to support today’s modern digital product design workflows in a seamlessly integrated environment: • Advanced animation: Rapid prototyping and advanced animation turn static screens into live product experiences without requiring a single line of code. • Responsive design: Studio’s adaptive layout engine enables design across a variety of different devices and orientations, automatically. • Shared design systems: Shared component libraries are built right into InVision Studio, guaranteeing design teams stay consistent, connected and up to date. • Connected collaboration: Studio connects seamlessly to InVision’s cloud-based collaboration platform, making it easy to gather feedback and engage stakeholders. • Extensive app ecosystem: Studio is an open platform allowing users to extend the product experience through an ecosystem of apps and add-ons.   More Links Request your Early Access Follow InVision on YouTube Since 2011, we’ve been on a mission to help every organization in the world create the digital experiences that shape our lives. The launch of Studio brings us another large step closer to fulfilling that mission, giving our users a complete set of connected tools that drive the digital product design process from start to finish,” said InVision CEO and Co-Founder Clark Valberg. “Every last detail of Studio is the deliberate result of deep insight into how the best digital product teams make the products we love the most. Our goal with this product, and as a company, is to deliver the operating system for building remarkable experiences. Preview Gallery  

Introducing Figma 2.0 with New Features with Prototyping and Developer Handoff

Introducing Figma 2.0 with New Features with Prototyping and Developer Handoff

We would like to share exciting news from our friends over Figma where they are introducing their newly 2.0 packed with features including Prototyping and Developer Handoff. This is pretty huge! I can't wait to give it a try myself and maybe share my thoughts on ABDZ. Meanwhile, let's take a look at what they offer with real-time collaboration, the end of versioning and more. In their words But as we talked to more of our users, we realized we couldn’t ignore prototyping forever. Designers were desperate for a solution that would let them create and present in the same place, with one single source of truth. Since we’re the only interface design tool that runs on the web, we’re uniquely suited to meet that demand. In Figma, the prototype is a living document rather than a dead artifact. Prototyping • You can tweak frames or add screens in real time while others watch. We’re already finding this hugely helpful in design critiques at Figma.  • No need for endless versioning…or the crazy naming conventions that other tools require to order your artboards (good-bye artboard 1, artboard a1, artboard a1b, artboard a1bcdefgahhhhhfuckthis).  • My new fav: You can navigate presentations from your phone. Any designers who dream of strolling the conference room like you’re giving a TED talk, this is your moment.  • You can use components (symbols) with hot spots, so when you set a navigation from a component once, it will populate through all instances, as seen in the gif below (the component is the top left X button) Prototyping (Video)   Developer Handoff • Developers can select an object and hover over another object to see redlines that measure the spacing between them  • They can pull CSS, iOS and Android data with view-only access  • We’ve segmented the data as:  (1) Table view, which breaks out attributes so they’re easier to skim  (2) Generated markup/code Developer Handoff (Video) We’re excited to offer an all in one tool to help teams work better together. That said, we know that designers and tech companies have a wide variety of workflows and requirements. Get Started now with Figma.

UXPin is introducing Design Systems for Designers

UXPin is introducing Design Systems for Designers

UXPin is introducing Design Systems, a tool to fix our design inconsistencies. We all have experienced within a project, the back-and-forth between us designers and developers for inconsistencies with the font, colours and etc. Well, UXPin has made a tool to remedy just that integrates with Sketch. You'll be able to create libraries and change to "master" elements that updates everywhere. It also includes a Sync for your documentation and enhance your collaboration with a standardized design where both can approve on principles, patterns and etc. Get started with Design Systems now. In Their Words As a solution, many companies create their own design system - a modular toolkit of patterns and principles connecting design with code. IBM Carbon, Salesforce Lightning, and Microsoft Fluent are just a few examples. A recent survey of 3,157 designers showed that design inconsistency is the top challenge in the industry (57% of respondents). Video   “Because a design system is modular, it makes design scale more like engineering. Everyone has one set of design and code patterns that are fully integrated,” says UXPin CEO Marcin Treder. “Our solution is like the Gutenberg press for designers: drop in your assets, patterns, and documentation and you’re ready to scale.” Get Started Now: Design Systems

Framer Design: The UI/UX Design Ultimate Tool

Framer Design: The UI/UX Design Ultimate Tool

It’s a great time to be a designer especially in terms of access to information, resources and tools to get our job done effectively. Today, to make things even more exciting, the lovely people from Framer launched Framer Design. In my opinion, this is the new standard for UI/UX design tools. The reason I am so adamant about my statement is because it brings design and code closer together than ever before. It’s not a coding tool that does design so so, it can be used as a design tool solely and beautifully, but it magically allows you to create prototypes right there as you would expect if you used Framer before. Details on this awesome UI/UX Design tool The new graphics mode offers a way to draw your designs directly in Framer, with a full-featured toolkit and device-specific artboards. But where Framer Design really excels is in its auto-layout functions, built specifically for responsive interface design. Once artboards are complete, a designer can then simply switch over to Code mode and insert pre-made interaction patterns or create multi-screen app flows. Programming logic still powers much of how the Code editor works, but for the most part, it’s wrapped in customizable snippets and a WYSIWYG interface. “Even as a web app, it feels smoother than native. It's solid, does what you expect it to do and then some. I especially like the auto-aligning and responsive settings. I foresee a bright future for Framer.” - Tim Van Damme, Head of Design at Abstract This launch marks a pivotal point in the design space, opening up the power of code-based prototyping to the masses. Within the past year alone, Framer has increased its Enterprise accounts by tenfold, onboarding entire product teams at tech giants like Google, Facebook, Amazon and Uber to corporate companies like Barclays and SAP, as well as agencies like Huge, Work & Co. and Frog. To cater to the specific demands of cross-collaborative teams, Framer has also built an entire Cloud collaborative workflow, providing enterprise-level security and access via the client’s own SSO services. Other team workflow features include a full access management panel with version control, built-in project invites and real-time design updates for team members. I have been playing with it for the past week and I have to say, Framer is on to something here. As a design tool alone Framer is very impressive. It’s fast and has pretty much feature parity with the competition. Now add on top of that the Framer Studio and resources already available for prototyping. That explains why I think this is a big deal. I have been designing and coding for the past 15 years and I always had the desire to have one tool to rule them all. This may or may not be the silver bullet but the most important thing is that Framer is setting the bar for what a product design tool should be and do and that is great for all of us and the industry in general.   How major companies use Framer Because Framer is a browser-based app, the tool allows for unparalleled flexibility when it comes to integrations, modules and third-party apps.   Uber uses Framer + Mapbox to design with real data and reimagine their app Facebook used Framer to prototype FB Live Video Lonely Planet redesigned their website experience using Framer Dropbox used Framer to conceptualize Paper EA uses Framer to design for Battlefield on gamepad/console Classpass uses Framer to design their mobile app experience Work & Co. uses Framer to prototype for clients like Marriott, Youtube and Jigsaw Yandex uses Framer to prototype mobile onboarding flows Deliveroo onboarded their entire design team onto Framer Google used Framer to design Google Gboard Twitter used Framer to prototype Twitter Videos For more information check out https://framer.com/

Figma UI Tool with Real-Time Collaboration for Designers

Figma UI Tool with Real-Time Collaboration for Designers

It's amazing to see that today there are plenty of interface design tools for designers. In the past we were limited to Adobe, my favorite tool used to be Fireworks. Thanks to them, when they killed it a lot of people saw the opportunity to build not only a tool to replace it but a much better tool. Figma is a great example. The idea is to be the Google Docs for designers. It's a vector tool that runs in the browser and allows for incredible collaboration. I've been playing with it at home and I am quite impressed about how powerful it is. The first interface design tool with real-time collaboration. Figma keeps everyone on the same page. Focus on the work instead of fighting your tools. Simultaneous Editing from Figma, Inc. on Vimeo.   One of the coolest features of Figma has to be the real-time collaboration. I always wanted something like that, especially for feedback. It saves so much time than trying to explain the changes I'd like to see. Another impressive achievement is how smooth and fast the app is. It runs on the browser. I wish Abduzeedo was this fast. Here's a great video showing Ryan Putman using Figma to create icons Some other features that are worth mentioning: Constraints: Designs automatically adapt to different screen sizes with Versioning: Work is constantly saved with Version History, and all edits can be accessed in one click. Live Device Preview: see your changes mirrored to your mobile device in real time. Now the best thing is that Figma is free till January. So check it out and let us know what you think: https://www.figma.com/

Sketch 3 - Giveaway

Sketch 3: 5 Licenses Giveaway - Winners

I have been an Adobe user since I can remember, adopting the new tools always coming and going. Macromedia back in the day tried to challenge Adobe's supremacy and ended up being acquired by them. Now there's a new tool in the market that I have fallen in love with and that app is called Sketch. I have been using Sketch for over a year, at work at Google and for personal projects and I simply love it. Sketch is a vector tool that does an impeccable job of combining the best of all worlds when it comes to designing mobile apps and web sites. You must check it out. The new version os Sketch brings some very important new features. The most important I believe is the possibility of creating symbols. Below we list some of the features: Precision: Vectors mean scalability. Sketch's Vector shapes easily adapt to changing styles, sizes and layouts, allowing you to avoid a lot of painful hand-tweaking. Objects: In Sketch, every shape you create is an item in the Layers List. No more hidden paths. Snap to Pixel: Sketch rounds a shape or layer to its nearest pixel edge. No more half pixels, dirty shapes and alpha-blended messes Pixel Zoom: See everything in the fullest detail, or turn on Pixel View to inspect the resulting pixels. It’s the best of both worlds. Beautiful Text: Sketch’s perfect native text rendering shows your text exactly as it will appear in your app or on your website. Symbols: Symbols are groups of elements you can copy and paste throughout your documents. Change one, and all of them will change automatically. iOS Mirror With Sketch Mirror, you can preview your designs on your iOS devices while you work on them, making it the perfect companion for Sketch. Giveway We have 5 Sketch licenses to giveaway. To participate just leave a comment and tweet this post. We will announce the winners next week. Winners Thank you so much for participating in this giveaway, we were blown away by the amount of comments. So here are the winners: @uncleserb @Walkyriewolf @ksbckr @MacrossX7 @brainra For more information, learn more about Sketch and download the trial version visit http://bohemiancoding.com/sketch/