Planning
Decide on Architecture
If you already have an architecture in mind, jump to Plan the UI
If it is just a web app to be built, consider the below Front End, Back End and Database Architecture options. If it also needs to be a mobile app, consider the below Mobile Architecture options.
- Ask AI to recommend an architecture with justification - see the Obsidian note on AI Prompts here
- Review the below architecture considerations against the AI output and verify it makes sense
Front End Architecture
- Considerations:
- Single page application or not?
- SSR (Server side rendering) or SSG (Static site generation) required?
- Options:
- CRA (Create React App)
- Vite.js
- Next.js
- Recommendations (from Robin Wieruch):
- Vite.js for client-side rendered React applications
- Next.js server-side rendered React applications
- Astro for static-side generated React applications
Back End Architecture
- Considerations:
- Need to investigate
- Backend development is more than writing endpoints for frontend
- Options:
- ExpressJS
- NodeJS
Database
- Considerations:
- Should it be SQL or non SQL?
- How am I going to query my database? Via a client? By the CLI?
- Consider TypeORM or Prisma for type safe access to your database
- Options:
- Sequel DBs:
- Xata
- MySQL
- Postgress (recommended)
- No Sequel DBs:
- Firebase
- MongoDB
- PlanetScale
- Supebase
- Sequel DBs:
References
Hosting
- Considerations:
- How much will hosting the site cost?
- What features does the hosting provide?
- What access protection does the hosting service offer for limiting access to your app or database?
- Options:
- Netlify (free)
- Vercel
- Heroku (cheap)
- DigitalOcean (cheap)
- Amazon RDS (expensive)
- BlueHost (basic)
Mobile Architecture
Plan the UI
Inspiration
For inspiration for projects, check out the following resources:
- Design Tools
- Design Inspiration Sources
Colour Selection
-
5 Colour Tips to enhance your UI Design
- Understand brand colours
- Understand the mood of the app/design
- Use colour palette generators - Coolors
- Alternatively, use colour theory using a colour wheel - Adobe Colour Wheel
- Use the 60-30-10 rule
- Alternative Colour Palette Generators
- Dark Mode Design Guide - Dark Mode UI Design - Organizing Color Variables and Naming
Fonts
- Font Selection
Design Guides
- Dos and Don'ts for UI Design - 4 parts
- 6 Things UI/UX Designers Forget to Design
- UI/UX Micro Tips Best of 2022
- Improve your UI with these successful UX Laws