Hello world

This is Manasi starting my immersive web design class.

Vampire's nest

https://lupinus.neocities.org/

Immersive Web Design day 1

First day at class and I was finally excited about making websites. 'nuff said.

But, no. We don't leave things up for interpretation in this day and age. We write, put our stuff out and let the audience in on our thought processes behind the scenes of the work. We make.

We put our stuff out.

This revelation came after all the web surfing we have done during this small activity. It was one of the most striking things to notice. The sheer number of unfinished/ under construction websites! The authors had a lot to say (and show) and they put in the time and effort to start and basically kept addendum-ing the whole thing. Quite different from the "locked-in" LinkedIn bro sentimentality.

Concluding this wonderful (to me) soliloquy, I would like to re-iterate that I'm almost as excited and hopeful for next few weeks as my colleagues!

A website is an individual act of collective ambition.
--Laurel Schwulst

Here's the moodboard of the activity. I've never had to do anything for a class that I did in my free time anyway lol. All the websites urls are linked in figma, if anyone wants to go visit some of them really wonderful pieces of work!

Moodboard

Visit the biggest link first. Thank me later!

Day 2 Immersive web Design

Exploring the various codes was fun for the day. CSS diner was awesome to play and it brought back faded memories. Fiddling around the ugly jude was a good opportunity to see the code come to life on the web page! I felt compelled to play around more, which was something I had never done before.

Looking forward to day 3!

Day 03- Trying to emulate what works

Below are my notes from today

There have been many things whose logic I've critically studied in a long time.

• flex
• float
• grid layout
• span

Also, inspecting and decoding the websites reminds me of all the possibilities of what I can do with just HTML-CSS. Tinkering is fun!

Here are some initial ideations for the webpage of today. After reading a few short stories, I landed upon one "What the old man does is always right" and it tickled my funnybones. I've decided on an old newspaper-y aesthetic with a sepia colour palette to sort of contradict the sarcastic tone of the story.

Currently working on the image that will go in the empty dabba, but here is the working layout!

Day 4 - Figuring Out

A lot of today was spent searching for and making image assets for the web page. As soon as we locked in the layout, I got to coding the thing. Making the layout come to life is like putting puzzle pieces where they belong. Sometimes you got to flex-direction too close to the sun, but a bit of trial and error (and patience!) wins you the spot. There is still a lot i have to do in the document and will make use of the different kinds of explorations in the website shared yesterday.

CSS properties I've used

• mix-blend-mode
• flex
• a lot of divs!

Week 2

Today was an ordered list of lively discussion over revolutionizing the webpage and the creating designs for an audience vs yourself, followed by frustration over pushing code to github from vs. I'm still struggling with that as it's asking me to fork the thing, alas.

The rest of the day was spent figuring out CSS grid. The game was a necessary exercise and helped me visualize grids better. Whether that new learning gets translated to code remains to be seen.

Following are my notes, my (wip) coded layouts:

These are a few layouts I'd like to recreate in the coming days!

Week 2- Reflections on an indie website

Right out of the gate, I want to say how much I appreciate this class (instructor+suggested readings) for getting preconceived notions of a website out of my mind. That it must be this way and that, professional (which really means generic) forever chasing noble dreams of a universal design. While it may or may not work out for huge conglomerates, it seems to be an exercise in futility for lil old me. The class have reading engineers and designers talk on and on about having a little space on the web that's entirely yours and never have I ever read people discuss websites (of all things) so earnestly. Website as a garden metaphor has been a game changer in visualizing and thinking about the "content" better.

These are the articles that I read today:

-My blog is a digital garden, not a blog

How the blog broke the web

Building a digital garden

A Brief History & Ethos of the Digital Garden

Principles of Indie web

The Garden and the Stream: A Technopastoral

As we may think

Where good ideas come from

Mike Caulfield's keynote address- digital garden

Content structure and layout At the moment, my mind is working itself in listicles and bi-directional links, like a personal web diary. A basic UI for blogging and updating stuff would do for now (stuff means multimedia). I am thinking about how to lay the content out on each page atm.

