Design is not just what it looks like and feels like. Design is how it works.

I can't call myself a designer yet but I am learning.

I do think design applies to everything I am doing. Even this wiki has some design choices of how it can be structured. As the quote above says, it's not how it looks like, it's how it works.

Thus I try to be conscious of how my design decisions affect what I do. I like to use Sketch and Figma when designing things.

Notes

• ​A good way to make your interface look “designed” is to use a consistent space scale​

• ​Don't design for average. If you want to make a great product, it needs to be great for someone.​

• ​Design is about making things look a certain way. Not “make it look pretty” but “surface.” I have had many interactions with smart educated people (even designers!) whom seem to believe design is art, that design is mainly about surface (e.g. “a designer chair.”)​

Links

• ​Findguidelin - The fastest way to brand assets.

• ​Brand Style Guide Examples​

• ​Intenion - ad by Apple​

• ​7 Practical Tips for Cheating at Design​

• ​Front End Design Checklist​

• ​Lona - Tool for defining design systems and using them to generate cross-platform UI code, Sketch files, and other artifacts.

• ​Free Logos - Has some nice logos.

• ​Design Languages - Curated library for design languages, design systems and front-end frameworks.

• ​Designing Fluid Interfaces (2018)​

• ​Refactoring UI - Learn how to design awesome UIs by yourself using specific tactics explained from a developer's point-of-view.

• ​Curated list of UI styleguides​

• ​The ineffectiveness of lonely icons (2019)​

• ​Awesome Design Tools (HN)

• ​Closing the loop with Design Intelligence (2018)​

• ​Abstract - Modern Design Workflow. Sketch version control management tool.

• ​10 Year Challenge: How Popular Websites Have Changed (2019)​

• ​Design Systems Repo - Frequently updated collection of Design System examples, articles, tools and talks.

• ​Mike Bostock - Design is a Search Problem (2014)​

• ​Little Big Details - Delightful UX Design.

• ​Whimsical - Visual Workspace. Collaborate visually. Fast and delightful.

• ​Apply Pixels - Industry Standard Design Resources.

• ​Firefox: The Evolution Of A Brand (2019)​

• ​Labels are a last resort​

• ​UI Design - Curated list of useful resources related to User Interface Design.

• ​Rad Lines - Vector Generator Tool. (Web)

• ​The best design resources for new designers (2019)​

• ​Awesome Design - Focuses on collecting high quality resources and tools which can be used by UI/UX designers in daily work.

• ​Awesome Design 2​

• ​Design Inspiration & Resources​

• ​How to design delightful dark themes (2019)​

• ​5 design principles for building your first portfolio​

• ​The Definition of Design​

• ​Implementing Dark Mode in iOS 13 (2019)​

• ​Mind the gap, user centered design in large organizations with Luke Wroblewski (2019)​

• ​Space in Design Systems (2016)​

• ​The power of good design: Dieter Rams’s ideology, engrained within Vitsœ​

• ​Expect change in your design career. Choose growth.​

• ​Open Doodles - Free Set of Sketchy Illustrations.

• ​Designing remotely at Doist​

• ​SuperCreative - Collaborate with super freelance designers.

• ​Motion Design course​

• ​Creating a brand to serve - The story of REKKI and the design of our brand.

• ​What breaking interfaces taught me about building better interfaces - Hakim El Hattab (2019)​

• ​spark-joy - Easy ways to add design flair, user delight, and whimsy to your product.

• ​All Design Conferences - Simple list of all design and front-end conferences for the year.

• ​How to apply for a design internship (2018)​

• ​Resources to improve drawing and visual thinking skills​

• ​Coding for Designers - Demystifying Code and Learning JavaScript. (Code)

• ​Design tips for developers (HN)

• ​Daily UI - Series of daily design challenges, design inspiration and neat surprise rewards.

• ​Best Design books I’ve ever read so far (2015)​

• ​On Design Thinking (HN)

• ​The Design Graph (2020)​

• ​DesignValley - Ultimate design tool depository.

• ​Design Dictionary by Figma​

• ​React Links for Designers​

• ​Steve Schoger design tips​

• ​Utopia - Elegantly scale type and space without breakpoints.

• ​unDraw Illustrations​

• ​Humaaans - Mix-&-match illustrations of people with a design library.

• ​Open Peeps - Hand-drawn illustration library.

• ​ImagineUI - Tool that supports developing wireframes in a localized human-readable format. (Code)

• ​Mozilla Design Journey​

• ​Abduzeedo - Collective of individual writers sharing articles about design, photography, and UX.

• ​Mockuuups - Instant mockup generator with more than 500 scenes.

