Category: Training

Mastering the Bézier Curve in Sketch

In digital graphics, computers draw vector shapes using a collection of points — a sort of connect-the-dots — and most programs use “Bézier curves” to create curved lines around those vector points. You may be familiar with their appearance in design and motion graphics tools, but understanding how they work will take out some of the pain and confusion when you’re trying to create a particular shape. Building off our understanding of vector shapes, this article will demystify designing with Bézier curves.

mastering bezier curves in sketch

source

Codrops Tutorial: MAKING SVGS RESPONSIVE WITH CSS

Cross-browser fixes and hacks included. Note Internet Explorer width: 100%; addition to CSS.

An SVG can be embedded on a web page in many ways; one of which is embedding it inline in an HTML5 page using the <svg&rt; tag. The other commonly used techniques include embedding it as an image using the <img&rt; tag, embedding it using the <object&rt; tag, using an iframe, and as a CSS background image.

css-responsive-svg

source

Unlock the next era of UI development with Polymer

Video from Google I/O 2014

Polymer is a new type of library for the web, built on top of Web Components, and designed to leverage the evolving web platform on modern browsers.

Entering the multi-screen era means rethinking how we build our applications. Producing a few PSDs doesn’t cut it anymore, we have to start seeing the things we design as components within larger systems. Join us to learn how to use Polymer to revolutionize your design process. With these new tools we can create the UIs of the future, and shorten the time between concept and reality.

source

Learn Sketch 3

Sketch uses one unit, styles only relevant to UI design, a built-in iPhone previewing tool called Mirror and Artboards, the most efficient way to template multiple screens.

Design isn’t hard to learn. That’s because most of us are already building products and are familiar with what design means. What used to be complex and confusing is now simple and effective, thanks to Sketch, an app that is entirely focused on user interface design. Unlike Photoshop, you don’t need to worry about photo editing and the hundreds of other settings that are noises to designing a simple application.

source

Design with Swift

Learn UI and animations using Swift.

Swift is much easier to follow, especially if you’ve never done iOS development before. This chapter is for designers and complete beginners… I will focus on executing simple user interfaces and powerful animations instead of the language itself, which can be read in the Swift iBooks. You don’t need to have read the book before this chapter. I’ll include all the important information for designers.

source

10 Tips & Tricks for Sketch

  1. Learn the “Insert”-Shortcuts
  2. Always have the right zoom
  3. Scrolling
  4. Hide/Show sidebars
  5. Presentation mode
  6. Ruler
  7. Moving objects
  8. See margins while moving
  9. Resizing objects
  10. Naming and grouping objects
  11. Bonus: Resources
    On sketchappsources.com you can find a great collection of free design resources for Sketch 3 – I can recommend you to use them in your projects.

source