Acci's Blog
Project Overview
Outline
Behind The Project
I wanted to make a blog website that could be a way to archive and post my experiences that aren’t tied to a specific social media website.
I used to venture around in different social media apps and websites to post my experiences. But the main issue that I often experience is that social media landscapes are very vulnerable to change, sometimes with factors I have no control over. I want to get the personal experience of creating fun posts back again, especially a place where I’m not restricted by certain types of formats.
One of the biggest places I used to post in was the Amino app, which eventually got shut down in late 2025. All of the posts and wiki pages I built over the years are completely gone, and I realized I need a more permanent home I can keep my content on.
I used to fragment my creative posts across multiple social media apps (Tumblr, Amino, Instagram). The challenge became clear when Amino shut down, erasing years of my work. I realized I had no control over these third-party platforms.
This experience defined the core design principle for this project: which is permanent ownership over my content. The blog needed to be a stable, self-contained archive where format and longevity are guaranteed, not subject to external changes.
Research
Competitive Analysis
I analyzed platforms I used as both a creator and consumer to understand what enables vs. hinders long-form sharing.
| Platform | Strengths | Weaknesses |
|---|---|---|
| Tumblr | Flexible post formats (text, image, video). | Cluttered dashboard. Lack of ownership. |
| Visually compelling grid for art. Strong community. | Rigid format (square aspect). Algorithm-driven feed. Poor for long text. | |
| bearblog.dev | Minimalist, focused reading experience. Emphasis on content. | Too sparse for visual/media-heavy content. |
No existing platform combined format flexibility (like Tumblr), visual showcase (like Instagram), and content minimalism (like static blogs). My project needed to contain all of these features.
The Site Architecture
Based on my competitive analysis and an audit of my own content/needs, I defined the core pages for the blog. Each page serves a specific user goal and content type, moving beyond a standard blog template to create a tailored, multi-format archive.
| Section | Goal | Rationale |
|---|---|---|
| Home | Serve as the primary landing page that sets expectations and offers immediate, scannable access to the newest content. | Rather than a static “splash” page, the home page functions as a dynamic list of my most recent posts. It combines a preview of the latest posts with clear navigation to all major sections, giving first-time visitors a complete snapshot of the blog’s scope. |
| About | Build trust and connection by introducing the author. | A personal blog’s credibility is tied to its creator. This page provides necessary background, frames the blog’s purpose, and fulfills a common user expectation for an “About” section. |
| Posts | Provide a dedicated, paginated space for deep exploration of all written content. | An endless scroll can be overwhelming for a content-rich archive. Pagination was chosen to create manageable segments for the user and improve page loading performance. |
| Gallery + Videos | Create dedicated visual and video content sections. | As a core motivator for the project, art and video needed dedicated spaces, not just as posts in a list. Separating them into specialized galleries respects each medium’s unique context and allows users to enter a specific “viewing mode.” This maintains consistency with the posts archive while acknowledging different consumption patterns. |
| Tags | Enable topical, interest-based exploration as an option for users searching posts. | Inspired by platforms like Tumblr, a robust tagging system directly serves users who come with specific interests (ex: “3D art,” “project tutorials”). It transforms the blog from a linear diary into a navigable library of topics. |
| Inbox | Create an open, informal channel for user contact and submission. | Moving beyond the formality of email, a public inbox (inspired by Tumblr) lowers the barrier for interaction. It aligns with the goal of a “comfortable” community space by making communication feel more casual and integrated into the blog experience itself. |
This content structure becomes more than a list of pages, and is a strategy that organizes mixed media (text, images, video) into intuitive hubs while providing multiple pathways for discovery and engagement.
Design Process
Wireframes
With the content structure defined, I moved into low-fidelity wireframes to translate the page list into concrete layouts. My goal was to establish a clear information hierarchy and interaction patterns for each key screen.
Guiding Principle: “Simple and Easy-To-Read”
For a personal archive, any unneeded complexity would not create good maintenance and clarity. I approached wireframing directing towards more minimal, functional layouts that could be intuitively understood at a glance. Rather than exploring dozens of complex concepts, I focused on refining a single, strong direction that met all of the core requirements.
Main Wireframes and Rationale:
Home and Posts Archive: The primary challenge for the Home and Posts archive was presenting a diverse mix of content. This included long-form text, artwork, and videos in a single feed without creating visual noise or confusion. My solution was a unified, reverse-chronological list (most recent to earliest post). Each entry is standardized with clear metadata such as title, date, and tags. This approach worked because it prioritized easy readability and familiarity. The simple, linear format provides visual consistency across all post types, avoiding the cognitive load of a complex card system or masonry grid. It allows users to quickly understand what’s available and dive into what interests them, making the archive feel approachable and easy to navigate.
Individual Post Page: For the individual post pages, the goal was to design an immersive, distraction-free environment that can compliment the long-form reading and viewing. The core challenge was minimizing the interface to keep the user’s attention locked on the content, while also being flexible to different post types (such as adding images and videos on top of text). I employed a classic, content-centric editorial layout, which puts the content in a strict column for body text. This pattern succeeded because it creates a well-established mental model, as users intuitively know how to engage with it. By intentionally not reinventing a fundamental reading layout, I ensured that the user’s mental energy is spent on absorbing the post itself, not on learning a new interface.
Gallery and Video Pages: The Gallery and Video pages presented a specific challenge, which is that it needed to showcase visual media in a format works for casual browsing, while remaining clearly part of the same site ecosystem. The solution was a clean, uniform grid system for the gallery page. Each piece of media is represented by a thumbnail, with details like the title shown above on each video. This design worked because the grid provides a predictable browsing experience that encourages exploration. By hiding descriptive text until interaction, the initial view remains stunningly visual and uncluttered, forcing the focus to remain on the artwork or video. This creates a deliberate “viewing mode” that feels distinct from the text-focused posts page.
This wireframing phase was less about dramatic exploration and more about validation. The initial, simple concepts held up under scrutiny against the project requirements. They successfully supported the defined user flows (browsing, reading, viewing) and provided a solid, scalable foundation. This allowed me to move confidently into visual design and prototyping, knowing the underlying layout had a good structure to start with.
The Visual Language
With the user flows defined, I developed a visual system tailored for engagement with technical and artistic content. Every aesthetic choice was guided by the principles of reduced cognitive load, accessibility, and brand personality.
Typography
The blog would feature long-form technical writing and code snippets. The typeface needed to facilitate extended reading sessions common in developer environments.
I selected a single, high-quality monospaced font family (e.g., JetBrains Mono, IBM Plex Mono) for all text. The main reasons I chose this typeface are as follows:
- Cognitive Alignment: Monospaced fonts are typically associated with code editors (IDEs) and technical documentation, creating a familiar, trusted reading environment for the target content.
- Enhanced Readability: The consistent character width and spacing emphasize a more deliberate, linear pace that reduces errors when scanning a large quantity of text.
- Visual Simplicity: Using one typeface eliminated the complexity of managing multiple type hierarchies, ensuring a clean, unified, and less visually fatiguing interface.
Color System
The main goal with choosing these colors was to prioritize user comfort and long-term readability. This was done mainly by committing to a dark theme from the start of creating this design.
A deep, desaturated navy blue was used for the primary background. This color promotes a sense of calm, stability, and trust while providing a high-contrast, low-light canvas that reduces eye strain in typical viewing environments.
For the main text, I chose an off-white color for optimal contrast without the harsh glare of pure white on a dark background.
A carefully chosen pink serves as the sole vibrant accent. This was used sparingly for interactive elements (links and hover states) to provide clear visual direction without overwhelming the eyes. This pink introduces femininity, softness, and creative energy, personalizing the stable blue foundation and creating a memorable brand signature that is uniquely mine.
All colors, except the accent pink, were intentionally slightly desaturated. This prevents visual vibration and strain, a common issue in dark themes where overly bright colors can “bloom” on dark backgrounds.
The Result
This visual system results in an interface that is held back so there is much more emphasis on the content. The dark blue canvas feels like a calm night sky, the monospaced text provides simple but direct clarity, and the subtle pink accents offer moments of warmth and brand identity. The design is not just “dark mode”, but an environment built for comfort and focus with subtle personal branding.
Prototype
Unlike a static Figma prototype, I built a live, functional website in React to serve as my primary design and testing environment. This allowed me to validate interactions, performance, and the real “feel” of the design in real-time. It also would be easier to launch as a real website by the time I finished iterations of my designs.
I coded the core layout from scratch, but experimented with libraries like Framer Motion to add subtle, purposeful animations (ex: smooth image loading in the gallery, gentle transitions between pages). This experimentation was guided by the goal of enhancing the reading experience without extra distractions. A micro-interaction on a button provided simple and satisfying feedback, and a page transition maintained context without feeling sluggish.
Earlier I built a fully functional comments system (using a component library for the UI and a database schema) anticipating community interaction. After deploying the site and using it as my primary blogging tool for three months, analytics from bunny.net and Cloudflare (the domain I hosted my website on) showed zero use of the comments feature. The blog was functioning perfectly as a personal archive, not a social hub. Because of this, I removed the entire comments module. This decision, driven by data from the live prototype, simplified the codebase, improved page load times, and refocused the UI on core content.
This process proved that the most honest usability test is often building and using your own product. It validated the core vision of a personal archive and demonstrated my ability to make data-driven decisions about feature inclusion, even when it meant removing work I had done.
Reflection
This was my first huge solo project covering the entirety of planning, design, and development. The process wasn’t entirely smooth, but it taught me the real value of a structured UX workflow. Moving between design and code showed me how each phase builds on the last to make better decisions.
Building the site myself changed how I think as a designer. Knowing what’s actually possible with code helped me create designs that are both thoughtful and practical, and can be helpful in the future if I were to collaborate with developers as a designer. I learned that no prototype can feel practical until it is built, and technical understanding makes you a stronger designer.
In the end, I learned to let the project’s needs guide the design, not just my assumptions. Removing features like comments after seeing real usage was a lesson in focusing on what truly matters. This experience taught me to embrace the entire process (from planning, designing, to building) as one connected journey.(from planning, designing, to building) as one connected journey.