Wybór odpowiednich kolorów na stronie [ankieta]

Question

Dzień dobry,

Tworzę stronę  z darmowymi grami online i flash: https://op-gamesonline.ga i potrzebuje pomocy na temat wyglądu, wyboru czcionki oraz tła.

Możesz też zagłosować w ankiecie jak oceniasz stronę do tej pory.

Dziękuję za wszelką pomoc.

 

Możliwe odpowiedzi:

Nie podoba mi się. (8 głosów, 100%)

Jest dobra. (0 głosów)

Bardzo mi się podoba. (0 głosów)

11/10 (0 głosów)

Comments

nie używaj darmowej domeny!

Answer 1

Osobiście uważam, że biały tekst na jasnym szarym tle nie kontrastuje wystarczająco i w niektórych miejscach trzeba wytężać wzrok by przeczytać co jest napisane. Dodatkowo trzymasz się jednej barwy o różnych odcieniach przez to wizualnie strona zlewa mi się w jedno i oddzielne kategorie na pierwszy rzut oka mogą zostać przegapione. Mam wrażenie, że starasz się trzymać zasady 60 30 10 ale pomyślałbym o wykorzysztaniu troche innej barwy przynajmniej do akcentów i tekstu.

Answer 2

Wybór koloru czcionki do koloru tła jest w Mojej opinii nieprawidłowy.

Spróbuj użyć np.:  ACCESSIBLE COLORS i zaradzić jakoś temu. 

Twój obecny ratio

w pewnym sensie sytuację ratuje pozycja w menu o nazwie settings, gdzie można ewentualnie dobrać kolor tła i czcionki, ale trzeba trochę "pogrzebać" na stronie, aby znaleść tego "ficzera" 

 

Domyślam się, że w założeniach strona miała być angielskojęzyczna, ale ...  

 

no i przewijanie trochę "zamula", może wprowadź mniejszą ilość "obrazków" (proponowanych gier - <article>) i paginację  

Comments

Dziękuję za opinię,

Wiem o tym, że występują tam fragmenty po polsku, dziś to naprawię ale ja mam problem z doborem czcionki i tła.Zmieniałem już wiele razy i mi się dużo podoba ale z tego co widzę to wam się nie podoba.

---

@VBService, A takie coś Wam się podoba ?

---

@OP-Games, Tak, już jest dużo lepiej, tekst jest już bardziej czytelny.

 

Zmieniałem już wiele razy i mi się dużo podoba ale z tego co widzę to wam się nie podoba.

jeżeli robisz stronę dla siebie, dla frajdy, nauki itp. (do "szuflady"   ) to możesz nie reagować na opinię na temat wyglądu, czytelności strony, Twój wybór, ale jak robisz stronę, dla "ludzi", powinieneś mieć na uwadze opinie użytkowników.  

To pierwsze tło też jest w porządku, ale dla lepszej czytelności np. po prostu użyj innego koloru czcionki, może wielkości czcionki innej itp.

 

Możesz spróbować użyć np. text-shadow

<main id="container">
  <h1>Twoje tło i kolor - orginał</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

  <h1 class="demo">Twoje tło i kolor - zmiana</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

  <div>
    <input type="range" min="0" max="10" step="1" value="4" list="scale-10">
    <input type="color" value="black">

    <p class="output">
      <span>p</span> <span>{</span>      
      <span>text-shadow</span><span>:</span>
      <span>0 0</span> <span class="value-blur">4</span><span>px</span>
      <span class="value-color">black</span><span> };</span>
    </p> 

    <datalist id="scale-10">
      <option>0</option>
      <option>2</option>
      <option>4</option>
      <option>6</option>
      <option>8</option>
      <option>10</option>
    </datalist>
  </div>
</main>

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Times New Roman";
  font-family: 'Nunito', sans-serif;
  outline: none;
  border: none;
  text-decoration: none;
  font-weight: normal;

  color: rgb(245, 245, 220);
}
body {
  background:rgb(153, 153, 153);
}
#container {
  margin: 10px;
  height: calc(100% - 155px);
  top: 65px;
  width: calc(100% - 20px);
  background: rgb(255 255 255 / 20%);
  box-shadow: 0 10px 20px rgb(0 0 0 / 30%);
  border-radius: 10px;
  position: fixed;
  overflow-y: auto;
}
#container h1 {
  margin: 20px;
  font-size: 28px;
  text-align: center;
}
#container h1 + p {
  margin: 20px;
  font-size: 18px;
}



#container h1.demo,
#container h1.demo + p {
  text-shadow: 0 0 4px black;
}
div {
  margin: 20px;
}
.output {
  background-color: black;
  padding: 0.5em 0.5em;
  margin-top: 1em;
  font: 400 1.05em/1.1 system-ui;
  color: white;
}
.output span:nth-child(1),
.output span:nth-child(8) {
  color: yellow;
}
.output span:nth-child(3) {
  color: #9a8297;
}
.output span:nth-child(5),
.output span:nth-child(6),
.output span:nth-child(7) {
  color: #d0782a;
}

window.onload = load;

function load() {
  const p_demo = document.querySelector('h1.demo + p'),
        input_blur = document.querySelector('input[type="range"]'),
        input_color = document.querySelector('input[type="color"]'),
        value_blur = document.querySelector('.output .value-blur'),
        value_color = document.querySelector('.output .value-color');

  input_blur.oninput = setTextShadow;
  input_color.oninput = setTextShadow;

  function setTextShadow() {
    value_blur.textContent = input_blur.value;
    value_color.textContent = input_color.value;
    p_demo.style.textShadow = '0 0 ' + input_blur.value + 'px ' + input_color.value;
  }
}