One thing I'd want to steal from the Maggie Appleton blog is the transition of of her table of contents.

This is where the brainstorming led me today:

My thoughts on why any of this matters Mike Caulfield mentions in his blog about the prevalence of streaming over a digital garden over the last 20 years. "Streams only surface the zeitgiesty idea of the last 24 hours... even that is algorithmically filtered." Often have I lamented not saving an ig post or losing a good tweet before bookmarking it, the sheer amount of fast informations that the humans are creating in this moment in time. Where does it live, after I press Like or Swipe left on it? Does the owner have the right of controlling and, dare I say, boosting his/her reach on their own? Also, today's virtual landscape doesn't allow for imperfections and under construction works to exist easily. Or any genuine experimentation for that matter.

The manifesto is cooking itself at the moment. I went to watch the new Fantastic Four movie with H and R from the class. It was awesome, if we ignore the CGI baby lol

fin

Walking in low fidelity

To do:

1. Reading about visual hierarchy and implementing it while lay-outing
2. Low-fidelity paperwire-frames of web pages layouts
3. lo-fi digital wireframes
4. Figuring out the pages in detail, Typography, colour palette, etc.

Visual communication is part visual organisation and part personality Visual heirarchy is a deliberate prioritization of visual weight enabled by the manipulation of visual relationships to create meaning for users --communicate a message --illuminate actions

Below are my layouts: I am working on the next time now, as well as refining these as situations arise.

Day 9

Repo issue link: https://github.com/Manasi1114/web2025-manasi-site/issues

Variables

:root {
  --color-primary: #f71642;    
  --color-accent: #ecc830;     
  --text-dark: #05162e;        
  --text-light: #64769c;       
  --background: #f7f7f7;       
  
  --text-small: 0.75rem;      
  --text-normal: 1.4rem; 
  --line-height: 2em;       
  --text-large: 2.5rem;        
  --text-huge: ; 4.6rem;       
  
  /* Fonts */
  --font-main: Palatino, "Palatino Linotype", "Palatino LT STD", serif;
  --font-heading: "jaf-lapture", serif;
  --font-sidebar: "zen-old-mincho", sans-serif;
  --font-links: "Josefin Sans", sans-serif; 
  --font-home: "bell-centennial-std-address", sans-serif";
}

Specifications

Blog and Poetry pages

Day 11: I am Icarus

Started tinkering around the various files in Astro, changing things here and there in html. Finalized a basic sitemap design.

Home Directory -Blogs -Case studies -Poetry -Quotes -Magazine -Bookhouse About

Today's goals and stuff finished:

• Read up some blogs on site mapping
• Determine the components layout across the pages
• Start coding- BLogLayout.astro
• Start The directory page
• Code PoetryLayout.astro
• Add sitemap in Astro

Tomorrow:

• A barebones Directory page
• Make a basic home page
• Start styling on Blog, Quotes and poetry pages
• Add sitemap in Astro

I'm yet to deploy the site, will do after the home page coding!

Things to keep in mind: The Learning curve is not a straight line. Try not to fly too close to the sun. Details can wait. Optimistic for tomorrow!

Breaking out my inner Freddie Mercury

The biggest blockers I had yesterday was figuring out the syntax of the new framework, and finalizing on a sitemap. I have shelved a few things for later, like linking a sitemap in Astro and major styling but determining how the structure of the folder was the win for today.

Today's goals and stuff finished:

• Barebones structure of the home page
• DirectoryLayout.astro
• Linking all the creation pages
• Set up Sitemaps

Tomorrow:

• Write md files for each category
• Make LibraryLayout.astro for magazine and bookhouse index pages
• Make layout for quotes and poetry pages
• Give finishing touches to components

Most of tomorrow would be spent out, but I am happy for today's progress. Will work later in the evening after getting home! Excited.

Repo link: https://github.com/Manasi1114/dainty-words-manasi Netlify link: https://daintyduck.netlify.app/