5

Chinese.SE has been around for over 10 years; back in 2019 it graduated from beta (along with 28 other sites). There's been a bit of a wait for site design, i.e., professionally designed banners, icons, etc. Like the sites for English, English Language Learners, and Japanese. While it's not our turn yet, at some point it will be, and we'll likely get a post like this one at Spanish.SE asking for our input.

Question: What would you want the site's design to include (and not include)?

I'm hoping there's some value in bringing this up now, then coming back to it at a later date to see if we still have the same opinions. (Remember that time a 永 favicon was highly upvoted, and subsequently was massively outvoted by 漢.)

I remember bringing up a related topic over at Islam.SE, and I found the negative feedback particularly useful: how not to design the site. "Don't do [foo] because it'll alienate some portion of the userbase." E.g. I'm fairly sure we want to avoid cross-straight politics, and any kind of implicit recognition of some country's standard at the expense of another country's. We must also bear in mind copyright issues.

I'd like to begin with how I really like Reddit's r/ChineseLanguage design.

Specifically what's on the table:

This is likely to depend on the specific design work so I can't make any promises. That said, the areas of focus for our designers include:

  • Logo and wordmark (the name of the site laid out in a thematic font). These are the primary branding elements for the design and will be visible in the banner, chat rooms, and wherever the site icon is visible now.
  • Thematic banner/footer image, color, gradient or pattern.
  • Thematic background color, gradient, or pattern.
  • Customized colors for titles, links, buttons, etc.
  • Matching greyscale Meta design.
  • Chat design.
  • Badges - possible but not promised.
  • 404 Page - possible but not promised.

--- Catija, 25 May 2022.

If it helps, I made a mock-up of something I think might be suitable:

Mock up shows (a) light red background; (b) left has an outline of Chinese dragons, modified from https://pixabay.com/vectors/dragon-tattoo-chinese-colorful-154565/ (listed as "Free for commercial use "); (c) write has some of my handwriting; (d) the logo is a calligraphic 漢, and next to it is Chinese Language written in a cursive font; (e) the badge icons are 章; (f) the Ask Question button is red (same as at Japanese.SE)

Maybe it's too pink, but I worry about it otherwise being too red. (I feel like a dragon image, or maybe a phoenix, would look really cool.) Actually, maybe "jade" is another good choice of color.

It seems Spanish.SE is getting a similar design with a text gradient.

I wonder if changing the up and down vote arrows to 上 (up) and 下 (down) is a possibility:

mock-up of up and down vote arrows replaced by 上 and 下

Edit: Ah, it seems this is not possible (as mentioned at French.SE).

...the current theming level is unsustainable, we're going to have to disappoint here. In addition, things like voting and favorite buttons are a core part of the Q&A experience that should be shared across the network. It was a mistake that we ever allowed for those to be themed...
Joe Friend

A while back, we mentioned changing the name of "Community": What's a suitable Chinese name for the Community bot?. I think "Community 社群" might be an option.

Oh, and hopefully we can also update the Chinese.SE Twitter: (Update the Chinese.SE Twitter icon from “Cn” to 漢?).

By the way, I'm not sure if this helps, but the character 漢 can be sourced from the Make me a Hanzi (github) project (in graphics.txt):

