Page Design

[brisray]

How do you go about designing your pages? Do you use a template? Copy someone else's? Create your own?

I want to add a new menu section on mine. It's easy for me to do as my site is made in sections and I let the server software stitch everything together. It's not a CMS (Content Management System), I have access to the web server (Apache) itself and that can use Server Side Includes (SSI).

Doing that, made me think of how other people manage.

Mine has gone through several design changes and they have always started out the same - as a simple diagram of what I want it to do and what it should look like. Apart from that, that's all I use before I start writing and tweaking it.

The image is how the current design started out. Just a couple of diagrams on the back of some scrap paper.

THe history of the site and its various designs can be seen at https://brisray.com/utils/about.htm

[Melooon]

It can vary wildly depending on pages - sometimes I know exactly what I want - sometimes I have a vague idea - sometimes I like something Iv seen somewhere and I try to replicate it - and sometimes its a slow evolution that takes MANY revisions before I hit a design that works.

For https://melonland.net - I kinda knew what I wanted in-terms of layout - I also knew I wanted a light colour design - I knew I wanted round buttons at the top - So the round buttons became bubbles and that very much informed the rest of the page getting a kinda water theme; I was also watching a documentary about Native American culture and apparently teal is associated with heaven to them, so I tried to make the page teal and that totally fitted my light colour theme and the water theme - I had not planed on teal water when I started, but when I added the Surf Club web-ring it all just tied together very nicely! I put the navbar on the right because everyone else puts theirs on the left and I like being a contrarian

For https://melonking.net - I was copying generic 90s layouts originally - the SpaceJam site had a big influence - the homepage had a window on it because.. well it needed something and I found a window gif That informed the idea of adding more objects around the window to make it a room. Beyond that there are so many pages on this site has have totally unique inspirations. Almost nothing on this site is pre-planned, I just kinda jump in and see what happens.

Finally for https://loom.cafe - My professional site; this was inspired by a particular piece of 1970s land art called the Sun Tunnels, in Utah - I was thinking about the idea of portals into my life, emotion and nighttime - I also knew I wanted to make an iframe site; but I didn't really know what I could do that was new in the iframe space - putting the iframe behind an SVG so it was like a cutout seemed really unusual! I also wanted to get away from everything being rectangular like most websites.

[brisray]

That was an interesting hour or so reading through some of that.

[glacial_pace]

sometimes i like to screenshot elements from sites i visit and use that for inspiration

for example, https://www.vonage.com/ has really cool cards with a layered gradient, which i implemented on the trending/recent threads sections on my site https://basementcommunity.com

[glacial_pace]

other than that https://dribbble.com is good for getting some inspiration

[worldwidewar]

Most of my style preferences come from my experience fiddling around with Myspace. I'd come up with a really cool theme on there, and then put it on my website.
Even though Myspace was way ahead of my time, I got on a recreation of it in 2019 and started getting into making my page look as cool as I could possibly imagine it being through CSS. The first theme I went for was a mix of SymbOS and Wired Sound (which is the style I'm still using for my 404 page), before eventually putting together a hodgepodge of random assets I found on the internet, with Schism Tracker being a big inspiration for the beveled look I put on everything. Since then, the platform shut down and I've mostly settled with the 90's GUI style that I'm using right now. I've experimented with more detailed and minimalist styles since then, but this is the easiest one for me to stick with on my personal site.
Styling aside, the layout of my site is basically just a copy of Xaser's website. There are probably tons of other websites with the same layout, but his particular website is what got me into it.

[brisray]

I like some of those, especially http://www.symbos.de/ and your 404 page. The first because it reminds me a lot of my early days of computer use way back when and Digital Research's GEM GUI.

[Absentmind]

sometimes i like to screenshot elements from sites i visit and use that for inspiration

for example, https://www.vonage.com/ has really cool cards with a layered gradient, which i implemented on the trending/recent threads sections on my site https://basementcommunity.com

other than that https://dribbble.com is good for getting some inspiration

Yeah these are OK for inspo sure, I've found dribbble in particular to be a bit of an echo-chamber in terms of design that "doesn't" exist and it perpetuates this weird mediocre standard for web design and graphic design as a whole. There are a lot of designers on there who have never had a career in design and when they produce design that goes viral within that echo chamber it is then copied as inspiration from new designers and it really makes for an ugly and vapid design. You can really see this in the now dead (thankfully) Neu Morphism trend that was started by Apple ( I think?) and kinda flopped but you can see it so much on Dribbble.

If I were to suggest a website for contemporary design that looks good and is in the industry I'd recommend https://www.awwwards.com and browsing their catelogs. you'll find much better inspo here imo.

[TheFrugalGamer]

Yeah I've got to second that http://www.symbos.de/ site. I love it...it's so...MUCH! Took me a little bit to figure out what it was, but it scratches something nice in my brain.

[brisray]

I just revisited the page and no wonder I recognized it. I even said before that it looked like Digital Research's GEM and that's because it is!

GEM was included on the first oomputer I owned, am Amstrad 1640, but before that it was put on Amstrad CPCs, a sort of console, and Amstrad PCWs, a series of word processors.

[debleb]

i take some inspiration from other sites at times but generally my websites are made from original code and mashed together W3schools tutorials.

[Memory]

I write them from scratch more or less semantically. I make a little sketch or notes what I want and need on the site (e.g. navigation, sidebars, content) and then just write them the way I need them.