Design meta issue

[mattl]

@nsmsn is going to be helping out with design stuff on hacienda.

[nsmsn]

First of all, thank you for having me here!

I've seen a few prototypes of stuff in the design issues created with Glitch. Is that something we should use to iterate on?

A couple more questions as I look around and before I start contributing:

• Is the current site design (omg.lol aesthetic, bright colors, Mint Grotesk) a design direction we want to build upon?
• Could an updated favicon/logo be in the works?
• Can we build the hacienda HTML-first (skipping a UI tool like Figma or Penpot altogether)?

[nsmsn]

My favored approach to writing CSS is Andy Bell's CUBE CSS, but I'm open to other approaches.

Whether you like to author your CSS with Sass, Less, PostCSS, or even CSS-in-JS: the principles and methodology of CUBE CSS remain.

CUBE CSS is completely tool agnostic because it is more of a thinking and organisational methodology, rather than a tooling methodology. As long as the output is CSS, it’s all good.

I don't know if CUBE even has a license, so it should be compatible with Libre.fm's GNU Affero General Public License.

[mattl]

• I like the omg.lol style but I think we need something of our own
• I’ve never liked our logo or favicon too much
• HTML first is preferred and reduces our need for anything else

[mattl]

Another thing is that using JavaScript should be minimal and not too complicated. I’d like to serve up any JavaScript without doing any minification.

[nsmsn]

Have you considered building it as a Progressive Web App?

[mattl]

PWA is too much JavaScript for me. The minimum browser for this is curl or Lynx. Most things should work just fine there for browsing the site, signing up, etc

[nsmsn]

OK, noted. I think if not a PWA, it should still be usable if someone saves it to their phone's home screen, right?

[mattl]

Yeah but that’s not something I’d worry too much about. I think most people looking at their profile on mobile would do it via a client. This means we need clients that support Libre.fm

[mattl]

One thing I hope to deliver is perfect HTML. If there’s no CSS it should still be perfectly usable and understandable.

[nsmsn]

Yeah but that’s not something I’d worry too much about. I think most people looking at their profile on mobile would do it via a client. This means we need clients that support Libre.fm

I was able to connect Finale to my new Libre.fm profile and its working so far.

[nsmsn]

Thinking about where to focus my energy for the next several days...I'm taking some time off work while I have family visiting from out of town.

I feel like we have the beginnings of a Design Principles document, which should be in the README of this repo: https://github.com/foocorp/new-design (design principles should be fairly firm, but can be a living document)

Should I start with the HTML of the existing site, or keep an eye on /new-design/prototypes/ to start thinking about CSS?

I have also been sketching logo/favicon ideas.

[mattl]

I figured I might have a stab at writing some HTML for the profile page, login and album pages and let you go to town styling them?

nothing final or even close to final but something real we can have people look at that’s not a screenshot? What do you think?

design principles sounds good too. See if this grabs you?

Everyone wavers between the emotionally still — alive past and the already dead future.

We will not work to prolong the mechanical civilizations and frigid architecture that ultimately lead to boring leisure.

We propose to invent new, changeable decors....

Darkness and obscurity are banished by artificial lighting, and the seasons by air conditioning; night and summer are losing their charm and dawn is disappearing. The man of the cities thinks he has escaped from cosmic reality, but there is no corresponding expansion of his dream life. The reason is clear: dreams spring from reality and are realized in it.

[mattl]

Started putting a little HTML together: https://github.com/foocorp/new-design/tree/main/prototypes/0

[nsmsn]

I'll have some time soon to set up a CSS file. Family visit ends tomorrow and I get my office back.

[nsmsn]

Hey @mattl, How would you like me to submit my changes?

Like, would you like a PR with a new folder named "1" with a CSS file along with any changes (adding class names) to the HTML?

[mattl]

@nsmsn you should be able to just push stuff to the repo, but a PR will get me to look at stuff.

[mattl]

Really like how this page looks https://ifttt.com/plans

[nsmsn]

I am building up a foundation with flexible type and basic styles. using system ui font stack for now, but I'm thinking about how a user profile and an album link could be customized.

Should be able to push something in the next couple days. Keep the inspiration piling on.

[mattl]

Really like what you're saying here.

I just intentionally removed the omg.lol CSS from the site, so it looks pretty plain right now but that's okay.

[mattl]

@artlung provided a stop gap CSS file that looks good.

I really like these pages too https://thearsse.com https://nova.app

[mattl]

I took what @artlung did (very helpful!) and ripped out the light-mode stuff and tweaked a few of the templates.