{"character":"漢","strokes":["M 226 723 Q 251 699 277 672 Q 292 656 310 657 Q 323 658 328 673 Q 334 689 324 724 Q 318 743 287 758 Q 209 788 196 779 Q 190 775 192 760 Q 196 747 226 723 Z","M 128 533 Q 176 478 215 457 Q 231 454 242 469 Q 249 482 247 502 Q 235 550 145 575 Q 144 576 143 576 Q 124 580 114 577 Q 107 576 109 562 Q 110 549 128 533 Z","M 130 145 Q 117 141 121 123 Q 143 44 177 30 Q 184 23 195 26 Q 202 29 203 55 Q 204 94 287 359 Q 293 375 292 382 Q 291 392 281 385 Q 269 376 167 189 Q 157 167 130 145 Z","M 683 712 Q 744 722 798 728 Q 808 727 817 739 Q 818 749 796 760 Q 766 782 693 758 L 633 743 Q 624 743 525 721 L 477 715 Q 429 712 376 703 Q 349 700 370 683 Q 398 659 438 668 Q 459 674 485 677 L 526 685 Q 572 695 631 704 L 683 712 Z","M 525 721 Q 525 787 521 791 Q 520 792 519 792 Q 506 802 481 809 Q 462 813 445 804 Q 436 797 449 785 Q 465 761 477 715 L 485 677 Q 501 575 509 560 Q 516 551 522 558 Q 525 562 528 572 L 530 610 Q 529 625 528 638 Q 527 663 526 685 L 525 721 Z","M 664 635 Q 673 675 683 712 L 693 758 Q 694 762 696 767 Q 696 771 713 811 Q 717 820 701 836 Q 671 857 650 864 Q 637 868 628 862 Q 621 856 626 842 Q 636 823 636 809 Q 635 778 633 743 L 631 704 Q 627 670 623 633 C 620 603 657 606 664 635 Z","M 581 586 Q 615 593 685 599 Q 695 600 696 609 Q 697 616 668 634 Q 667 635 664 635 L 623 633 Q 571 618 530 610 C 478 600 506 571 581 586 Z","M 435 498 Q 431 507 385 511 Q 373 514 371 508 Q 365 502 374 488 Q 399 446 418 376 Q 422 355 436 342 Q 454 323 458 337 Q 459 344 460 355 L 456 385 Q 444 440 441 466 L 435 498 Z","M 767 433 Q 788 475 813 488 Q 831 504 817 522 Q 802 535 753 562 Q 737 569 715 563 Q 666 544 618 531 L 559 517 Q 498 507 435 498 C 405 494 412 459 441 466 Q 448 467 459 471 Q 508 481 560 491 L 613 501 Q 649 508 685 516 Q 713 523 726 511 Q 732 505 729 492 Q 722 461 713 435 C 704 406 753 407 767 433 Z","M 610 379 Q 682 391 780 400 Q 790 401 792 409 Q 792 416 767 433 C 752 444 742 441 713 435 Q 658 423 610 412 L 562 402 Q 505 393 456 385 C 426 380 430 355 460 355 Q 466 354 476 356 Q 510 365 561 372 L 610 379 Z","M 604 282 Q 668 294 725 302 Q 750 306 741 320 Q 731 336 703 341 Q 667 345 607 325 L 558 314 Q 494 301 436 286 Q 418 282 440 266 Q 452 257 555 274 L 604 282 Z","M 623 185 Q 708 195 831 197 Q 892 194 900 206 Q 904 216 888 230 Q 837 266 801 258 Q 725 240 594 219 L 545 211 Q 436 195 312 178 Q 291 175 307 159 Q 320 146 338 141 Q 359 137 374 141 Q 447 162 530 172 L 586 181 L 588 181 L 623 185 Z","M 594 219 Q 600 250 604 282 L 607 325 Q 608 353 610 379 L 610 412 Q 610 437 610 459 Q 610 480 613 501 L 618 531 Q 619 538 623 547 Q 627 559 619 565 Q 604 577 581 586 C 554 599 509 595 528 572 Q 555 545 559 517 L 560 491 Q 561 445 562 402 L 561 372 Q 560 342 558 314 L 555 274 Q 554 267 553 257 Q 552 233 545 211 L 530 172 Q 482 97 402 57 Q 368 41 318 20 Q 306 16 302 13 Q 298 9 312 5 Q 405 -1 524 80 Q 539 92 551 106 Q 575 137 586 181 L 594 219 Z","M 588 181 Q 589 180 591 178 Q 720 13 757 2 Q 808 -16 932 8 Q 951 9 953 15 Q 954 22 940 28 Q 760 86 698 130 Q 653 158 623 185 C 600 205 569 204 588 181 Z"],"medians":[[[202,771],[284,717],[308,677]],[[121,566],[199,512],[215,495],[220,478]],[[190,36],[176,66],[169,119],[285,379]],[[371,694],[395,687],[427,688],[727,744],[766,748],[807,741]],[[453,796],[473,788],[492,771],[517,566]],[[637,853],[673,811],[647,656],[630,640]],[[533,578],[547,595],[602,609],[667,616],[687,608]],[[380,501],[411,477],[448,342]],[[444,472],[452,485],[726,540],[748,532],[770,506],[748,459],[720,440]],[[464,363],[474,372],[509,380],[709,414],[765,416],[783,408]],[[438,276],[518,285],[665,317],[706,320],[730,314]],[[310,168],[365,162],[511,189],[811,228],[892,211]],[[536,567],[567,560],[587,542],[580,277],[571,217],[556,168],[533,127],[512,104],[460,66],[367,24],[308,10]],[[601,169],[619,169],[689,101],[774,42],[811,32],[947,16]]]}

or as a SVG:

