TEHTY: Visuaalinen ilme

Mitä pitää tehdä että tämä tehtävä voidaan sulkea:

Palstan visuaalisen ilmeen toteutus. Liittyy osittan uuden logon designiin.

Muuta kommentoitavaa

Discourse mahdollistaa muokkauksia mm. seuraavin menetelmin:

  • Peruselementtien värien määrittely
  • Keskustelualueiden tunnusvärin määrittely (liittyy rakenteen määrittelyyn)
  • CSS override suoraan ylläpitotoiminnoista

Pyritään saamaan palstasta visuaalisesti miellyttävä, käytettävä ja selkeä. Ei muokata järjestelmää liikaa kooditasolla, jotta ei rikota päivitettävyyttä.

Otin Tapparan oranssin lähtökohdaksi ja tein ColorCombon avulla pieniä muutoksia väripalettin. Nyt enemmän pastellisävyinen ilme ja tausta ei ole 100% valkoinen.

Lisättiin yläpalkin alle ohut varjotehoste, tuomaan vähän syvyysvaikutelmaa. Tutkin erinäisiä mahdollisuuksia “rauhoittaa” perusnäkymää hieman - siinä on ehkä vähän liikaa sarakkeita, avatareja ja informaatiota.

Joku tämän tyyppinen voisi näyttää hyvältä: http://forum.driveonwood.com/

Joo, toi ois ihan selkeen näköinen.

Tuo mainittu foorumi näyttää rauhallisemmalta.

Oliskohan lukemattomien viestien korostusta mahdollista saada vähän paremmin erottuvaksi. Ainakin minun Windows 10 koneella tuo lihavointi on todella lähellä luettua ketjua. Kuva havainnollistaa (kaksi ylintä lukemattomia)

Totta - ei paljon erotu. Desktop näkymässä on pieni numero kuvake joka kertoo lukemattomien määränkin. Sitten tietysti on vielä ylävalikon mahdollisuudet.

Tuosta voisi melkein tehdä virheraportin ettei unohdu.

Mitenkä se jäänpinta-taustakuva, joka eilen oli - onko vain tilapäisesti poissa käytöstä? Mielestäni se sopi erinomaisesti tasapainottamaan, nyt on mielestäni liian vaalea värimaailma.

1 tykkäys

En ollut siihen täysin tyytyväinen. Toisaalta se tasapainottaa, jos käytössä on leveä näyttö (kapeammilla se ei näy). Mutta toisaalta se oli vähän riitasoinnussa yleisen “flat 2D” designin kanssa. En ole vielä keksinyt ultimaattista ratkaisuja.

Piirto-ohjelmalla tehtyjä luonnostelmia otetaan mielellään vastaan.

P.S. Saattaa olla että löysin meille kaverin joka tekisi pientä viilausta tämän foorumin pohjalta: http://forum.driveonwood.com/ . Itse pidän tuosta rauhoitutetusta etusivusta.

Tuon tosiaan tein.

Mun mielestä tuo oli vähä levoton. Ideana kyllä hyvä. Joku vähän harvempi ja haaleampi vastaava vois toimia.

Tein taas pientä hackia väreille:

  • Tekstipohja on jälleen valkoinen (parantaa mainittua lukemattomien erottumista)
  • “Jään pinnan” tilalle laitoin vähän sinertävää sävyä.

Nyt on hyvä, kyllä tää on meidän näkönen palsta. Oranssia vois olla ehkä vähän enemmän mutta sitä on aika vaikea mihinkään enää laittaa…

Tai ehkä vaaleen sinisen sävyt on vähän turhan violettiin meneviä mun makuun. Sekä taustassa että muissa elementeissä (esim viestivalitsin ketjussa). En tiedä, voi olla myös tämä näyttö.

Ozzi, tuo vaikuttaa kyllä näyttösi väribalanssin ongemalta. Minun silmiini ei osu violetin sävyjä ja näyttöin mm. iPad Airin Retina ja Surface Pro 3, joiden kummakin näytöt on hyvin balanssissa. Surfacessa liki graafikkotasoa.

Tein hiuksen hienoja viilauksia väreihin:

  • Tykkäys sydämmen värin pinkistä → oranssiksi. Kaikkihan täällä tykkäävät oranssista.
  • “Toissijainen sininen”, eli tuo vaaleampi jota on mm. linkeissä ja napeissa → aavistuksen entistä tummemmaksi.
  • Varoitusväriksi HIFK:n punainen - oli ennen joku oranssin sävy. Meinasin ensin Ilveksen vihreää, mutta eihän Ilves ole vaarallinen. Ja toisaalta länsimaissa mielletään vihreä positiiviksi ja punainen negatiiviksi. En tosin ole juurikaan varoitusilmoituksia nähnyt, joten ei vielä kokemusta missä HIFK hyppää silmille.

Vielä mietinnässä on korostusvärinä käytetty hailakka keltainen, joka näkyy mm. kun avaatte tuon hampurilaisvalikon ja sohitte sen sisältöä hiirellä.

@ljpp Hampurilaisvalikosta puheenollen… saako sinne nuo tekstit tummemalla sinisellä. Nythän ne ovat hailakan sinisiä.

Just tummensin niitä asteella. Voi vaatia selaimen refreshin ennen kuin muutos näkyy.

Enemmän kun todennäköistä. Työpaikan näyttö on mallia huono. Täytyy katsella paremmalla näytöllä.

Ristiin postausta Logo-ketjusta:

Mitäs mieltä @ozzi on, pitäisikö ottaa Material Designin suuntaviivoja käyttöön täällä? Se on jossain määrin mahdollista pelkällä CSS:llä ja esimerkkejäkin löytyy:
https://meta.discourse.org/t/material-design-for-discourse/28864

@ljpp Toi vois kyllä itseasiassa toimiakin. Tää on tällä hetkellä ehkä jopa vähän liian minimalistinen.

Just itseasiassa koitin itse jos tuohon sisällön ja taustan väliin laittaa varjon, eli nostaa itse sisältöä hieman z akselilla. Oman silmään toimii ehkä paremmin.

Äsh, ei ole tämä CSS kyllä mun juttu.

Sovelsin noita Material Design ohjeita ja sain aikaiseksi ihan mielenkiintoisen kokeilun viestinäkymään:

.topic-body{
  -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  background-color: white;
  margin-top: 10px;
  padding-left: 20px;
  border-radius: 6px;
  padding-right: 20px;
  min-width: 75%;
}

.topic-avatar{
    border-top: 0;
    padding-right: 10px;
}

body {
    background-color: #e5eaef;
}

Ja tältä se näytti:

Mutta nyt jostain syystä aloitussivulla laitojen vaalea sininen levisi myös sisällön taustaväriksi. Mitä mieltä olette tuosta kuvasta – onko parannus vai heikennys?

Tästä linkistä vielä täyden resoluution versio kuvankaappauksesta.

1 tykkäys

Parannus. Tykkään että tuo itse sisältö on vähän korostettu suhteessa taustaan. Onko se sitten koko sisältö, niin kuin tuossa mun kokeilussa, tai jokainen viesti erikseen niin en osaa sanoa. Molemmat toimii.

1 tykkäys