GOALS OF PROJECT:

• Make site fluidly responsive across all breakpoints
• Establish a cohesive visual design system that works across all 3 articles and a home page “binding” them together
• Follow best typography practices learned throughout the semester (gutters, padding, hierarchy, size, color-contrast etc.)
• Incorporate 1 image and inline svg

WHAT I COMPLETED:

• Grid a border pattern to apply across all h1s to mimic a stained-glass window motif
• Ensured fluid responsiveness across all breakpoints (centered —> left-aligned —> 2 column screen left-aligned) (main breakpoints: 750px, 1050px, 1400px)
• Styled for light/dark mode
• Added slight light glass shimmer animation only on refresh (included prefers-reduced-motion)
• Added image as background texture to mimic glass
• Included inline svg as home logo and summary marker
• Made nav bar responsive (hamburger then expand to nav bar when width >= 1050px)
• Edited down articles to manageable lengths, selected/styled blockquotes, article links
• Ensured accessible color-contrast against black text for colored panels
• Made all colors, fonts, spacing, sizes variables references throughout the pages
• Consolidate most styling to common.css, minimal individual css page styling
• Included intro/colophon explaining context of site

MAIN TRIUMPHS:

• Creating fluid responsiveness with breakpoints
• Styling a border pattern grid with multiple spans
• Grid div's expanding to different grid squares when clicked on
• Styling h1 with the window borders without sacrificing too much gutter space (especially on mobile)
• Figuring out the breakpoint rules of when certain fonts/padding/alignments should respond
• Hamburger menu drop-down nav bar that expands to a sticky nav bar at a larger breakpoint
• Pulling back on design and really focusing on typography this time (this was specifically feedback I got on the last project of "keeping it too long in the oven," so I wanted to not overdue it and keep it pretty minimal on super dynamic visual elements to focus on the styling, sizing, spacing, responsiveness, etc. of the actual body text
• Starting mobile first!! (hate to admit it, but this really was so much easier building up)
• I finally fully leaned into nesting!! (love, love, LOVE it-- really does make things so much easier, breaks sections up almost like components in Figma is how I saw it)

MAIN CHALLENGERS:

• The hardest challenge was identifying a single visual design language that could unify all three readings while still giving each one enough flexibility to feel distinct.
• I spent most of the time experimenting and iterating, continually adjusting what conceptual element could tie the pieces together.
• After Michael’s feedback that he missed the “oomph” of the original saturated-color sketches, I realized my gradient motif wasn’t delivering the same impact and created accessibility issues.
• I pivoted to a stained-glass-window concept instead of gradient boxes, which let me keep the overall structure of the visual elements while introducing more vibrant, impactful colors.
• Making it fluidly responsive especially with the border pattern and the large h1 in spans so it couldn't act as a normal inline wrap text
• Ensuring accessibility with the brighter colors against black body text
• Figuring out the balance and pushing the limit of what I could tinker with to serve my window design vs. adhering to best type/UI practices
• Consolidating as much as I could do the common.css and figuring out exactly what needed to be separated

WHAT I WOULD CONTINUE TO WORK ON (TIME/SKILL PERMITTED):

• Styling print mode (especially considering the brighter colors and box-shadows using excessive ink)
• Adding more subtle animations/interactions regarding light to play up the window motif (maybe have a sunbeam sweep across the page?)
• Incorporate a more detailed window aesthetic with potentially bevels as corners
• Perhaps create a whole design/illustration on the home page that really mimics a full window stain brick wall like in a traditional gothic church
• Couldn't figure out how to keep details open on mobile but closed when width >= a certain breakpoint without using java

QUESTIONS I STILL HAVE:

• How can I take this one step further? How does my visual language limit how much I can expand on the visual design? How much further can I push the window motif?
• What’s another way I could’ve incorporate an image? An SVG?
• Is two-column view on larger screens even most effective?
• How can I make this the most accessible? How would screen readers read the broken up h1s properly?