A Curated List of Design Inspiration Resources.
This site was built for a digital and brand designer that wanted a site to record and catalog design inspiration resources that they used or would like to reference in their future work. This was built for the benefit of both the designer themselves as a place to search for inspiration in the future, as well as a place for other designers to come to if they needed inspiration.
The mobile and desktop designs for this site shared a lot of common state, but the structure of the UIs was completely different. Instead of having a single component tree for both mobile and desktop where components would contain a lot of conditonal rendering logic and media queries, I decided to split the rendering tree into two parts after the component that contained state that was needed by both the mobile and the desktop UIs.
This resulted in the codebase being a lot easier to manage, as when I was working on either the desktop or mobile component trees, I didn't have to read through code that wasn't related to the task at hand at all.
Read the following issue if you want more details on this: #3
Download dependencies:
yarnStart development server:
yarn devBuild production files:
yarn build- React
- TypeScript
- Gatsby
- styled-components
- Jest
- Contentful
WebP is currently supported in the latest versions of Chrome and Firefox. This test was performed with 24 items loaded (requires scrolling down the list as the images are lazy loaded). The below numbers are gzipped.
- Before - 1.2MB
- After - 740KB
This shows a roughly 40% reduction in total payload size. This reduction size does also not take into account that the JS and HTML bundles are basically the same size both before and after using conditional WebP formatting.