Design

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.”)​
​Opinions are not ideas. Opinions are not as important as ideas. Opinions are just opinions.​
​Don’t know where to start a design? literally just copy the next closest thing and then …just keep going.​
​As Design tools and code are rapidly converging. Designers who can think like developers will have a leg up on everyone.​
​Designing for dark mode is incredibly hard as an afterthought. If you plan to support dark mode, try designing it first and doing the light version after.​
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 Notebooks - Bring transparency to your design process. (GitHub)
​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 (HN)
​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.
​Screenlane - Web & mobile UI design inspiration.
​State of Design in 2021​
​The Design Squiggle - Design process illustrated.
​archives.design - Organized collection of graphic design related items that are available on the Internet Archives.
​Ouchhh - German design studio.
​Interview with Rasmus Andersson​
​xLayers - Generate code from your design. (Code)
​Bloo Lo-Fi Wireframe Kit​
​illlustrations - Open source illustrations kit.
​Alexander Christopher: Notes on the Synthesis of Form (1964) - Book about the process of design.
​Design Resources - Curated list of design resources from design templates, stock photos, icons, colors, and much more.
​Compute Cuter - Guide to cute-ifying your computer. (Lobsters)
​Graphic Designers Have Always Loved Minimalism. But at What Cost? (2021) (HN)
​Hack Design - Design lessons for everyone, curated by top designers.
​Web Designer & Developer Toolkit - Curated tools & resources for people who make websites.
​Root Illustrations - Beautiful illustration constructor for websites & apps.
​Skribbl - Free, Hand-Drawn Illustrations.
​Базовые принципы проектирования​
​Design Regression - Journal publishing texts that are about design for reading and reading-related research.
​Playbook.com - Beautiful Cloud Storage Platform for Designers.
​Ask Playbook - Helps designers achieve their career goals.
​Embracing Design Constraints (2021)​
​How to critique a product's design (2021)​
​EasyLogic Studio - Built using CSS and SVG to reduce the gap between web design and code. (Code)
​There is a fundamental disconnect between the way designers and business people think. (2021)​
​gridless.design​
​The elements of product design (2021)​
​Tricycle - Automation Tools for Designers. (Automator and Fig Demo)
​Design Vault - UI patterns & design inspiration from real products.
​Hicks - Graphic design, branding, illustration & iconography.
​Better in Black: Rethinking our Most Important Buttons | Spotify Design (2021)​
​Designing a scalable design organization (2021)​
​Figma's design and development process (2021)​
​Design Principles - Open source collection of Design Principles and methods. (Code)
​Doodle Ipsum - Lorem ipsum of illustrations.
​Mechanic - Open source framework that makes it easy to create custom, web-based design tools that export design assets right in your browser. (Code)
​TryShape - Create, Export, Share, and Use any Shapes of your choice. (Code)
​Mucho - Branding, Packaging, and Graphic Design.
​The Future of Design AI: Interview with Sergey Kulinkovich (2021)​
​Globs Designer​
​Apps for collecting/organizing designs/images (2021)​
​Дизайн в Злых марсианах (2021) (Tweet)
​IKEA catalogue through the ages (HN)
​Lunacy - Figma-like design tool, not in Electron, in Avalonia.
​Interview with Frederique Matti (2021)​
​Lovers Magazine - Online magazine for creative professionals. (Twitter)
​Inclusive Web Design Checklist​
​Jony Ive's foral designs (2021)​
​LibreSprite - Free and open source program for creating and animating your sprites. (Code)
​Design for yourself! (Sometimes) (2021) - Individual creativity has a strong and positive impact on the design process.
​Web design & art history​
​Design Masterclass with the best designer I’ve ever met (Raphael Schaad with Cron Calendar) (2021) (Tweet)
Wordpress
Icons
Last modified 3d ago
Copy link
Contents
Notes
Links