<svg viewBox="0 0 1024 1024">
  <g transform="scale(1, -1) translate(0, -900)">
    <path d="M 226 723 Q 251 699 277 672 Q 292 656 310 657 Q 323 658 328 673 Q 334 689 324 724 Q 318 743 287 758 Q 209 788 196 779 Q 190 775 192 760 Q 196 747 226 723 Z"></path>
    <path d="M 128 533 Q 176 478 215 457 Q 231 454 242 469 Q 249 482 247 502 Q 235 550 145 575 Q 144 576 143 576 Q 124 580 114 577 Q 107 576 109 562 Q 110 549 128 533 Z"></path>
    <path d="M 130 145 Q 117 141 121 123 Q 143 44 177 30 Q 184 23 195 26 Q 202 29 203 55 Q 204 94 287 359 Q 293 375 292 382 Q 291 392 281 385 Q 269 376 167 189 Q 157 167 130 145 Z"></path>
    <path d="M 683 712 Q 744 722 798 728 Q 808 727 817 739 Q 818 749 796 760 Q 766 782 693 758 L 633 743 Q 624 743 525 721 L 477 715 Q 429 712 376 703 Q 349 700 370 683 Q 398 659 438 668 Q 459 674 485 677 L 526 685 Q 572 695 631 704 L 683 712 Z"></path>
    <path d="M 525 721 Q 525 787 521 791 Q 520 792 519 792 Q 506 802 481 809 Q 462 813 445 804 Q 436 797 449 785 Q 465 761 477 715 L 485 677 Q 501 575 509 560 Q 516 551 522 558 Q 525 562 528 572 L 530 610 Q 529 625 528 638 Q 527 663 526 685 L 525 721 Z"></path>
    <path d="M 664 635 Q 673 675 683 712 L 693 758 Q 694 762 696 767 Q 696 771 713 811 Q 717 820 701 836 Q 671 857 650 864 Q 637 868 628 862 Q 621 856 626 842 Q 636 823 636 809 Q 635 778 633 743 L 631 704 Q 627 670 623 633 C 620 603 657 606 664 635 Z"></path>
    <path d="M 581 586 Q 615 593 685 599 Q 695 600 696 609 Q 697 616 668 634 Q 667 635 664 635 L 623 633 Q 571 618 530 610 C 478 600 506 571 581 586 Z"></path>
    <path d="M 435 498 Q 431 507 385 511 Q 373 514 371 508 Q 365 502 374 488 Q 399 446 418 376 Q 422 355 436 342 Q 454 323 458 337 Q 459 344 460 355 L 456 385 Q 444 440 441 466 L 435 498 Z"></path>
    <path d="M 767 433 Q 788 475 813 488 Q 831 504 817 522 Q 802 535 753 562 Q 737 569 715 563 Q 666 544 618 531 L 559 517 Q 498 507 435 498 C 405 494 412 459 441 466 Q 448 467 459 471 Q 508 481 560 491 L 613 501 Q 649 508 685 516 Q 713 523 726 511 Q 732 505 729 492 Q 722 461 713 435 C 704 406 753 407 767 433 Z"></path>
    <path d="M 610 379 Q 682 391 780 400 Q 790 401 792 409 Q 792 416 767 433 C 752 444 742 441 713 435 Q 658 423 610 412 L 562 402 Q 505 393 456 385 C 426 380 430 355 460 355 Q 466 354 476 356 Q 510 365 561 372 L 610 379 Z"></path>
    <path d="M 604 282 Q 668 294 725 302 Q 750 306 741 320 Q 731 336 703 341 Q 667 345 607 325 L 558 314 Q 494 301 436 286 Q 418 282 440 266 Q 452 257 555 274 L 604 282 Z"></path>
    <path d="M 623 185 Q 708 195 831 197 Q 892 194 900 206 Q 904 216 888 230 Q 837 266 801 258 Q 725 240 594 219 L 545 211 Q 436 195 312 178 Q 291 175 307 159 Q 320 146 338 141 Q 359 137 374 141 Q 447 162 530 172 L 586 181 L 588 181 L 623 185 Z"></path>
    <path d="M 594 219 Q 600 250 604 282 L 607 325 Q 608 353 610 379 L 610 412 Q 610 437 610 459 Q 610 480 613 501 L 618 531 Q 619 538 623 547 Q 627 559 619 565 Q 604 577 581 586 C 554 599 509 595 528 572 Q 555 545 559 517 L 560 491 Q 561 445 562 402 L 561 372 Q 560 342 558 314 L 555 274 Q 554 267 553 257 Q 552 233 545 211 L 530 172 Q 482 97 402 57 Q 368 41 318 20 Q 306 16 302 13 Q 298 9 312 5 Q 405 -1 524 80 Q 539 92 551 106 Q 575 137 586 181 L 594 219 Z"></path>
    <path d="M 588 181 Q 589 180 591 178 Q 720 13 757 2 Q 808 -16 932 8 Q 951 9 953 15 Q 954 22 940 28 Q 760 86 698 130 Q 653 158 623 185 C 600 205 569 204 588 181 Z"></path>
  </g>
</svg>

It looks like this:

漢

2
  • Somehow this question does not seem to get a lot of inputs and votes, but I also think we need to have some sort of theme here.
    – 王博龙
    Jul 30 at 19:18
  • Also suggestion: Use a different color than just regular blue, for the topic list.
    – 王博龙
    Jul 30 at 19:19

2 Answers 2

Reset to default
2

my humble advices:

  1. dark mode, please :)

  2. if the site need a background image, use classical text in seal script, like

enter image description here

  1. if possible, hire a professional to design 😼
2
  • 1
    I believe dark mode is a separate discussion, and yes, when it's time, it'll be professionally designed based on feedback, like these sites.
    – Becky 李蓓 Mod
    Jul 14, 2022 at 2:18
  • Is it possible to have different designs in light/dark modes?
    – 王博龙
    Jul 30 at 19:20
1

This color space looks nice: https://www.schemecolor.com/chinese-red.php. There might be more like this but I think these colors are much more representative than the current blue color.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .