xenmaster's design tools

The following is a list of utilities and tools used by UI/UX designers. This list is inspired by the roadmap: https://github.com/togiberlin/ui-ux-designer-roadmap . Note that this roadmap has a lot of important information about what concepts are worth studying, so it should be reviewed in conjunction with the list below. Good luck and happy designing!


  • Design, Prototyping, Wireframing

    This is the best way to get started in your design journey. Outline basic functionality and layout using any or all of these tools!

  • Sketch

    Commercial Mac Website

    Sketch is a design toolkit built to help you create your best work — from your earliest ideas, through to final artwork.

     

    Sketch icon
  • Adobe XD

    Free Personal Mac Windows Website

    Adobe XD (Experience Design) is a vector-based tool developed and published by Adobe Inc for designing and prototyping user experience for web and mobile apps.

    Wireframe, design, prototype, present, and share amazing experiences for web, mobile, voice, and more — all in one app. XD is made for designers, creative teams, and organizations that need to design at scale. It’s everything you need to work more efficiently, collaborate effortlessly, and create and manage your design system.

    Adobe XD has a companion app for phones that allows you to view and interact with your projects as visual prototypes called Small Adobe XD Mirror iconAdobe XD Mirror

     

    Adobe XD icon
  • Balsamiq Wireframes

    Commercial Mac Windows Web Website

    Balsamiq Wireframes is a rapid low-fidelity UI wireframing tool that reproduces the experience of sketching on a notepad or whiteboard, but using a computer.

    FEATURES

    • Built for Collaboration - teams can meet and design online
    • UI Components & Icons - Hundreds of built-in and community-generated UI controls and icons.
    • Drag & Drop Simplicity - Assemble elements with the confidence of knowing they can be implemented.
    • Export to PNG or PDF - Share or present wireframes on the web, via images, or via interactive PDFs.
    • Optimized for Speed - Wireframe at the speed of thought with Quick Add and many keyboards shortcuts.
    • Re-usable Symbols - Create templates, masters, and re-usable and customizeable component libraries.
    • Interactive Prototypes - Linking lets you generate simple prototypes for demos or usability testing.

     

    Balsamiq Wireframes icon
  • Essential Tools

    The accompanying roadmap provides information on Adobe InDesign, Illustrator and Photoshop, which are all good tools that most shops run, but are expensive subscription based products. Listed below are fantastic commercial tools that do what Adobe does, but for much less cost and you own the product when you buy - no subscription feeds every month!

  • Affinity Publisher

    Commercial Mac Windows Website

    From the earliest days of visualizing the Affinity range, we planned an unrivaled trio of sleek, modern apps tailored to work with the latest technology – ultra-fast, with stunning power and completely stripped of bloat.

    The final step towards realizing that ambition will come with the launch of Affinity Publisher.

    It’s an all-new app which we believe will revolutionize desktop publishing, in the same way Affinity Photo and Affinity Designer have shaken up professional photo editing and graphic design.

     

    Affinity Publisher icon
  • Affinity Photo

    Commercial Mac Windows iPad Website

    Affinity Photo is a professional, full-featured raster graphics editor. Working in Affinity Photo is always live and you can pan and zoom at 60fps, with live previews and non destructive application. It supports unlimited layers and a dedicated RAW editing workspace, as well as RGB, CMYK, LAB, Greyscale colour space with end-to-end CMYK workflow with ICC colour management, and 16-bit per channel editing.

    Fast and Efficient Tool Set

    • Pan and zoom at 60fps, even with huge images
    • Live tools, live previews, real-time editing
    • RAW and regular processing united in one app

    Professional

    • Professional colour spaces and profiles
    • Pro file formats like PSD supported
    • Modern camera RAW formats supported
    • Full set of 16-bit filters
    • Sub-pixel precision and pixel-perfect snapping
    • Customisable toolbars, keyboard shortcuts and panels

    Clean Workspaces

    • Dedicated personas (modes) for specific tasks and toolsets
    • Uncluttered UIs for RAW editing, photo editing, panoramas, and liquify
    • Export persona for fine control over export regions and settings

    Over 1,000,000% Zoom

    • Zoom way beyond 1,000,000% — smooth like butter
    • Quickly switch between favourite zoom levels

    Solid Undo History

    • Instantly undo/redo over 8,000 History steps
    • Save History so you can undo steps later even on different Macs
    • A seamless AutoSave protects against unexpected shutdowns

    test

     

    Affinity Photo icon
  • Affinity Designer

    Commercial Mac Windows iPad Website

    Affinity Designer is the fastest, smoothest, most precise vector graphic design software available. Built from the ground up over a five-year period, every feature, tool, panel and function has been developed with the needs of creative professionals at its core. With continuous innovation and development, the result is a ground-breaking application that will revolutionize how you work.

    Used by professionals the world over as their go-to tool for vector illustration, Affinity Designer continues to raise the bar for creative software. Precise control over curves, eye-popping colors and blistering performance ensure stunning results every time.

    Dazzling colors

    Color is at the heart of your design, and Affinity Designer delivers in droves. With support for all major formats, ICC profiles and the latest wide gamut displays you know your designs will pop. And with silky smooth gradients which always update live on your page, the control you have is limitless.

    Precise curves

    The fundamentals of crafting curves are covered expertly with the precision-engineered pen tool - and in combination with intuitive modifiers it’s the workhorse of everything you create. Swapping to the node or live corner tool allows you to re-sculpt, hone and adjust to perfection.

    Flawless geometry

    It’s hard to describe the joy you will feel in using the fully customizable live shapes in Affinity Designer. Not only are they incredibly fluid to adapt, we’ve added automatic snapping points to ensure spot-on geometry with everything you do.

    Brush stabilization

    An amazing addition, the rope and window stabilizers allow you to produce the smoothest, most accurate curves you ever thought possible – all using freehand pencil and brush tools.

    Non-destructive operations

    Naturally you can combine shapes using Boolean operations, but to do it non-destructively so you can still move and edit the component parts? That gives you some serious power not found in other apps.

     

    Affinity Designer icon
  • Design Inspiration

    Whether it is icon design, fonts, or stock pictures, the following sites are great places for good resources or to inspire your own designs!

  • IconArchive

    Free Web Website

    IconArchive is a professional tag and color filter based icon search engine with more than 290,000 icons for web developers, end users and graphic artists. You can collect, organize & share your favorite icons here with ease. If you want to customize your desktop, you can download icons for all operating systems, Win, Mac & Linux.

     

    IconArchive icon
  • Iconfinder

    Free Web Website

    Iconfinder provides high quality icons for webdesigners and developers in an easy and efficient way.
    Iconfinder provides beautiful icons to millions of designers, developers and other creative professionals. Iconfinder now hosts the worlds largest collection of premium icons, with over 340.000 icons in stock. The Iconfinder Marketplace lets contributing illustrators earn royalties by drawing, uploading and selling their original artwork.

     

    Iconfinder icon
  • Flaticon

    Freemium Web Website

    Flaticon has more than a million icons in all formats, for all kind of projects: presentations, apps, websites, catalogs, infographics etc.

     

    Flaticon icon
  • Pixabay

    Free Web Android iPhone Android Tablet iPad Website

    Over 1.6 million royalty free stock photos and videos shared by our generous community.

     

    Pixabay icon
  • Adobe Stock

    Commercial Mac Windows Website

    Adobe Stock is enriched every day in content imagined by the creative, for the creative. Easily access high-quality, licensed resources directly in your Small Adobe Creative Cloud iconAdobe Creative Cloud applications - and create wonders.

     

    Adobe Stock icon
  • Alamy

    Commercial Web Website

    125 million stock images, vectors and videos. Greater choice from Alamy, the world’s most diverse stock photo collection.
    Hassle free - no subscriptions, no credits, no need to register! Pricing from €9.99

     

    Alamy icon
  • iStock

    Commercial Web Website

    Discover royalty-free images, illustrations and videos that will make you stand out.

     

    iStock icon
  • Getty Images

    Commercial Web Website

    We offer high-quality, diverse and relevant stock photos, stock footage, stock music and editorial images for creative professionals. Search today.

     

    Getty Images icon
  • Dreamstime

    Commercial Android iPhone Android Tablet iPad Website

    The largest online community of professional stock photographers offering millions of high-quality photos, illustrations, videos, and audio clips.

     

    Dreamstime icon
  • Fotolia

    Commercial iPhone Website

    Discover more than 35 million cheap royalty-free images, vectors and videos. Fotolia is the image bank for all your publishing and marketing projects!.

     

    Fotolia icon
  • Shutterstock

    Commercial Web Website

    Search and select from millions of high resolution royalty free images, stock photos, stock videos, vector art, and stock photography.

     

    Shutterstock icon
  • Adobe Color CC

    Free Web Website

    Generates color themes that can inspire any project. No matter what you're creating, with Kuler you can experiment quickly with color variations and browse thousands of themes from the Kuler community.

     

    Adobe Color CC icon
  • Promotion + Portfolio Tools

    Once you have started, it is time to put a portfolio together. You can go the easy route with Wordpress or build a bespoke site with Github Pages for content and Jekyll handling the generation of your blog site! Also included are showcases for professional platforms.

  • GitHub Pages

    Freemium Web Cloudron Website

    A web hosting service made by GitHub, for any static website hosted on GitHub. GitHub Pages doesn't support PHP, Node.js, Ruby on Rails, MySQL, or any other server-side service.
    Previously all the code for your website must be made open-source unless you get a premium account on GitHub, but recently you can do it for free with some limits (currently 3 collaborators for private repositories). See github.com/pricing for more details.

     

    GitHub Pages icon
  • Jekyll

    Free Mac Windows Linux Self-Hosted Website

    Jekyll is a simple, blog aware, static site generator. It takes a template directory (representing the raw form of a website), runs it through and Liquid converters, and spits out a complete, static website suitable for serving with Apache or your favorite web server. This is also the engine behind GitHub Pages, which you can use to host your project’s page or blog right from GitHub.

     

    Jekyll icon
  • WordPress

    Freemium Mac Windows Linux Web Android ... iPhone Android Tablet iPad Self-Hosted PHP Cloudron Website

    WordPress is open source software you can use to create a beautiful website, blog, or app.

     

    WordPress icon
  • Behance

    Freemium Web iPhone iPad Website

    The Creative Professional Platform. The world's leading platform for creative professionals to gain exposure and manage their careers.

     

    Behance icon
  • Dribbble

    Freemium Web Android iPhone Android Tablet iPad Website

    Dribbble is the go-to resource for discovering and connecting with designers and creative talent around the globe.

    Dribbble is an online community for showcasing user-made artwork. It functions as a self-promotion and networking platform for graphic design, web design, illustration, photography, and other creative areas. It was founded in 2009 by Dan Cederholm and Rich Thornett, becoming publicly available in 2010. It is one of the largest platforms for designers to share their work online competing directly with Adobe-owned Behance — the latter being the largest. The company is fully remote with no central headquarters.

    Dribbble has an invite-only membership system, where a number of invitations are handed out to artists and designers to freely distribute them amongst their peers. There is also a Pro subscription service with added features.

     

    Dribbble icon
  • Creative Market

    Commercial Web Website

    Buy and sell handcrafted, mousemade design content like vector patterns, icons, photoshop brushes, fonts and more at Creative Market.

     

    Creative Market icon
  • FontSpace

    Free Web Website

    FontSpace is a top 5,000 website that reaches a distinct market of graphics designers, hobbyists, scrap-bookers, and typeface enthusiasts. FontSpace accepts fonts of all shapes and sizes and helps you find one for your next project.

    Broad ranges of Internet Protocol (IP) addresses have been permanently blocked from creating user accounts on our website for reasons which we don't care to explain. Instead, if you do really care to register then you must submit a request via e-mail of which we will be the final arbiter.

     

    FontSpace icon
  • Building Tools

    Here's how to turn your design thoughts into full fledged web pages!

  • HTML

    Free Web Website

    HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.

     

    HTML icon
  • CSS

    Free Web Website

    Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to web documents.

     

    CSS icon
  • Bootstrap

    Free Self-Hosted CSS HTML5 Boilerplate JavaScript Website

    Bootstrap is a open-source collection of tools for creating browser sites and applications. It contains HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and other interface components, as well as optional JavaScript extensions.

     

    Bootstrap icon



Comments on xenmaster's design tools

Echo echo ... Feels empty in here

Maybe you want to be the first to submit a comment?

Sign up to comment, it's simple!