design.md

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.
• 90% of design is just moving things around until it looks right

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. (Book)
• 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) (Code Generators)
• 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)
• App Store Award Winners 2021
• The Essence of Software: Why Concepts Matter for Great Design (2021)
• Ask HN: Best self-starter resources to learn web design? (2021)
• Inside Apple Park: first look at the design team shaping the future of tech (2021)
• James Dyson answers design questions from Twitter (2021) (HN)
• Noya - Open interface design tool.
• How I Build (2021) (HN)
• Inclusive Design
• IRA Design - Free and open-source illustrations for your projects. (HN)
• Penpot - Open-Source design & prototyping platform. (Code) (HN) (HN)
• UI Gallery (Tweet)
• Product Designer Software Stack (2022)
• Light mode, Dark mode, and Gen-Z mode? (2022) (HN)
• Marvel - Rapid prototyping, testing and handoff for modern design teams.
• Tome - Storytelling tool for work.
• Who is hiring designers (2022)
• UI8 - UI Design Resources, UI Kits, Wireframes, Icons and More.
• What’s the hello world of product design?
• When your portfolio is a brand in itself (2020)
• Design for Developers Book (2022)
• Vectornator - Create sophisticated illustrations, beautiful interface designs, amazing layouts. (Twitter) (GitHub)
• Parametric Design course
• The design space in 2022 - Brief review & tools for the future
• Magician - Magical design tool powered by AI.
• The Case for Design Engineers (2022)
• The Ones by CW&T
• What are the most common mistakes developers make when implementing designs you hand off?
• Open Design - Read and display data from designs. Using code. (SDK Code)
• The Design of Everyday Things – Book Summary and Notes (2022) (HN)
• Readymag - Design tool to create websites without coding.
• 10 Principles of Good Design by Dieter Rams