New logo, redesign website

[vedam]

As discussed on discord, here is my design proposal for svelte

[arxpoetica]

Two cents (was said in forum, but moving conversation here): header on wide monitors is waaaay too wide. (See attached.) Consider putting a max-width on it? Maybe no bigger than 1200px? A few reasons, most pertinent related to cursor movement; need to swing far and wide to get from one end of a menu item in the header to the other side.

[tivac]

@arxpoetica why was this closed?

[Rich-Harris]

@arxpoetica has fat fingers. this isn't the first time he's done that 😉

[arxpoetica]

Ah $^&*$# sorry for fat fingers. I blame GitHub for having non-Robert-friendly UI. 😜 Sorry.

[Cleecanth]

Very good work. Really aligns the UX of the project into something cohesive — The docs already feel more approachable (possibly even more understandable).

Small criticisms:

1. The header is a bit tall on smaller screens. I'd like to maximize Maybe doing something vh-based (with a max height/min-height) would help. Currently, doing 10vh with a min of 6rem and a max of 10rem seems solid.
2. This is just personal taste, but the logo feels a awkward without the colored outline (like on the homepage). Kind of loses the whole infinity/interlocking thing and just becomes a lumpy S. Might be better to make the thick outline a required part of the logo, like this:
   
3. Super minor: Feels weird that the logo appears in the nav and center of the page on homepage. Simple text might be fine in the nav (or the logo could appear once you've scrolled a bit or aren't on the homepage).

Keep up the good work.

[vedam]

My two cents

@arxpoetica Consider putting a max-width on it
thx for putting it in here a third time.
You're right, but I cannot see it as a problem.

Even if I wind up on my 5K-imac to over 2000px (seriously, who works permanently with such wide windows?), the main navigation is top-center and always in the immediate vicinity of the content. The sidebar nav is bound to the content and always stays close to it (kind of max-width). Top left (logo) and top right (chat and github) close the page optically.
For my taste a max-width solution would look like sombody's slept on the design-side.

@tivac mentioned on discord the nav links on the site are really, really tiny
I'm with you on that. Hairy stuff.
I also stumbled across this point and worked on a solution for quite some time. Unfortunately we have to find a compromise between clarity and usability with such many links. I've already used a larger line spacing and maybe we can make the font a bit larger, but in the end this will always be at the expense of the quick findability of the individual links. Scrolling gets larger.
In the last revision, I made them larger and spend more padding to an, at least for me, tolerable value.

@Cleecanth
Thx for the comments.

1. That should be doable, although I thing especially the top(branding)-section shouldn't be minimized to meaninglessness
2. Hah. Cool you mention it. Would be a good discussion. In this case I actually intended exactly this.
   In the following bash-sentences I tried to always start with an 'S' so the S-accented Logo underlines that (Sapper solves this). But, I'm just poking around here to see, what's possible and what not.
3. I'm with you on that. The poor solution would be just the Typo (just on the homepage, because of doubling). The deluxe-version would be something like what i.e. zeit on the dashboard-page did.
   heh. btw @arxpoetica max-width ;-)
   As soon as the Logo dissapears underneath the topbar, it gets animated to where it belongs.
   But that requires svelte-know-how I'll have to learn first. Maybe someone can help out.

Hope that clears up some of my thoughts.
Thx again for comments. Design is nothing without feedback.

[vedam]

A question concerning github.
I have a fork of this repo on my github-account as a working copy. Over there is all the latest-and-greatest stuff I created in the meantime.
How is that handled?
Do I have to create new pull-requests and do they get merged?
I don't want to pollute things here with countless PRs.

[Rich-Harris]

@vedam this PR contains whatever is in the design branch on your fork — as you push new commits to that branch, this PR will automatically update

[vedam]

@Rich-Harris thx, Good to know. heh, I just saw the line below the comments:
Add more commits by pushing to the design branch on vedam/svelte.technology.
'Who can read has the advantage' or 'First read, then ask' ;-)

[arggh]

Few comments

• The header seems a little too high... it steals a lot of screen real estate. Maybe if it would reduce in size at least after scrolling down?
• There's a lot of space available on the header, but there's no labels on the Discord and Github icons. Github is pretty obvious (despite tiny), but the chat icon's (actual) function is bit of a mystery until you wait for the alt-label to appear. I'd guess it's a lot more effective at luring people to the chat with a proper label (hey, i'm already on discord! I'll check it out.. or oh, it's a community and not a chat with the maintainer etc...)
• The box-shadow on the header is little blunt. Maybe use a really faint 1px border and a lighter shadow (or just lighter shadow?)
• Agree with @Cleecanth about the inverted logo's stroke issue
• On the guide's aside navigation, the active item's arrows sometimes drops below the text.
• I would add slightly more contrast between the guide's copy text and background (by darkening the text)
• Matter of taste, but something about the logo bothers me. It's "features" or "shapes" are a bit blurry or unbalanced, which make it seem restless. Just a guess, but I'd try to reduce the stroke-width so that the curves would be more prominent. Also as a sidenote, it looks a bit like a halved Squarespace logo?
• I like the colors!
• Looks fresh 👍

[mattpilott]

Hey, the design is good! I was looking through the the new site today and personally find the light style code blocks harder to read/take in can a toggle be added to flick it to a dark theme similar to one dark or dracula or similar? Would be great if that change could be stored in the browser too!