Sketch is one of the most popular UX design tools around. This training course will help designers of all skill levels be productive with its focused, comprehensive vector graphics workflow. Follow along with Chris Converse and learn the ins and outs of the Sketch 3 interface, how to work with the key tools and workflows for UX and web designers, and how to create logos, wireframes, mockups, and production-ready graphics with Sketch. By the end of the course, you’ll be able to use Sketch’s artboards, text and object styles, reusable symbols, and drawing and export tools to create high-definition PNGs, JPEGs, and PDFs. The exercise files are free to all members. See more: Learn Sketch: The Basics.
- Creating pages and artboards
- Adding a navigation bar
- Creating a logo
- Drawing custom shape-based icons
- Building links
- Adjusting layouts for medium screens
- Adapting layouts for small screens
- Exporting artboards and assets
Sketch App By Bohemian Coding is a desktop app for Professional digital design for Mac, mostly used to design and prototype web applications.
How to turn pencil and paper sketch to high fidelity mock up with Sketch app:
To develop the high level flow of your app many designers choose to create an artboard. The first version of this artboard is often on paper, simply linking boxes with words together. After you’ve drawn your screenflow out on paper you’ll find it much easier to imagine travelling through the interface. Often through visualisation inconsistencies and complexities will become immediately obvious. Many times you’ll have moments where you think “I want to do x” on a screen and suddenly realise there’s no obvious place to do it.
You can use your inital rough artboards as a framework to organise and design a more fully fledged concept. A sketched out, more detailed artboard is quite easy for others to interpret, so you can spend time having people “try” out your design to see if they understand the direction it’s going. Testing your design is a really great way to see what is and what isn’t working.
- Autosave and versioning – Sketch is autosaving for you and it even allows you to restore a previous version of your file.
- Vector editing and pixel perfection – Switching from vector to pixel view is also very useful when it comes to icon or illustration design.
- Smart Guides – Smart guides will help you to get all your elements with the correct alignment, padding and margin in a very easy way.
- Edit elements on the fly – Getting the perfect shape size or corner radius by entering values in the input fields.
- Shapes connection – No more struggle with moving things between back and front.
- Multiple blending options per layer – In Sketch, you can do what you want with a single shape.
- Round to Nearest Pixel Edge – Round to Nearest Pixel Edge rounds a shape or layer to its nearest pixel edge.
- Linked Styles – When you deal with text-heavy design, linked style allows you to set a specific style that you can assign to any text.
- Exporting Assets – Sketch being vector friendly and well-thought, the export is one click away and allows different sizes and formats (pdf, eps, svg, png, jpg, tiff).
- Distribute Spacing – This feature will help you to quickly test several of them in a heartbeat.
- Grids – You certainly use grids, this is a great tool.
- Text Rendering – Using it’s own advanced text rendering, Sketch is doing a great work at displaying text and typefonts.
- CSS Styles – This feature will translate all your blending options into CSS code.
- Rotate copies – Saves you lot of trouble and time.
- Sketch Play – It’s still in beta but Sketch is on it’s way to have iOS mirroring.
See more resources:
Build My Site