Website design

[SaraVieira]

I'm not a designer

I say before posting anything in here 😂

[stereobooster]

https://wireframe.cc/1Om8tz

Not a designer either, but i guess we need to agree on elements and pages first, right? So designer would know. We have two pages:

• index - list of all terms. It may have
  • search bar
  • pagination or infinite scroll or list of starting letters
  • list of terms (links to articles)
• article - page dedicated to one term. It may have
  • Title - header
  • Definition - text block, may include images, or interactive "widgets" if we will use MDX and custom components
  • Section with structured data, like tags or also know as... (optional)
  • Main image (optional)

WDYT?

[SaraVieira]

I was thinking the main page would focus more on the search bar , basically would mostly only have that and a list of the most searched terms

Then there could be a page with all the terms , what do you think ?

[stereobooster]

Yeah, when I wrote index, I meant alphabetic index, like they have in books not a root page.

As of root page (or landing page) I agree - search box in the middle of the page and navigation links (alphabetic index, source code on Github).

About search box. You think about combobox or separate page with search results?

[stereobooster]

Landing page: logo, searchbox, links	as soon as user focus searchbox, it slides to the top of the page	as soon as user types something in, search results apper under search box

Index page	Definition page

[SaraVieira]

Dude this is perfect 😍

I will try to turn this into an ui :)

[SaraVieira]

You are my hero

[SaraVieira]

As much as I like dark themes I feel like this website is better suited for a light one right ?

[jsnhall]

I would agree that a light theme would be better suited for this.

[SaraVieira]

I would then add a dark theme switch that would be on by default if you had the Mac os dark mode , make sense ?

[SaraVieira]

Here is my first attempt

File is open for viewing and editing:

https://www.figma.com/file/Ez7bYjrNe54M23AIdh2Feqrt/Webdev.wtf?node-id=0%3A1

[stereobooster]

I like the idea of example searches under searchbox

[cdvillard]

It should be purple. Because. 😋

[SaraVieira]

That could actually be the accent color that I am missing so far

I'm in on purple because it's the gay color I have no idea what your reason is but glad we figured this out ahah

[cdvillard]

@stereobooster, instead of on focus, could the search be on input? It's a nitpick, but it might be visually jarring to have so much whitespace if nothing is being typed in.

[stereobooster]

We need to experiment with real component. We can build theories, but practice can be different

[cdvillard]

@SaraViera, maybe the suggestions can be most searched by category (FE, BE, DB, Languages)?

[stereobooster]

I would say for start it can be hardcoded values. In the future it indeed can be top searches. (Originally question was for Sara. Welp...)

[SaraVieira]

That would require three or four rows under the search and I think that would actually be nice since there is so much white space :)

@stereobooster I will dig into starting on this part of the search since I don't have that much experience with these animations and it needs to be smooth

[stereobooster]

If you have some initial boilerplate I also can give it a try.