Design
Design is not just what it looks like and feels like. Design is how it works.
I use Figma for all my designs. Framer is great too.
I also use Excalidraw to sketch out problems I am solving.
Sketch seems nice too perhaps for making icons and logos.
I keep a list of inspiring designs.
Arc has nice design team. Love their video on how they did design feedback meetings.
More people should do design in the open.
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
- Most effective graphics are done by those who understand the product flows.
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) (HN)
- 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
- 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
- 10 practical tips for improving your text layout
- Rotato - Mockup Generator & Animator 3D. (In use)
- Every homepage ever (Examples)
- Vercel Design
- BLKMARKET - On-demand textures and digital assets for graphic design. (Twitter)
- Books to learn environment design
- Holographik - Creative studio specialized in design and motion. (Blog)
- 24 Days of Design Gifts
- Generating designs with Midjourney (2022)
- Design Full-Time
- Braun E-Catalogue
- Apple Summary Slides (Code)
- ui.land - Digital Library for Designers and Engineers. (Tweet)
- Alcoholic Vodka
- Вездесущий синий кот: Depot провело ребрендинг молочной продукции «Милград»
- Design tool performance signatures
- Learn UI Design - Complete Online Video Course.
- Layers - Home for designers.
- UI design for HTTPie: macOS vibes for the API testing client (2023)
- Visual design rules you can safely follow every time (HN)
- Diagram - Be more creative with generative design tools.
- Introducing Genius (2023)
- Galileo AI - Copilot for interface design.
- Noya - New kind of design tool. (HN) (HN)
- Purrity Creative illustrations for websites and applications
- DesignHeaven - Stunning free design resources for designers and developers.
- Startup CEO records entire meeting with designer Live Footage (2023)
- Deadobe - Huge list of alternatives to Adobe products.
- Reflect's design page
- How Airbnb organizes the designs (2023)
- Brutalist Web Design
- Ten Principles for Good Design (Code)
- Web Interface Guidelines (Code)
- Good Design Tools - Best tools and resources for designers.
- Universal Design Guide Playbook