The purpose of this UI is to make it easy to manage every aspect of being an author on DesignRant. You can see, track and edit your blog posts aswell as manage your author profile.
We all try to remain positive people but occassionally we need to complain. This site is a place to vent about some of the user interfaces and experiences that drive us all insane.
I ‘d like to point out that while we can be quite negative here, we also think that there are plenty of examples out there where people have built awesome, friendly and beautiful user interfaces. Perhaps in the future we will build a site dedicated to these too.
DesignRant puts the Authors first. DesignRant has no ads or sponsors so we cannot pay you for your content, but we can help you get exposure. We actively encourage cross posting as we understand your reach is important.
Each writer has a dedicated page that is linked to wherever your content is. The author page is for you, the link to your personal site and your sponsorship pages are the only primary call to actions. We currently have support for your twitter handle, personal site link, ko-fi and buymeacoffee with more coming soon. We are also open to suggestions on what we should add to author profiles.
The whole site is built using our favourite react framework - Gatsby! If you haven't heard of it, you should check it out here: Learn Gatsby
We encourage contributions from any individual, whether your'e a student, working in UX or are just passionate about the subject. In order to keep the posts "short & sharp" there is a limit of 1000 words per post. Please ensure you come in under that amount when contributing.
Yes, you can fork this repo. Please give us proper credit by linking back to designrant.app. Thanks!
If you have questions about implementation, please refer to the Gatsby docs.
-
Install the Gatsby CLI
npm install -g gatsby-cli
-
Install and use the correct version of Node using NVM
nvm install
-
Install dependencies
npm install
-
Start the development server
npm start
-
Generate a full static production build
npm run build
-
Preview the site as it will appear once deployed
npm run serve
| Color | Light Mode Hex | Dark Mode Hex |
|---|---|---|
| White | #ffffff |
#1c1c1c |
| Black | #000000 |
#ffffff |
| Grey | #2e4052 |
#f9f9f9 |
| Light Grey | #f9f9f9 |
#121212 |