• ​Resilient Web Design​

• ​The Shape of Design​

• ​Blush - Illustrations for everyone.

• ​Design Reading (2020)​

• ​Becoming a Creator - Learn the most important lessons from my journey growing 700k+ followers on Instagram.

• ​Spotify Design​

• ​Sidebar - Five best design links, every day.

• ​Reading Design - Online archive of critical writing about design.

• ​Design Resources For Developers​

• ​Blush - Create, mix, and customize illustrations made by artists around the world.

• ​spark-joy - Easy ways to add design flair, user delight, and whimsy to your product.

• ​Teleport - Create high-definition prototypes visually, generate the code in real-time, and deploy your user interface with one click. (Article)

• ​Growth Design​

• ​Data Authoring Environments: An Overview (2018)​

• ​Radical Design course​

• ​What’s the design process at GDS? (2014)​

• ​Shooot - Create amazing screenshots for you dribbble shots. (Code)

• ​Mental models for designers (2019) (HN)

• ​gestalten - Focus on the aesthetic, particularly that of graphic design.

• ​Design for Developers Workshop (Code)

• ​Nodesign.dev - Tools and resources for non artistic developers. (HN)

• ​Flat UI Elements Attract Less Attention and Cause Uncertainty (2017) (Lobsters)

• ​uizard - Fastest and easiest way to bring your ideas to life.

• ​Mockingbird - Mock up an application and show what's important: the idea, the information, the interaction.

• ​UI Design for Developers​

• ​UI Design Daily - Weekly free UI resources straight to your inbox.

• ​Sideway - Find design inspiration from real life projects.

• ​Mobbin - Latest Mobile Design Patterns.

• ​Apple Design Resources​

• ​UCLAB - Visualization research group situated between design, computing, and the humanities.

• ​How to Draw a Compelling Data Interface (2019)​

• ​What's That Size? - Screen info & mockups for many modern devices.

• ​Absurd Design - Free Surrealist Illustrations and Vector Art.

• ​Analysis of stripe.com page (2020)​

• ​Good Web Design - Best landing pages, organized by section.

• ​Rora - Design news and trends.

• ​Anima - Design to code, automated.

• ​The Guide to Design​

• ​Themesberg - Premium and Free Themes, Templates & UI Kits.

• ​Design Hunt - Creative inspiration for everyone.

• ​Grid Systems in Graphic Design/Raster Systeme Fur Die Visuele Gestaltung by Josef Müller-Brockmann​

• ​Design Books by Womxn & People of Color​

• ​TTN Design Guidelines​

• ​LogoArchive - Study of form language in logo design. (IG)

• ​iA new site design (2020)​

• ​Six N. Five - Multidisciplinary Design Studio.

• ​Shift Nudge - Interface Design Course.

• ​Neuralink Chip vector artwork​

• ​Mailbox UI​

• ​To design and develop an interactive globe (2020) (HN)

• ​lookup.design - Find UI Design Examples.

• ​Disrespectful Design – Users aren’t stupid or lazy (2020) (HN)

• ​What do you think most of the non-designers you work with today still get wrong about design?​

• ​What's More to Design in a Chair (2020)​

• ​Contrast - Developer Handoff Reimagined. (Blog)

• ​How we created the illustration style for our partner products (2020)​

• ​Intro to Web Design​

• ​Adobe MAX Creativity Conference​

• ​You don't know UI - Learn how to build universal, modern and scalable user interfaces.

• ​14 Patterns of Biophilic Design​

• ​Startup Landing Templates - Get Free React landing page every week.

• ​PatternPad - Create beautiful patterns for presentations, social media or branding.

• ​InVision - Digital product design, workflow & collaboration.

• ​Canva - Collaborate & Create Amazing Graphic Design for Free.

• ​Chasing the Pixel-Perfect Dream (2020) (HN)

• ​Summary of My Work at Figma​

• ​The Merveilles Sensibility (2020) - Solutioning for technological resilience.

• ​Pixelorama - Free & open-source 2D sprite editor, made with the Godot Engine. (Web)

• ​Designing User Interfaces Book​

• ​Overlay - Transform your design components into clean React, Vue and HTML components. Supports Figma & Sketch.

• ​Staff Design - Conversations with high-impact individual contributors in product design.

• ​Goxel 3D Voxel Editor (Code)

• ​UI Flowchart Cards - Construct web pages with ease, using UI Flow Cards ―for website builders, designers and developers. (HN)

• ​Fantasy UIs​

• ​Pixel Art to CSS - Pixel art animation and drawing web app powered by React. (Code)

• ​Land Your Dream Design Job - Guide for product designers, from portfolio to interview to job offer.