├── .github └── workflows │ ├── codeql-analysis.yml │ └── format.yml ├── .gitignore ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── components ├── Icon.jsx ├── Layout.jsx ├── LeftNav.jsx ├── NavLink.jsx ├── PageProse.jsx ├── Quote.jsx ├── SkipLink.jsx └── TopNav.jsx ├── content ├── basics.mdx ├── intro.mdx ├── portfolio.mdx ├── resources.mdx ├── roles.mdx ├── talk.mdx └── work.mdx ├── package-lock.json ├── package.json ├── pages ├── _app.js ├── _document.jsx ├── index.js └── posts │ └── [slug].jsx ├── postcss.config.js ├── styles └── globals.css ├── tailwind.config.js ├── theme └── theme.js └── utils └── mdxUtils.js /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "CodeQL" 13 | 14 | on: 15 | push: 16 | branches: [ main ] 17 | pull_request: 18 | # The branches below must be a subset of the branches above 19 | branches: [ main ] 20 | schedule: 21 | - cron: '24 13 * * 3' 22 | 23 | jobs: 24 | analyze: 25 | name: Analyze 26 | runs-on: ubuntu-latest 27 | permissions: 28 | actions: read 29 | contents: read 30 | security-events: write 31 | 32 | strategy: 33 | fail-fast: false 34 | matrix: 35 | language: [ 'javascript' ] 36 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ] 37 | # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support 38 | 39 | steps: 40 | - name: Checkout repository 41 | uses: actions/checkout@v3 42 | 43 | # Initializes the CodeQL tools for scanning. 44 | - name: Initialize CodeQL 45 | uses: github/codeql-action/init@v2 46 | with: 47 | languages: ${{ matrix.language }} 48 | # If you wish to specify custom queries, you can do so here or in a config file. 49 | # By default, queries listed here will override any specified in a config file. 50 | # Prefix the list here with "+" to use these queries and those in the config file. 51 | 52 | # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs 53 | # queries: security-extended,security-and-quality 54 | 55 | 56 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 57 | # If this step fails, then you should remove it and run the build manually (see below) 58 | - name: Autobuild 59 | uses: github/codeql-action/autobuild@v2 60 | 61 | # ℹ️ Command-line programs to run using the OS shell. 62 | # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun 63 | 64 | # If the Autobuild fails above, remove it and uncomment the following three lines. 65 | # modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance. 66 | 67 | # - run: | 68 | # echo "Run, Build Application using script" 69 | # ./location_of_script_within_repo/buildscript.sh 70 | 71 | - name: Perform CodeQL Analysis 72 | uses: github/codeql-action/analyze@v2 73 | -------------------------------------------------------------------------------- /.github/workflows/format.yml: -------------------------------------------------------------------------------- 1 | name: Format 2 | on: 3 | pull_request: 4 | branches: [main] 5 | jobs: 6 | format: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - uses: actions/checkout@v2 10 | with: 11 | ref: ${{ github.head_ref }} 12 | - uses: actions/setup-node@v2 13 | with: 14 | node-version: "14.x" 15 | - run: npm ci 16 | - run: npm run format 17 | - name: Commit changes 18 | uses: stefanzweifel/git-auto-commit-action@v4 19 | with: 20 | commit_message: Apply formatting changes 21 | branch: ${{ github.head_ref }} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Design Docs 2 | 3 | Welcome! We would love to have you here to contribute to open design resources and education. 4 | 5 | ## How you can contribute 6 | 7 | - You can report any issues you encounter, or add design & engineering sugestions in an Issue. 8 | - Take a look at the TODO section on the Readme, or take a look at the issues board and see if there is anything you might be able to contribute. 9 | 10 | ## Contributing without Github 11 | 12 | Not comfortable using Github but want to contribute content, links, review a section or give feedback? You can email Nate Butler at iamnbutler$$$$(at)gmail(dotcom). (Remove the $s and it is a regular gmail address.) 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Creative Commons Legal Code 2 | 3 | CC0 1.0 Universal 4 | 5 | CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE 6 | LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN 7 | ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS 8 | INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES 9 | REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS 10 | PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM 11 | THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED 12 | HEREUNDER. 13 | 14 | Statement of Purpose 15 | 16 | The laws of most jurisdictions throughout the world automatically confer 17 | exclusive Copyright and Related Rights (defined below) upon the creator 18 | and subsequent owner(s) (each and all, an "owner") of an original work of 19 | authorship and/or a database (each, a "Work"). 20 | 21 | Certain owners wish to permanently relinquish those rights to a Work for 22 | the purpose of contributing to a commons of creative, cultural and 23 | scientific works ("Commons") that the public can reliably and without fear 24 | of later claims of infringement build upon, modify, incorporate in other 25 | works, reuse and redistribute as freely as possible in any form whatsoever 26 | and for any purposes, including without limitation commercial purposes. 27 | These owners may contribute to the Commons to promote the ideal of a free 28 | culture and the further production of creative, cultural and scientific 29 | works, or to gain reputation or greater distribution for their Work in 30 | part through the use and efforts of others. 31 | 32 | For these and/or other purposes and motivations, and without any 33 | expectation of additional consideration or compensation, the person 34 | associating CC0 with a Work (the "Affirmer"), to the extent that he or she 35 | is an owner of Copyright and Related Rights in the Work, voluntarily 36 | elects to apply CC0 to the Work and publicly distribute the Work under its 37 | terms, with knowledge of his or her Copyright and Related Rights in the 38 | Work and the meaning and intended legal effect of CC0 on those rights. 39 | 40 | 1. Copyright and Related Rights. A Work made available under CC0 may be 41 | protected by copyright and related or neighboring rights ("Copyright and 42 | Related Rights"). Copyright and Related Rights include, but are not 43 | limited to, the following: 44 | 45 | i. the right to reproduce, adapt, distribute, perform, display, 46 | communicate, and translate a Work; 47 | ii. moral rights retained by the original author(s) and/or performer(s); 48 | iii. publicity and privacy rights pertaining to a person's image or 49 | likeness depicted in a Work; 50 | iv. rights protecting against unfair competition in regards to a Work, 51 | subject to the limitations in paragraph 4(a), below; 52 | v. rights protecting the extraction, dissemination, use and reuse of data 53 | in a Work; 54 | vi. database rights (such as those arising under Directive 96/9/EC of the 55 | European Parliament and of the Council of 11 March 1996 on the legal 56 | protection of databases, and under any national implementation 57 | thereof, including any amended or successor version of such 58 | directive); and 59 | vii. other similar, equivalent or corresponding rights throughout the 60 | world based on applicable law or treaty, and any national 61 | implementations thereof. 62 | 63 | 2. Waiver. To the greatest extent permitted by, but not in contravention 64 | of, applicable law, Affirmer hereby overtly, fully, permanently, 65 | irrevocably and unconditionally waives, abandons, and surrenders all of 66 | Affirmer's Copyright and Related Rights and associated claims and causes 67 | of action, whether now known or unknown (including existing as well as 68 | future claims and causes of action), in the Work (i) in all territories 69 | worldwide, (ii) for the maximum duration provided by applicable law or 70 | treaty (including future time extensions), (iii) in any current or future 71 | medium and for any number of copies, and (iv) for any purpose whatsoever, 72 | including without limitation commercial, advertising or promotional 73 | purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each 74 | member of the public at large and to the detriment of Affirmer's heirs and 75 | successors, fully intending that such Waiver shall not be subject to 76 | revocation, rescission, cancellation, termination, or any other legal or 77 | equitable action to disrupt the quiet enjoyment of the Work by the public 78 | as contemplated by Affirmer's express Statement of Purpose. 79 | 80 | 3. Public License Fallback. Should any part of the Waiver for any reason 81 | be judged legally invalid or ineffective under applicable law, then the 82 | Waiver shall be preserved to the maximum extent permitted taking into 83 | account Affirmer's express Statement of Purpose. In addition, to the 84 | extent the Waiver is so judged Affirmer hereby grants to each affected 85 | person a royalty-free, non transferable, non sublicensable, non exclusive, 86 | irrevocable and unconditional license to exercise Affirmer's Copyright and 87 | Related Rights in the Work (i) in all territories worldwide, (ii) for the 88 | maximum duration provided by applicable law or treaty (including future 89 | time extensions), (iii) in any current or future medium and for any number 90 | of copies, and (iv) for any purpose whatsoever, including without 91 | limitation commercial, advertising or promotional purposes (the 92 | "License"). The License shall be deemed effective as of the date CC0 was 93 | applied by Affirmer to the Work. Should any part of the License for any 94 | reason be judged legally invalid or ineffective under applicable law, such 95 | partial invalidity or ineffectiveness shall not invalidate the remainder 96 | of the License, and in such case Affirmer hereby affirms that he or she 97 | will not (i) exercise any of his or her remaining Copyright and Related 98 | Rights in the Work or (ii) assert any associated claims and causes of 99 | action with respect to the Work, in either case contrary to Affirmer's 100 | express Statement of Purpose. 101 | 102 | 4. Limitations and Disclaimers. 103 | 104 | a. No trademark or patent rights held by Affirmer are waived, abandoned, 105 | surrendered, licensed or otherwise affected by this document. 106 | b. Affirmer offers the Work as-is and makes no representations or 107 | warranties of any kind concerning the Work, express, implied, 108 | statutory or otherwise, including without limitation warranties of 109 | title, merchantability, fitness for a particular purpose, non 110 | infringement, or the absence of latent or other defects, accuracy, or 111 | the present or absence of errors, whether or not discoverable, all to 112 | the greatest extent permissible under applicable law. 113 | c. Affirmer disclaims responsibility for clearing rights of other persons 114 | that may apply to the Work or any use thereof, including without 115 | limitation any person's Copyright and Related Rights in the Work. 116 | Further, Affirmer disclaims responsibility for obtaining any necessary 117 | consents, permissions or other rights required for any use of the 118 | Work. 119 | d. Affirmer understands and acknowledges that Creative Commons is not a 120 | party to this document and has no duty or obligation with respect to 121 | this CC0 or use of the Work. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Design Docs 2 | 3 | _Semi-opinionated design industry documentation_ 4 | 5 | [![License: CC0-1.0](https://img.shields.io/badge/License-CC0_1.0-lightgrey.svg)](http://creativecommons.org/publicdomain/zero/1.0/) 6 | 7 | ### Version 2.0 8 | 9 | There is no "right way" to find your path in the industry. The world of digital product design is still rapidly evolving and has come a long way, even in the past five years. The exciting part is you are on your way to joining an industry with a tremendous amount of impact on people's day-to-day lives–It's up to you to make it for better and not for worse. 10 | 11 | Together, we'll outline some common paths, roles, and the way they interact. However, never feel like you must follow a path anyone lays out for you. One of the most magical things about design and the digital world is that you can always forge your own way, and there are some exciting corners to find. 12 | 13 | [Visit the site](https://designdocs.co/) 14 | 15 | ## The Project 16 | 17 | This is an ongoing project to help early career designers bootstrap their up to their first job in the tech industry. The goal is to be complete without being overly verbose. 18 | 19 | I generally want to bias towards giving direction without being overly opinionated. There are infinite paths, tools and opinions out there, and I hope having a clearly outlined example of an early path will be helpful to some. 20 | 21 | You can leave feedback on the project & content here: 22 | [Feedback – Getting your first job in the product design industry](https://forms.gle/jimgp3uAk8df8MUH9) 23 | 24 | ### Contributing 25 | 26 | _Note: This site and all its contents are published under a **CC0-1.0** license. This means that anyone can do anything with this content, including use it in commercial works or copy it word for word. I think education work belongs in the public domain without constraints, so if you decide to contribute, make sure you are ok with this!_ 27 | 28 | - Building the project should be as easy as cloning it locally and running `npm install`. You can run the `dev:watch` script to get live reloading of MDX content. 29 | - Feel free to contribute a PR with any fixes, typos, etc. 30 | - Open an issue or discussion before updating content, or submit a PR with your changes or suggestions. 31 | - Feel free to reach out with any thoughts or questions! 32 | 33 | ### TODO 34 | 35 | **Short Term** 36 | 37 | - Rewrite content in a more neutral perspective with optional, attributable opinion blocks. 38 | - Finish all the existing sections 39 | - Overall accessibility pass on the site 40 | - Improve performance and deal with smaller issues (Lighthouse) 41 | - Set up CI for code quality, and accessibility checks 42 | - Add tests 43 | 44 | **Long Term** 45 | 46 | - Start a project to track TODOs 47 | - Create a style guide for tone & writing style 48 | - Source contributors to write and review content and industry professionals to review content and provide quotes and snippets. 49 | - Split this repository into two – One for content in raw markdown content and one for the website. 50 | - Many more to come! 51 | 52 | ### Tech 53 | 54 | - Next.js 55 | - Tailwindcss 56 | - MDXRemote 57 | -------------------------------------------------------------------------------- /components/Icon.jsx: -------------------------------------------------------------------------------- 1 | export function GithubIcon() { 2 | return ( 3 | 10 | 14 | 15 | ); 16 | } 17 | 18 | export function ExternalIcon() { 19 | return ( 20 | 28 | 33 | 34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /components/Layout.jsx: -------------------------------------------------------------------------------- 1 | import LeftNav from "./LeftNav"; 2 | import SkipLink from "./SkipLink"; 3 | import TopNav from "./TopNav"; 4 | 5 | export default function Layout({ children }) { 6 | return ( 7 | <> 8 |
9 | 10 |
11 |
12 | 13 |
14 |
15 |
16 |
17 | 18 |
19 | {/* Main has focus:outline-none to prevent a focus ring when jumping to it from the skip link */} 20 |
25 | {children} 26 |
27 |
28 |
29 |
30 |
31 | 32 | ); 33 | } 34 | 35 | export function getStaticProps() { 36 | const posts = postFilePaths.map((filePath) => { 37 | const source = fs.readFileSync(path.join(POSTS_PATH, filePath)); 38 | const { content, data } = matter(source); 39 | 40 | return { 41 | content, 42 | data, 43 | filePath, 44 | }; 45 | }); 46 | 47 | return { props: { posts } }; 48 | } 49 | -------------------------------------------------------------------------------- /components/LeftNav.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | BookOpenIcon, 3 | BookmarkIcon, 4 | ChatIcon, 5 | CursorClickIcon, 6 | InformationCircleIcon, 7 | PhotographIcon, 8 | SearchIcon, 9 | } from "@heroicons/react/solid"; 10 | import NavLink from "./NavLink"; 11 | 12 | const navigation = [ 13 | { 14 | name: "Build a foundation", 15 | href: "/posts/basics", 16 | icon: , 17 | }, 18 | { 19 | name: "Discover the roles", 20 | href: "/posts/roles", 21 | icon: , 22 | }, 23 | { 24 | name: "Have work to show", 25 | href: "/posts/work", 26 | icon: , 27 | }, 28 | { 29 | name: "Have a portfolio", 30 | href: "/posts/portfolio", 31 | icon: , 32 | }, 33 | { 34 | name: "Talk about your work", 35 | href: "/posts/talk", 36 | icon: , 37 | }, 38 | { 39 | name: "Further reading", 40 | href: "/posts/resources", 41 | icon: , 42 | }, 43 | ]; 44 | 45 | export default function LeftNav() { 46 | return ( 47 | 99 | ); 100 | } 101 | -------------------------------------------------------------------------------- /components/NavLink.jsx: -------------------------------------------------------------------------------- 1 | import { default as NextLink } from "next/link"; 2 | import { useRouter } from "next/router"; 3 | import { ExternalIcon } from "./Icon"; 4 | 5 | function classNames(...classes) { 6 | return classes.filter(Boolean).join(" "); 7 | } 8 | 9 | export default function Link({ href, name, icon, external = false }) { 10 | { 11 | /* prettier-ignore-start */ 12 | } 13 | 14 | let current = useRouter().asPath === href; 15 | 16 | // Shared by all links 17 | let commonStyle = ` 18 | group flex items-center 19 | px-3 py-2 space-x-3 20 | rounded-lg 21 | text-md font-bold`; 22 | 23 | // Current nav links 24 | const activeStyle = ` 25 | text-base06`; 26 | 27 | // Nav links that are not current 28 | const inactiveStyle = ` 29 | text-base04 hover:text-base06`; 30 | 31 | { 32 | /* prettier-ignore-end */ 33 | } 34 | 35 | current ? (commonStyle += activeStyle) : (commonStyle += inactiveStyle); 36 | 37 | return ( 38 | 39 | 40 | {icon && ( 41 |
49 | 54 | {icon} 55 | 56 |
57 | )} 58 | 59 |
60 | {name} 61 | {external && ( 62 | 63 | 64 | 65 | )} 66 |
67 | 68 | 69 | ); 70 | } 71 | -------------------------------------------------------------------------------- /components/PageProse.jsx: -------------------------------------------------------------------------------- 1 | export default function PageProse({ 2 | title = "Page Title", 3 | description, 4 | children, 5 | }) { 6 | return ( 7 | <> 8 |
9 |
10 | {children && ( 11 |
12 |
13 |

{title}

14 |

{description}

15 |
16 | {children} 17 |
18 | )} 19 |
20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /components/Quote.jsx: -------------------------------------------------------------------------------- 1 | function QuoteAttribution({ author, media, url }) { 2 | return ( 3 |
4 | {author},{" "} 5 | 6 | 7 | {media} 8 | 9 | 10 |
11 | ); 12 | } 13 | 14 | export default function Quote({ children, author, media_name, media_url }) { 15 | return ( 16 |
17 |
18 |
22 | {children} 23 |
24 | 25 |
26 |
27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /components/SkipLink.jsx: -------------------------------------------------------------------------------- 1 | export default function SkipNav() { 2 | return ( 3 | 10 | Skip Navigation 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /components/TopNav.jsx: -------------------------------------------------------------------------------- 1 | import NextLink from "next/link"; 2 | import { GithubIcon } from "./Icon"; 3 | 4 | const tools = [ 5 | { 6 | name: "Design Docs on Github", 7 | href: "https://github.com/iamnbutler/design-docs", 8 | icon: , 9 | }, 10 | ]; 11 | 12 | export default function TopNav() { 13 | return ( 14 | 44 | ); 45 | } 46 | -------------------------------------------------------------------------------- /content/basics.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Fundamentals 3 | description: Design basecamp – Where the journey begins. 4 | --- 5 | 6 | Early career designers face a flurry of roles, expectations, and technologies they are expected to understand, consider and internalize. 7 | 8 | "Should I just keep making things? Is there something else I should be learning?" 9 | 10 | "What about learning to code? Write? How about learning 3D? Business?" 11 | 12 | It can seem like there are endless things to learn, and time is limited. While opinions vary, there is a path that many designers recommend starting with. 13 | 14 | A quote from [The Year of the Looking Glass](https://medium.com/the-year-of-the-looking-glass) to get us started: 15 | 16 | 23 |

24 | In the beginning, just focus on improving your craft and execution skills. 25 |

26 |

27 | This means that you should be able to design clear, interactive flows that 28 | also look visually attractive. My strong opinion here is that you need to be 29 | good at both interaction design AND visual design. If you can only do one, 30 | you’re at a disadvantage... 31 |

32 |

33 | If you can get to the point where everything you make looks great and makes 34 | sense, you will not have trouble landing a design job. 35 |

36 | 37 | 38 | ### Don't treat your work as precious 39 | 40 | Get feedback early and often, and be willing to change your approach 41 | and explore alternatives. Don't be offended when you get feedback that 42 | work isn't good, or the direction you like the best isn't the one that 43 | works. Get used to accepting feedback on your work – this is a skill 44 | you need to grow in your career. 45 | 46 | ### Critical feedback is vital to develop your skills 47 | 48 | When constructive, critical feedback is one of the most important 49 | things you can receive from others to develop your skills. If you feel 50 | hesitant about asking for feedback about something, that is almost 51 | always a sign that you should go get some feedback! Ideally not from 52 | the person that always tells you your work is great. 53 | 54 | ### You will get better feedback by sharing work in progress 55 | 56 | Get feedback early and often, and be willing to change your approach and explore alternatives. Don't be offended when you get feedback that work isn't good, or the direction you like the best isn't the one that works. Get used to accepting feedback on your work – this is a skill you need to grow in your career. 57 | 58 | **Here are three valuable times to get feedback:** 59 | 60 | 1. When you first develop an idea 61 | 2. After you have explored at least 3-4 directions (never share only a single approach at this stage!) 62 | 3. Following a deep dive on a promising direction 63 | 64 | If you get feedback at these three points, you will most often receive actionable feedback rather than receiving feedback that is irrelevant or too late to be helpful. 65 | 66 | The best designers I know get feedback early and often from their peers, both on a 1:1 basis and when available, in a formal critique setting. 67 | 68 | ### You become a better designer by putting in the work 69 | 70 | Improving your design skill is like building muscle. Practice every 71 | day, and train the right skills. Without putting in the work, it is 72 | impossible to get better. 73 | 74 | There are no shortcuts—Put in the work consistently, and you will get 75 | better. The designers you look up to have put tens of thousands of 76 | hours into improving their craft. 77 | 78 | ## Improving your craft 79 | 80 | As Julie says above, balancing core design skills while early in your career will help you build an excellent foundation and set you up for success. 81 | 82 | One exercise to help you practice is recreating apps or websites you like in your design tool. It's ok to copy them pixel for pixel, as long as you don't try to claim them as your original work. These exercises will help you learn how designers layout screens, help you become more proficient in design tool, and help you become faster when working on your projects. 83 | 84 | ## Choosing your toolkit 85 | 86 | It is easy to get overwhelmed with the number of tools and the mixed messages coming from all sides on which tools to learn. 87 | 88 | Remember, the goal of a tool is to help you create better work – when learning a tool becomes a distraction from making work and solving problems, consider taking a step back and thinking through if you need a new tool. 89 | 90 | **A core tool kit for a designer starting to build products is:** 91 | 92 | - One design tool (Figma, Sketch, XD) 93 | - One prototyping tool (Protopie, Figma, Origami Studio, Framer) 94 | - One presentation tool (Keynote, Google Slides, Figma) 95 | 96 | **Additionally, the following may be helpful:** 97 | 98 | - One notes & sheets tool (Notion, Google Drive, an Office suite) 99 | - One image tool (Photoshop, Affinity Designer/Photo) 100 | - One motion tool (After Effects, Final Cut, Premiere) 101 | 102 | It may be cost-effective to initially align yourself with a family of apps in the beginning. For example, the [Affinity](https://affinity.serif.com/en-us/) tools (Designer, Photo, Publisher) have only an upfront cost, not a continuous monthly subscription. 103 | 104 | I generally try not to push anyone in the direction of any one tool; however, [Figma](https://www.figma.com/) fulfills three essential tool roles and has a large, helpful community behind it. It has great real-time collaboration platforms and no upfront cost. 105 | 106 | I'd highly suggest learning at least Figma and picking up anything else you might need beyond it afterward. 107 | 108 | ## Should designers code, write, \_\_\_\_\_? 109 | 110 | All of these things are valuable, yet their value is significantly less than strengthening your design craft. 111 | 112 | Don't get lost in pursuit of every new skill you hear designers tout as important. Focus on establishing one of the above tools, and invest the rest of your time producing work and getting feedback. 113 | 114 | You will have years ahead of you to add to your skillset as you work on a range of projects. 115 | 116 | ### On Code 117 | 118 | If you tend to lean more technical and enjoy building your projects, it is worth learning baseline code skills. 119 | 120 | Pick up some basic HTML, CSS, and javascript. These foundational skills will teach you about building products and are stepping stones to a whole world of other tools and languages you can learn. 121 | 122 | Building your ideas in code is a great way to have a variety of portfolio pieces. Some good places to start: Code Academy's [Learn HTML](https://www.codecademy.com/learn/learn-html) or MDN's [Learn web development](https://developer.mozilla.org/en-US/docs/Learn). 123 | 124 | If you don't enjoy it, **you don't have to learn to code.** It isn't for everyone! Most design roles won't expect you to code, but you will have more options and be in more demand when you can. 125 | -------------------------------------------------------------------------------- /content/intro.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Finding Your Path 3 | description: A branching road, every fork offering and adventure. 4 | --- 5 | 6 | There is no "right way" to find your path in the design industry. The world of digital product design is still rapidly evolving and has come a long way, even in the past five years. The exciting part is you are on your way to joining an industry with a tremendous amount of impact on people's day-to-day lives–It's up to you to make it for better and not for worse. 7 | 8 | Together, we'll outline some common paths, roles, and the way they interact. However, never feel like you must follow a path anyone lays out for you. One of the most magical things about design and the digital world is that you can always forge your own way, and there are some exciting corners to find. 9 | 10 | ## Welcome to the tech industry, friends & future coworkers! 11 | 12 | Hey, I'm Nate 👋 13 | 14 | I've been designing apps and websites for the past ten years. 15 | 16 | I'm excited to share this with you all. I excited to help designers new to the industry jump in, level up, and hopefully avoid some of the pitfalls I did early as a designer. 17 | 18 | I've tried to include many things I've learned over the years that I wish I had known when I started designing. 19 | 20 | I built this site so you all can return to it for reference as you begin the first steps of your design journey. 21 | 22 | You can give feedback on anything on this site [using this form](https://forms.gle/jimgp3uAk8df8MUH9), or if you are familiar with Github you can [start a discussion](https://github.com/iamnbutler/design-industry-intro/discussions/new). Feel free to reach out to me over [email](mail-to:iamnbutler@gmail.com) or on [twitter](https://twitter.com/iamnbutler) as well! 23 | -------------------------------------------------------------------------------- /content/portfolio.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Your Portfolio 3 | description: Show the work you want to make. 4 | --- 5 | 6 | Your online portfolio is a window into who you are as a designer, _and the work you want to do._ 7 | 8 | ## Don't over-invest in your website 9 | 10 | Your portfolio doesn't have to be unique or ornate, as long as it acts as an effective vehicle to share your work. 11 | 12 | A common mistake designers just coming out of school make is spending far too much time creating a portfolio with hardly any work in it. 13 | 14 | Try spending no more than a week on your first portfolio, and check in on how you are investing your time by roughly using a 1:4 ratio of time spent building your portfolio to working on projects. 15 | 16 | Your portfolio will be with you for a long time, and you will end up changing it frequently. It's ok to invest time in a portfolio website but only do so once you are **sure** you have at least three strong projects to show. 17 | 18 | Before moving on, read these: 19 | 20 | - [The Case Study Factory](https://essays.uxdesign.cc/case-study-factory/) 21 | - [5 Tips for an Outcome Driven Design Portfolio](https://medium.com/docusign-design/5-tips-for-an-outcome-driven-design-portfolio-d72ed6f51d12) 22 | 23 | ## The Basics 24 | 25 | - Minimum **three** projects. It's far better to have a basic site with strong projects than a beautiful custom site with a few weak projects. 26 | - Have **one** project you can talk about for **30 minutes**. 27 | - What was the problem? 28 | - How did you arrive at the solution you did? 29 | - What did you do, and who else contributed? 30 | - How much better was the solution? 31 | - Showcase your organizational skills, collaboration, and a good design foundation. 32 | - Don't put work in your portfolio that you wouldn't want someone to hire you to make. If you want to be a web designer, don't put two print design projects in your portfolio. 33 | 34 | ## Jumpstart Your Portfolio 35 | 36 | If you are feeling overwhelmed on where to start, below is a guide to get started with the simplest (yet still effective!) portfolio. 37 | 38 | 1. Create a [read.cv](https://read.cv/explore). This can act as both an initial portfolio and an online resume. 39 | 2. [Read this](https://vanschneider.com/blog/portfolio-tips/write-project-case-studies-portfolio/), then write up the projects you have, up to three. 40 | 3. Try to keep each under 750 words (around ~5 minutes of reading.) Have a summary of the project right at the top. 41 | 4. Each time you finish a project, do a quick write-up while it is fresh in your mind. Before long, you will have a ton of work to share when you create a complete portfolio site. 42 | 43 | [Andy Chung's](https://read.cv/andy) cv is a great example to start from. [This project](https://read.cv/andy/X2KMqw0jLQhaeavZHPK5) is around the length you are going for. 44 | -------------------------------------------------------------------------------- /content/resources.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Resources 3 | description: Further reading & useful links. 4 | --- 5 | 6 | ## Further Readings 7 | 8 | Work in progress, more readings and descriptions coming soon! 9 | 10 | ### Readings 11 | 12 | - [Dieter Rams: 10 Principles for Good Design](https://readymag.com/shuffle/dieter-rams/) 13 | - [Finding Ideas](https://medium.com/the-year-of-the-looking-glass/finding-ideas-d9c07ca1a076)– Julie Zhou 14 | - [Why I love ugly, messy interfaces — and you probably do too](https://m.signalvnoise.com/why-i-love-ugly-messy-interfaces-and-you-probably-do-too/) – Jonas Downey 15 | - [5 Tips for an Outcome Driven Design Portfolio](https://medium.com/docusign-design/5-tips-for-an-outcome-driven-design-portfolio-d72ed6f51d12) 16 | 17 | ### Books 18 | 19 | - [Graphic Design: The New Basics](http://thinkingwithtype.com/) – Ellen Lupton and Jennifer Cole Phillips 20 | - [Don't Make Me Think](https://sensible.com/dont-make-me-think/) – Steve Krug 21 | - [The Design of Everyday Things](https://www.amazon.ca/Design-Everyday-Things-Revised-Expanded/dp/0465050654/) – Don Norman 22 | - [Steal like an Artist](https://austinkleon.com/steal/) – Austin Kleon 23 | - [Thinking with Type](http://thinkingwithtype.com/) – Ellen Lupton 24 | 25 | ### Resources 26 | 27 | - [Design Questions Library](https://dlibrary.stanford.edu/questions) - Stanford d.school 28 | - [UX Design Resources & Recommendations](https://nlevin.medium.com/ux-design-recommendations-8de563c5fbfa) – Noah Levin 29 | - [The year of the looking glass](https://medium.com/the-year-of-the-looking-glass) – Julie Zhou 30 | - [Book List](https://www.writethedocs.org/books/) – Write the Docs. A list of books and articles focused on writing, information architecture and content strategy. 31 | - [Open design critiques](https://brianlovin.com/crit>) – Brian Lovin 32 | 33 | ### Example Portfolios 34 | 35 | - [Effy Zhang](http://effyzhang.com) – effyzhang.com 36 | - [Andy Chung](https://read.cv/andy) - read.cv/andy 37 | - [Meagan Fisher Couldwell](https://owltastic.com) - owltastic.com 38 | - [Molly Mielke](https://www.mollymielke.com) - mollymielke.com 39 | - [Cristian Rus](https://www.cristianrus4.me) – cristianrus4.me 40 | - [Janette Council](https://jntt.co) – jntt.co 41 | - [Brian Lovin](https://brianlovin.com) – brianlovin.com 42 | -------------------------------------------------------------------------------- /content/roles.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Roles in Design 3 | description: Find a path that excites & empowers you. 4 | --- 5 | 6 | Before we dive in on what you need to secure your first job in the industry, let's look at the roles that exist for designers and how their day-to-day looks. 7 | 8 | ## Common Design Roles 9 | 10 | While these won't be definitive introductions to each role, they should give you an initial understanding. An excellent way to get a further feel for each role is to look at job postings on places like design job boards and Linkedin. You can also find designers with those titles and look at the types of work they have in their portfolios. 11 | 12 | ### User Experience Design (& User Interface Design) 13 | 14 | A **User Experience** designer is one that, above all, fights to design products that improve people's lives. When a person opens their banking app, and it loads faster and is easier to understand at a glance, or a person can get a car from the airport in a third of the time they were able to before, these are good user experiences. 15 | 16 | A **User Interface** designer focuses specifically on improving those experiences on screen, in the form of rectangles, circles, and more on a screen. They take on the challenge of organizing elements on the screen so that people can understand them without thinking. 17 | 18 | For an evergreen read on designing UI: Steve Krug's [Don't Make Me Think](https://sensible.com/dont-make-me-think/). 19 | 20 | Under UX & UI design, there are a variety of fields and skillsets, including: 21 | 22 | - Interaction design 23 | - User research\* 24 | - Content Design / Content strategy\* 25 | - VR/AR/XR design 26 | 27 | \* As an organization grows, these often become their own roles as well! 28 | 29 | ![A venn diagram of the difference disciplines that interact with User Experience design, such as computer science, interaction design, industrial design, and more.](~/assets/img/ux-disciplines-map.png) 30 | 31 | A birdseye view of the many fields and skills interconnected in user interface & experience design and beyond. From Careerfoundry's ["What is UX Design?"](https://careerfoundry.com/en/blog/ux-design/what-is-user-experience-ux-design-everything-you-need-to-know-to-get-started/). 32 | 33 | Frequently when a role mentions either UX or UI design, the responsibilities of both are assumed. 34 | 35 | Controversially, some UX design roles may not require a designer to have a developed visual design background. 36 | 37 | #### Example projects a UX designer might work on: 38 | 39 | - Designing a new feature, often started by creating a brief in collaboration with a project manager 40 | - Updating a flow that identified in research as problematic 41 | - Conducting user research on an existing product or on conceptual new products or features 42 | 43 | ### Visual Design 44 | 45 | As the name implies, a visual designer focuses on the visual identity of a product. A visual designer will own a product's presentation, brand, "feel." 46 | 47 | They are responsible for creating the emotional connection between a person and a product and ensuring that teams respect the integrity of the visual system through developing and launching features. 48 | 49 | Pure visual design roles are uncommon in the tech industry (with some exceptions, notably [Google](https://design.google/jobs/visual-designer/).) 50 | 51 | #### Do I need visual design if I just want to be a UX designer? 52 | 53 | Technically, to be hired at some companies, no. However, in my experience, almost universally, more rounded designers create vastly better work and succeed more in their roles. 54 | 55 | When developing your skills, you should try to balance visual presentation with user experience, always coming from a place of empathy for the people you are designing for. 56 | 57 | Visual design without consideration for usability can lead to design that looks great, but severely lacks in function. Related reading: [The Dribbblisation of Design](https://www.intercom.com/blog/the-dribbblisation-of-design/) (an older but classic reading.) 58 | 59 | #### Example projects a visual designer might work on: 60 | 61 | - Launching a new visual identity for your company 62 | - Working with systems designers to create or evolve a design system 63 | - Partner with a UX designer on a feature or specific interface 64 | - Work on additional projects beyond digital ones (visual work for events, social media, communication design.) 65 | 66 | ### UX Research 67 | 68 | Research is an integral part of every product development cycle. Its form will vary based on the size of the company or team and other factors. 69 | 70 | Often at smaller companies and startups, a designer takes on the role of user research to obtain essential insights while designing a product. If you enjoy this part of the design process the most, you might consider becoming a full-time UX researcher. You might even consider data science if your interest skews towards qualitative over quantitative research. 71 | 72 | **Note:** Some user or UX research roles may require a bachelor's or PhD in a relevant field such as computer science, analytics, or psychology–especially at large companies that publish their research formally (like Apple, Microsoft, Google, etc.) 73 | 74 | ### Product Design 75 | 76 | Product design is a catch-all term used in the industry for a designer 77 | who covers all roles needed to build a digital product (app, mobile 78 | app, website.) It combines the functions of UX and visual design with 79 | an understanding of how to ship a 0-1 product (from idea to launch). 80 | 81 | #### How are UI, UX, and Product Design different? 82 | 83 | The term Product Design implies a more extensive set of skills beyond that of UX design: 84 | 85 | - A solid visual design foundation. 86 | - An understanding of how products are built (not just designed). 87 | - A seat at the table when it comes to designing and directing the team. 88 | 89 | However, unfortunately, these terms are often used interchangeably in job postings and by many people and companies. Be sure to look at the responsibilities expected of a role to understand what you will own. 90 | 91 | #### Example projects a product designer might work on: 92 | 93 | - Most projects a UX designer or visual designer might work on 94 | - Identifying a new product opportunity and designing a deck or prototype showcasing it in concept. 95 | - Taking part in (or running) a design sprint to explore new ideas 96 | - Helping design a team or organization at your company (critique culture, team organization, etc.) 97 | 98 | ## Senior Design Roles 99 | 100 | ### Design Management 101 | 102 | Many designers choose to pursue a role in design management after leveling their craft for quite a few years. Design Managers should enable the success of their designers and fight for their seat at the table in all discussions and decisions. 103 | 104 | Design managers should expect to be hands-off on actual product work, creating space for the designers they manage to have opportunities to grow. 105 | 106 | ### Staff/Director-level Design 107 | 108 | Becoming a manager isn't the only track for a high-level designer continuing to level up their career. Brian Lovin's [staff.design](https://staff.design/) project is a great place to learn more about staff-level designers and how they contribute to their organizations. 109 | 110 | ### Systems Design 111 | 112 | Design Systems, and systems designers, are all the rage right now in 113 | the design industry. It's tempting to jump feet first into design 114 | systems, even at the beginning of a project. But there are a few 115 | things to know about design systems: 116 | 117 | 1. **Don't confuse a component library, or style guide, with a design system.** You can get the benefit of consistent color, typography & components from a simple library of components. Trying to move your product into a design system too soon can cut into creativity and add unnecessary overhead. [Read more](https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/) 118 | 2. **Design systems harmonize an array of products across a system.** If you are creating a website with only a few pages or an app with only a few primary features, a design system is often overkill. Once multiple teams work on different projects in parallel, it might be time to consider a system. 119 | 3. **Systems design is one of the most complex roles you can take on as a designer.** Even very experienced designers often struggle while launching design systems teams. They require high-level fundamentals, negotiation with other designers and teams, company backing to encourage compliance, and a vast amount of time to consider cases and build standards. 120 | 121 | ## Other Design Roles 122 | 123 | - Brand Design, Icon Design, Accessibility Design, Type Design, etc 124 | - Specializations inside a single field (UX designer -> prototyper or systems designer, visual designer -> brand designer) 125 | - [Design Operations](https://www.nngroup.com/articles/design-operations-101/) 126 | 127 | ## Tangential Roles 128 | 129 | These all require going deep on a skill I would consider outside of (but often valuable for!) a designer's core skill set. 130 | 131 | ### Project Manager 132 | 133 | Plan and document new ideas, and help organize a team around building them. Your responsibility as a product manager is to keep a team engaged and on time, as well as triage any conflicts your team might encounter. 134 | 135 | Designers can become great product managers because, initially, these roles can seem to be at odds. Time and craft often rub against each other but producing a good product takes both. In the product manager role, you have the chance to argue from both sides, helping everyone on the team understand the value of both high-level execution and moving quickly. 136 | 137 | ### Prototyper 138 | 139 | Focus on building complex or detailed prototypes for other designers and teams. Prototypers may use a visual design tool like Figma or Origami Studio, an animation tool like After Effects, or even build prototypes in code. 140 | 141 | ### Design Engineer/Developer 142 | 143 | Like building your own designs? Some designers choose to learn the tools they need to build anything they design. These tools could range from learning a [web stack](https://www.thirdrocktechkno.com/blog/how-to-choose-a-technology-stack-for-web-application-development/) to learning a language to build mobile apps like [Swift](https://developer.apple.com/swift/) or [React Native](https://reactnative.dev/). 144 | -------------------------------------------------------------------------------- /content/talk.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Talk about your work 3 | description: Tell a story that people want to hear. 4 | --- 5 | 6 | Now that you have a portfolio, it's time to talk about your work. 7 | 8 | Whether interviewing, writing an article, or revising your project write-ups, knowing how to talk about your work is vital for a designer. 9 | 10 | - [How to give a great product design portfolio presentation](https://brianlovin.com/writing/how-to-give-a-great-product-design-portfolio-presentation) – Brian Lovin 11 | - [Three ways to more effectively present your designs](https://uxdesign.cc/three-ways-to-more-effectively-present-your-designs-cef559c3461f) – Tanner Christensen 12 | -------------------------------------------------------------------------------- /content/work.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Have work to show 3 | --- 4 | 5 | ## Develop your projects further 6 | 7 | It is ok (and encouraged!) to expand on the projects you do in school. Consider using what you did for your class as an outline, and work through your favorite project again in your personal time, armed with all the knowledge of what went well and what didn't the first time. 8 | 9 | ## Make something new 10 | 11 | When you start working on projects for your portfolio (or even just for yourself), think about if you would rather invest your time in updating a project you have already started, or making something new. Julie talks about how to find meaningful projects to work in in her aptly named [Finding Ideas](https://medium.com/the-year-of-the-looking-glass/finding-ideas-d9c07ca1a076). 12 | 13 | If you find dreading updating a project you've already worked on, consider what excites you at the moment and create something around that. 14 | 15 | ### Don't use placeholder content in your designs 16 | 17 | Lorem ipsum and real content have a vastly different feel, and people will notice this. When you use real content (text, images, profile photos and more) you will often find that it behaves differently than placeholder content like lorem ipsum or example avatar libraries. 18 | 19 | When I'm designing screens, I write content for any words on the page (it doesn't have to be really good!) 20 | 21 | If you need content for a long passage, try using open content found online or text from a copyright free book. 22 | 23 | ## Show, don't tell 24 | 25 | Creating a visual or small animation showing an idea is better than writing a few paragraphs about it. If you have an idea about a cool new way to transfer photos between phones, such as making an animation or even filming a video. Showcase your idea rather than explaining it in words. 26 | 27 | ## A long write-up doesn't equal a better project 28 | 29 | Think about if you can get more value out of spending your time improving the work over writing a lengthy case study about it. 30 | 31 | Pro tip: Most interviewers will only read through a project for a minute or two! 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "dev": "next", 5 | "dev:watch": "next-remote-watch ./content ", 6 | "build": "next build", 7 | "start": "next start", 8 | "format": "prettier --write ." 9 | }, 10 | "dependencies": { 11 | "@heroicons/react": "^1.0.6", 12 | "@tailwindcss/typography": "^0.5.2", 13 | "autoprefixer": "^10.4.7", 14 | "gray-matter": "^4.0.2", 15 | "next": "latest", 16 | "next-mdx-remote": "^3.0.1", 17 | "next-remote-watch": "1.0.0", 18 | "postcss": "^8.4.14", 19 | "prettier": "^2.6.2", 20 | "react": "^17.0.2", 21 | "react-dom": "^17.0.2", 22 | "rehype-slug": "^5.0.1", 23 | "rehype-slug-custom-id": "^1.1.0", 24 | "remark-gfm": "^3.0.1", 25 | "remark-toc": "^8.0.1", 26 | "tailwindcss": "^3.0.24" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import "../styles/globals.css"; 2 | 3 | function MyApp({ Component, pageProps }) { 4 | return ; 5 | } 6 | export default MyApp; 7 | -------------------------------------------------------------------------------- /pages/_document.jsx: -------------------------------------------------------------------------------- 1 | import Document, { Head, Html, Main, NextScript } from "next/document"; 2 | 3 | class MyDocument extends Document { 4 | render() { 5 | return ( 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | ); 14 | } 15 | } 16 | 17 | export default MyDocument; 18 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import fs from "fs"; 2 | import matter from "gray-matter"; 3 | import path from "path"; 4 | import Layout from "../components/Layout"; 5 | import PageProse from "../components/PageProse"; 6 | import { POSTS_PATH, postFilePaths } from "../utils/mdxUtils"; 7 | 8 | export default function Index() { 9 | return ( 10 | 11 | 12 |

13 | There is no "right way" to find your path in the industry. The world 14 | of digital product design is still rapidly evolving and has come a 15 | long way, even in the past five years. 16 |

17 |

18 | The exciting part is you are on your way to joining an industry with a 19 | tremendous amount of impact on people's day-to-day lives–It's up to 20 | you to make it for better and not for worse. 21 |

22 |

Finding Your Path

23 |

24 | Together, we'll outline some common paths, roles, and the way they 25 | interact. However, never feel like you must follow a path anyone lays 26 | out for you. One of the most magical things about design and the 27 | digital world is that you can always forge your own way, and there are 28 | some exciting corners to find. 29 |

30 |

31 |

32 | You can give feedback on anything on this site{" "} 33 | using this form, 34 | or if you are familiar with Github you can{" "} 35 | 36 | start a discussion 37 | 38 | . Feel free to reach out to me over{" "} 39 | email or on{" "} 40 | twitter as well! 41 |

42 |

43 | 44 | 45 | ); 46 | } 47 | 48 | export function getStaticProps() { 49 | const posts = postFilePaths.map((filePath) => { 50 | const source = fs.readFileSync(path.join(POSTS_PATH, filePath)); 51 | const { content, data } = matter(source); 52 | 53 | return { 54 | content, 55 | data, 56 | filePath, 57 | }; 58 | }); 59 | 60 | return { props: { posts } }; 61 | } 62 | -------------------------------------------------------------------------------- /pages/posts/[slug].jsx: -------------------------------------------------------------------------------- 1 | import fs from "fs"; 2 | import matter from "gray-matter"; 3 | import { MDXRemote } from "next-mdx-remote"; 4 | import { serialize } from "next-mdx-remote/serialize"; 5 | import Head from "next/head"; 6 | import path from "path"; 7 | import slug from "rehype-slug"; 8 | import remarkGfm from "remark-gfm"; 9 | import remarkToc from "remark-toc"; 10 | import Layout from "../../components/Layout"; 11 | import PageProse from "../../components/PageProse"; 12 | import Quote from "../../components/Quote"; 13 | import { POSTS_PATH, postFilePaths } from "../../utils/mdxUtils"; 14 | 15 | const components = { 16 | Head, 17 | Quote, 18 | }; 19 | 20 | export const getStaticProps = async ({ params }) => { 21 | const postFilePath = path.join(POSTS_PATH, `${params.slug}.mdx`); 22 | const source = fs.readFileSync(postFilePath); 23 | 24 | const { content, data } = matter(source); 25 | 26 | const mdxSource = await serialize(content, { 27 | // Optionally pass remark/rehype plugins 28 | mdxOptions: { 29 | remarkPlugins: [remarkToc, remarkGfm], 30 | rehypePlugins: [slug], 31 | }, 32 | scope: data, 33 | }); 34 | 35 | return { 36 | props: { 37 | source: mdxSource, 38 | frontMatter: data, 39 | }, 40 | }; 41 | }; 42 | 43 | export const getStaticPaths = async () => { 44 | const paths = postFilePaths 45 | // Remove file extensions for page paths 46 | .map((path) => path.replace(/\.mdx?$/, "")) 47 | // Map the path into the static paths object required by Next.js 48 | .map((slug) => ({ params: { slug } })); 49 | 50 | return { 51 | paths, 52 | fallback: false, 53 | }; 54 | }; 55 | 56 | export default function PostPage({ source, frontMatter }) { 57 | const title = frontMatter.title; 58 | const description = frontMatter.description; 59 | 60 | return ( 61 | 62 | 63 | 64 | 65 | 66 | ); 67 | } 68 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /styles/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;1,700&display=swap"); 6 | 7 | @layer base { 8 | h1, 9 | h2 { 10 | font-family: "Lora", serif; 11 | } 12 | } 13 | 14 | :root { 15 | --background: #191724; 16 | --scrollbarBG: transparent; 17 | } 18 | 19 | html { 20 | font-family: "Inter", sans-serif; 21 | } 22 | 23 | @supports (font-variation-settings: normal) { 24 | html { 25 | font-family: "Inter var", sans-serif; 26 | } 27 | } 28 | 29 | body { 30 | scrollbar-gutter: stable; 31 | background-color: var(--background); 32 | text-rendering: optimizeLegibility; 33 | text-rendering: geometricPrecision !important; 34 | -webkit-font-smoothing: antialiased !important; 35 | text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.005); 36 | } 37 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | // Provide 16 hex values from a base16 theme to update the system's theme 2 | // Some examples of base16 themes here: https://github.com/chriskempson/base16 3 | 4 | const theme = { 5 | base00: "#1E2025", 6 | base01: "#23262E", 7 | base02: "#292E38", 8 | base03: "#2E323C", 9 | base04: "#ACA8AE", 10 | base05: "#CBC9CF", 11 | base06: "#E1DDE4", 12 | base07: "#F7F7F8", 13 | base08: "#F92672", 14 | base09: "#F39C12", 15 | base0A: "#FFE66D", 16 | base0B: "#96E072", 17 | base0C: "#00E8C6", 18 | base0D: "#0CA793", 19 | base0E: "#8A3FA6", 20 | base0F: "#C74DED", 21 | }; 22 | 23 | // Utilities from tailwind typography's default config 24 | // source: https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js 25 | 26 | const round = (num) => 27 | num 28 | .toFixed(7) 29 | .replace(/(\.[0-9]+?)0+$/, "$1") 30 | .replace(/\.0$/, ""); 31 | const rem = (px) => `${round(px / 16)}rem`; 32 | const em = (px, base) => `${round(px / base)}em`; 33 | 34 | module.exports = { 35 | content: [ 36 | "./components/**/*.{js,ts,jsx,tsx,md,mdx}", 37 | "./pages/**/*.{js,ts,jsx,tsx,md,mdx}", 38 | "./utils/**/*.{js,ts,jsx,tsx,md,mdx}", 39 | ], 40 | theme: { 41 | fontFamily: { 42 | serif: ["Lora", "ui-serif", "serif"], 43 | }, 44 | extend: { 45 | colors: theme, 46 | }, 47 | typography: { 48 | DEFAULT: { 49 | css: { 50 | color: theme.base07, 51 | fontSize: rem(20), 52 | lineHeight: round(28 / 16), 53 | // Links 54 | a: { 55 | color: theme.base0B, 56 | "&:hover": { 57 | color: theme.base08, 58 | }, 59 | textDecoration: "underline", 60 | fontWeight: "500", 61 | }, 62 | // Headlines 63 | h1: { 64 | color: theme.base07, 65 | fontSize: rem(32), 66 | marginTop: em(36, 20), 67 | marginBottom: em(12, 20), 68 | fontWeight: "800", 69 | }, 70 | h2: { 71 | color: theme.base0D, 72 | fontSize: rem(24), 73 | fontWeight: "700", 74 | marginTop: em(36, 20), 75 | marginBottom: em(12, 20), 76 | }, 77 | h3: { 78 | color: theme.base0D, 79 | fontSize: rem(20), 80 | fontWeight: "700", 81 | marginTop: em(36, 20), 82 | marginBottom: em(12, 20), 83 | }, 84 | h4: { 85 | marginTop: em(36, 20), 86 | marginBottom: em(12, 20), 87 | lineHeight: round(32 / 20), 88 | color: theme.base0C, 89 | fontWeight: "700", 90 | }, 91 | "h2 + *": { 92 | marginTop: "0", 93 | }, 94 | "h3 + *": { 95 | marginTop: "0", 96 | }, 97 | "h4 + *": { 98 | marginTop: "0", 99 | }, 100 | // Body 101 | p: { 102 | marginTop: em(16, 14), 103 | marginBottom: em(16, 14), 104 | fontSize: rem(20), 105 | }, 106 | // Blockquotes 107 | blockquote: { 108 | marginTop: em(16, 14), 109 | marginBottom: em(16, 14), 110 | backgroundColor: theme.base01, 111 | paddingTop: 1, 112 | paddingRight: 16, 113 | paddingBottom: 1, 114 | paddingLeft: 16, 115 | borderRadius: rem(4), 116 | }, 117 | // Lists 118 | ol: { 119 | marginTop: em(20, 16), 120 | marginBottom: em(20, 16), 121 | paddingLeft: em(20, 16), 122 | listStyleType: "decimal", 123 | }, 124 | ul: { 125 | marginTop: em(20, 16), 126 | marginBottom: em(20, 16), 127 | paddingLeft: em(20, 16), 128 | listStyleType: "disc", 129 | }, 130 | li: { 131 | marginTop: em(8, 16), 132 | marginBottom: em(8, 16), 133 | }, 134 | 'ol[type="A"]': { 135 | listStyleType: "upper-alpha", 136 | }, 137 | 'ol[type="a"]': { 138 | listStyleType: "lower-alpha", 139 | }, 140 | 'ol[type="A" s]': { 141 | listStyleType: "upper-alpha", 142 | }, 143 | 'ol[type="a" s]': { 144 | listStyleType: "lower-alpha", 145 | }, 146 | 'ol[type="I"]': { 147 | listStyleType: "upper-roman", 148 | }, 149 | 'ol[type="i"]': { 150 | listStyleType: "lower-roman", 151 | }, 152 | 'ol[type="I" s]': { 153 | listStyleType: "upper-roman", 154 | }, 155 | 'ol[type="i" s]': { 156 | listStyleType: "lower-roman", 157 | }, 158 | 'ol[type="1"]': { 159 | listStyleType: "decimal", 160 | }, 161 | // Nested lists 162 | "ol > li": { 163 | paddingLeft: em(6, 14), 164 | }, 165 | "ul > li": { 166 | paddingLeft: em(6, 14), 167 | }, 168 | "> ul > li p": { 169 | marginTop: em(8, 14), 170 | marginBottom: em(8, 14), 171 | }, 172 | "> ul > li > *:first-child": { 173 | marginTop: em(16, 14), 174 | }, 175 | "> ul > li > *:last-child": { 176 | marginBottom: em(16, 14), 177 | }, 178 | "> ol > li > *:first-child": { 179 | marginTop: em(16, 14), 180 | }, 181 | "> ol > li > *:last-child": { 182 | marginBottom: em(16, 14), 183 | }, 184 | "ul ul, ul ol, ol ul, ol ol": { 185 | marginTop: em(8, 14), 186 | marginBottom: em(8, 14), 187 | }, 188 | // Dividers 189 | hr: { 190 | borderColor: theme.base03, 191 | marginTop: em(48, 16), 192 | marginBottom: em(48, 16), 193 | }, 194 | "hr + *": { 195 | marginTop: "0", 196 | }, 197 | }, 198 | }, 199 | }, 200 | }, 201 | plugins: [require("@tailwindcss/typography")], 202 | }; 203 | -------------------------------------------------------------------------------- /theme/theme.js: -------------------------------------------------------------------------------- 1 | // Provide 16 hex values from a base16 theme to update the system's theme 2 | // Some examples of base16 themes here: https://github.com/chriskempson/base16 3 | 4 | const base16Theme = [ 5 | "#191724", 6 | "#1f1d2e", 7 | "#26233a", 8 | "#555169", 9 | "#6e6a86", 10 | "#e0def4", 11 | "#f0f0f3", 12 | "#c5c3ce", 13 | "#e2e1e7", 14 | "#eb6f92", 15 | "#f6c177", 16 | "#ebbcba", 17 | "#31748f", 18 | "#9ccfd8", 19 | "#c4a7e7", 20 | "#e5e5e5", 21 | ]; 22 | 23 | const theme = { 24 | base00: base16Theme[0], 25 | base01: base16Theme[1], 26 | base02: base16Theme[2], 27 | base03: base16Theme[3], 28 | base04: base16Theme[4], 29 | base05: base16Theme[5], 30 | base06: base16Theme[6], 31 | base07: base16Theme[7], 32 | base08: base16Theme[8], 33 | base09: base16Theme[9], 34 | base0A: base16Theme[10], 35 | base0B: base16Theme[11], 36 | base0C: base16Theme[12], 37 | base0D: base16Theme[13], 38 | base0E: base16Theme[14], 39 | base0F: base16Theme[15], 40 | }; 41 | -------------------------------------------------------------------------------- /utils/mdxUtils.js: -------------------------------------------------------------------------------- 1 | import fs from "fs"; 2 | import path from "path"; 3 | 4 | // POSTS_PATH is useful when you want to get the path to a specific file 5 | export const POSTS_PATH = path.join(process.cwd(), "content"); 6 | 7 | // postFilePaths is the list of all mdx files inside the POSTS_PATH directory 8 | export const postFilePaths = fs 9 | .readdirSync(POSTS_PATH) 10 | // Only include md(x) files 11 | .filter((path) => /\.mdx?$/.test(path)); 12 | --------------------------------------------------------------------------------