dojoengine / website Goto Github PK

Currently are using this muted blue. should use the same blue as the logo (Vibrant Blue/400)

There are some scenarios when objects on the article page clash

Here, the header gets too close to the blockquote

---

Here, a long header overlaps with the contents section (text should probably wrap)

Titles should be aligned as well, problem is pronounced on larger monitors

--- Resources ---

https://www.figma.com/file/OK6ksIOFB32P2CquZkz6vT/Landing-Page?type=design&node-id=120%3A22138&mode=design&t=rp2Se2CVgSTue4lA-1

At small screen sizes the left and right padding of these blog post cards is larger than the top and bottom padding

---

Should be consistent. similar to how they are rendered on desktop

---

Should look something like this instead

We're rebranding to Dope Wars.

New domain will be https://dopewars.game

and here's some new copy

"Prove you're the ultimate hustler. Move product, stack paper, and rise to the top in Dope Wars. Play now and claim your spot on the leaderboard!"

• Language button goes to the footer

• Docs button stays in the header

---

Desktop

I have them at 120px x120px

border radius is a little aggressive too, I have that at 6px (.5rem looks nice though)

Looks like spacing between the articles section and the partners section is determined by viewport height?

Would feel better if it was consistent.

Here's how it feels in the prototype

Screen.Recording.2023-11-27.at.1.50.09.PM.mov

Dot grid should remain 'Above the fold' i.e. it should be 100vh and scroll along with the rest of the page content. Dot grid can be more pronounced as well (think its at .5 opacity rn? lets bump that up to 1)

Bit of a weird navigational bug. When you tap the home button it changes color and 'sticks' as red until you tap the page again.

check out this video

Final.Replay.MP4

---

If theres a color transition on mobile it should happen on 'Press' and then turn back to the original color on 'Tap'.

Like this ->

Screen.Recording.2023-11-30.at.2.50.28.PM.mov

Looking a little bit closer at Alex's designs and he's using a different shade of blue than the one I am. His look better so I added two new color variables.

---

---

• Remove drop shadow on hover
• Color change to default card (Blue/650) (#12305C)
• Color change on hover (Blue/750) (#0C2449)
• Apply above changes to See All button as well

Would prefer this, think the blue and the red clash

• Fill (Blue/300)

• Arrows (Blue/800)

Screen.Recording.2023-11-27.at.5.22.52.PM.mov

• Add background fill to parent container (Blue/800)

Banner should be full screen up to a certain break point (1512px) ...

... at which it becomes fixed width and center aligned

---

Resources

simple as

Screen.Recording.2024-05-31.at.10.08.05.AM.mov

Touch target is currently limited to the text of the button and does not extend to the button perimeter. problem exists for most of the buttons on the site

• Command line button has little to no padding and sits kind of uncomfortably on the page

• Code snippet title has too much padding and feels squeezed)

• Code snippet preview doesn't have padding

• Articles section has too much and inconsistent padding

• Partners section doesn't have padding
• Footer (and all content) has this weird offset from the right edge (caused by the code preview section)

• footer content clashes

Should be more understated than the ones that appear in the header. This would be ideal

Screen.Recording.2023-11-29.at.3.49.23.PM.mov

---

---

Default button color: (Blue/700) (#0C274F)
Hover color: (Blue/650) (#12305C)
Text color: (Blue/400) (#84ADE5)

--

Resources

Right now it's sitting at 24px, should be closer to 64px. Let the copy breathe a little

Made a little video to articulate some of the behavior we're looking for

Screen.Recording.2023-11-29.at.2.54.44.PM.mov

---

Should be connected to the readers scroll position. should auto scroll to the section if a user clicks on it directly

Includes hover states for mouse over

---

---

Prototype
Resources

->

Weird scroll behavior in chrome browser where the code preview section bounces around when the bottom bar of the browser collapses

RPReplay_Final1701189246.mov

---

Everything below the fold has a simple blue background

Not totally necessary atm, but will be necessary in a future state of the website.

---

Clicking that button takes you here

Simple page with a complete list

Lets do this

Instead of this (currently)

---

Resources