Jak to zrobić ładniej?

0

Jak dotąd nie używałem we frontendzie do tej swojej gierki w zasadzie niczego oprócz czystego JS i CSS... przede wszystkim z tego powodu, by robić coś, a nie utknąć na nauce.

Wydaje mi się, że udało mi się mimo wszystko zrobić minimalistyczny, choć przejrzysty i nie taki znowu brzydki interfejs:

title

Jednak teraz nagle utknąłem. Problem: Wymyśliłem, że z pstwem 1% wygrywający gracz otrzyma jako bonus element fabuły świata gry. Oto więc stosowny baner, jaki zrobiłem:

title

Kliknijcie proszę na ten powyższy obrazek. Wydaje mi się, że jak się go powiększy, to widać wyraźnie, że baner kiepsko się komponuje z resztą strony. W szczególności rażą: paski przewijania stykające się z ramką baneru, nagła zmiana koloru z tła czatboxa (tego po prawej na dole) na biel banera.

Spróbowałem wyraźniej oddzielić baner od głównego panelu, ale rezultaty nadal wydają mi się niezachwycające:

title

Nie za bardzo widzę, jak to naprawić.

Technicznie to wygląda tak, że jest flexbox pionowo na stronie, na górze jest header (ten ciemniejszy, z tytułem Mon i nickiem zalogowanego usera), pod nim baner, na dole panel główny, który sam jest podzielony za pomocą flexboxa na ekran gry (po lewej) i chatboxa (po prawej). Przy czym można powiększyć czatboxa kosztem ekranu gry za pomocą strzałek w ramce.

Jakieś pomysły, jak to zrobić łądniej?

0

Jakieś pomysły, jak to zrobić łądniej?

Yup. Zaprojektować bądź zlecić komuś projekt według specyfikacji (dogadanej konkretnie) i zakodować. Rzeźbienie w stylu "a tutaj dam niebieski, a tam zrobię cień" doprowadzi Cię donikąd.

Wydaje mi się, że udało mi się mimo wszystko zrobić minimalistyczny, choć przejrzysty i nie taki znowu brzydki interfejs:

Uwierz mi, że tylko Ci się wydaje. To nie ma nic wspólnego z interfejsem, przejrzystością oraz czytelnością. I nie piszę tego uszczypliwie. Piszę to mając +10 lat komercyjnego expa w projektowaniu web i mobile. To co zrobiłeś to zlepek wyświetlanych jakichś informacji i patrząc po screenach ja naprawdę nie wiem czemu służy Twój projekt :-)
Tak nawet nie wyglądają dzisiaj prototypy. Więc jeśli chcesz to "coś" gdzieś puścić w świat to musisz zainwestować swój czas w zaprojektowanie tego najpierw, a zakodowanie tego potem.

0

OK, przyjmuję do wiadomości.

Jednak trochę mnie to dziwi, bo nie chciałem robić tego na pałę. Próbowałem wzorować się trochę na play.pokemonshowdown.com, a jest to strona która odniosła sukces.

Nie wiem, czy podobieństwa teraz są widoczne?

title

vs

title

Tytuł górny lewy róg. Logowanie górny prawy róg. Po prawej chat. Po lewej wejście do kolejki ("Battle!" i teambuilder).

Różnica taka, że ja wiem, że zbytniego zmysłu graficznego nie mam, a i play.pokemonshowdown.com wydał mi się być zbyt pstrokaty, więc postarałem się być badziej minimalistyczny. No i mniej elementów dałem, np. tylko jeden chatbox miast całego menu. Newsów nie dałem, ale planuję, choć inaczej.

No i sama rozgrywka:

title

vs

title

Czatbox po prawej, tak samo. Konsolę dałem po lewej, bo tak mi się spodobało. Wybór ruchów na dole. Stworków rysunków brak, bo nie umiem rysować, tak samo avatarów graczy brak, zamiast tego po prostu tekstowe dane.

Natomiast rzeczywiście, do rozrysowania sobie na kartce proporcji wielkości między panelami oraz gdzie co ma być mój projekt się ograniczył. Zresztą te proporcje, jakie rozrysowałem, okazały się wg mnie nieczytelne (np konsola była za wąska i tekst się zawijał co drugie słowo), więc dopasowałem je metodą prób i błędów. Header od początku chciałem mieć ciemniejszy, potem dawałem ramki tak, żeby panele były jakoś oddzielone od siebie.

Rozumiem, że radzisz mi cały ten "projekt" i "design" zaorać, bo to nie jest nawet design, a ja nie wiem jak się projektuje, i od grafiki powinienem trzymać się z dala, tylko ją zoutsourcować? Szczerze pytam.

2

Tylko, ze pokemon to znana od lat marka. Na tym swiecie sa rzeczy, ktore wygladaja jak koszmar ale sa znane, lubiane, grywalne i to wystarczy do sukcesu. Strona, ktora podales mimo wszystko jest kolorowa, ma grafike dyskusyjna bo w 2018 roku wyglada jak z 2003 ale jednak ma.

Twoj projekt to dwa panele, ktore graficznie nie istnieja. Biale tlo i czarny font + chaotyczne wyswietlanie tekstu (pisze z perspektywy kogos kto nie zaglebial sie w projekt). To gra tekstowa? Jesli tak to pasowaloby popracowac nad ulozeniem elementow, fontem, bardziej istotnych tresci wyroznieniem. Fonty maja rozne grubosci, mozna przeciez nadawac im kolory, rozmiary etc.

Pokemony sa jednak kolorowe, a u Ciebie szaro, bialo, czarno. Grywalnosc jest zupelnie inna gdy widzisz chociaz podstawowe elementy graficzne. Skoro u Ciebie sa jakies stworki to powinny zostac jakos zobrazowane. Avatary tez powinny byc. Nie musi to byc top 3D projekt. Gry 2D tez sa grywalne. Koniec koncow gry tekstowe np. typu quiz maja wiecej wspolnego z grafika niz Twoja gra. Tam tez zwraca sie uwage na otoczenie. Mimo, ze calosc gry polega na czytaniu i wyborze dobrej opcji.

Moje zdanie to tylko moje zdanie. Dla mnie projekt do zaorania. Wyglad a'la pokemony zaczyna sie i konczy na etapie ukladu. Czy tego chcesz czy nie tak jest ;-)

Co doradzam? Pytanie jaki jest cel projektu. Jesli nauka pisania gry to szkoda tracic czas/$ na grafike. Jesli chcesz zeby ludzie w to grali i jest szansa na sukces to polecam zainwestowac w grafike mimo wszystko :P

0

a nie możesz wykorzystać css bootstrapa czy materialize?

1

parę prostych tricków, które możesz zastosować, żeby ładniej wyglądało (podobnie do tych screenów)

  • jakiś bezszeryfowy font
  • dodać jakieś kolory, a w zasadzie nie "dodać", tylko wymyślić sobie jakiś temat kolorystyczny, żeby pasowało wszystko. W tym drugim screenie kolory są fajnie wyblakłe, zobacz sobie różnice między normalnym kolorem a wyblakłym: http://jsfiddle.net/y3qszm19/
  • pobawić się border-radius
  • pobawić się z box-shadow (także tym z inset)
  • półprzezroczyste tła (np. background-color: rgba(255, 0, 0, 0.5))
  • pobawić się z text-shadow
  • większy padding albo margin, bo tam gdzie maz "Choose men to send" wszystko najeżdża prawie na siebie
  • No i ogólne rozplanowanie tego wszystko przestrzennie, pod kątem layoutu (także biorąc pod uwagę RWD). Np. na tym twoim screenie strasznie dużo białego miejsca jest w jednym miejscu ekranu, a w drugim miejscu ekranu przyciski niemalże najeżdżają na siebie. Coś jest nie tak.
  • dodać jakieś ikonki, ew. emoji (ale emoji będą wyglądać inaczej na różnych systemach).
  • jakieś tło
  • ogólna "bogatość" interfejs: zobacz tam gdzie masz przyciski po Switch - masz np. przycisk, na nim napis "wishwash", obok ikonka i zielony pasek, nie jest to takie suche

poza tym:

  • te listy pewnie ładniej by wyglądały na moje oko, jakby miały ustawione list-style-type: none oraz jakby co drugi li miał inne tło (to się da w CSS ustawić, :nth-child(odd) ).

No ale zastosowanie tricków też wcale nie spowoduje, że twoja strona będzie ładna. Bo możesz przesadzić i zrobić jakąś pisankę ze strony. Więc też trzeba zachować rozsądne proporcje między miodnością a prostotą. Tym niemniej zawsze można podejść do tego w ten sposób, że najpierw sobie eksperymentujesz, robisz całą stronę. A potem patrzysz stopniowo, co można wywalić, który element niewiele wnosi, a tylko śmieci ci stronę (np. czy naprawdę potrzebuję tego cienia? Nie, wygląda jarmarkowo, wywalam go).

Ew. potem możesz skończyć i tak na czymś, co będzie bardzo proste, a rzeczy po prostu będą lepiej ułożone na ekranie i jakieś proste elementy graficzne typu kolor czy coś. Tym niemniej do prostoty trzeba czasem dojść przez chaos.

0

Uważam, że wizualnie aplikacja kompletnie nie zachęca. Zdecydowanie przyda się w tym projekcie więcej kolorów.
LukeJS podsunął Ci parę fajnych pomysłów, a jeśli czujesz, że nie masz specjalnego wyczucia co do tego jak powinno to wyglądać to może warto poszukać kogoś kto pro bono zechce Ci pomóc. Warto spróbować, jeśli zależy Ci na tym, aby ten projekt został zauważony.

0
Hispano-Suiza napisał(a):

Fonty maja rozne grubosci, mozna przeciez nadawac im kolory, rozmiary etc.

Rozmiary różne są, grubości też chodź rzadko.

Pokemony sa jednak kolorowe, a u Ciebie szaro, bialo, czarno.

To fakt. Wiem, że to słabość. Bałem się po prostu, że jak dam kolory, to nie będę tego umiał zrobić tak, żeby się nie gryzły. Pomyślałem więc, że jeśli pójdę w super minimalizm, to będzie to nieefektowne, ale przynajmniej estetyczne i nie walące po oczach. Jeśli tego mi się nie udało osiągnąć, to już mi się nie podoba.

Grywalnosc jest zupelnie inna gdy widzisz chociaz podstawowe elementy graficzne. Skoro u Ciebie sa jakies stworki to powinny zostac jakos zobrazowane. Avatary tez powinny byc. Nie musi to byc top 3D projekt. Gry 2D tez sa grywalne.

Powinny i są planowane. Tyle że to akurat chciałem zoutsourcować, gdyż jak rzekłem nie umiem rysować. Na razie zostawiłem (i zaznaczyłem wyraźnie) miejsce na nie: "mon backsprite here & resource bars below" itd.

Moje zdanie to tylko moje zdanie. Dla mnie projekt do zaorania. Wyglad a'la pokemony zaczyna sie i konczy na etapie ukladu. Czy tego chcesz czy nie tak jest ;-)

No i właśnie tego nie rozumiem. Czy problem jest w tym, czego nie zrobiłem (np. kolorów czy niżej wspomnianych cieni)? No bo jeżeli jest aż do zaorania, to znaczny, że problemem jest nie tylko to, czego nie zrobiłem, ale przede wszystkim to, co zrobiłem. A zatem, układ jest zły? Co mógłbym lepiej zrobić, robiąc wszystko od 0, niż przerabiając to, co jest?

Co doradzam? Pytanie jaki jest cel projektu. Jesli nauka pisania gry to szkoda tracic czas/$ na grafike. Jesli chcesz zeby ludzie w to grali i jest szansa na sukces to polecam zainwestowac w grafike mimo wszystko :P

Cel projektu? Zrobić coś własnego i przez to uczyć się, jak się takie rzeczy robi; długoterminowo, mieć coś co można by pokazać w CV i/lub wydać. Zarówno w przypadku backendu, jak i frontendu.

Dlatego zoutsourcowanie tego przeczy temu celowi ;/ Z wyjątkiem rysunków, nie jest chyba realistyczne, żebym teraz zaczął uczyć się rysować (mimo, iż in principle bym chciał).

LukeJL napisał(a):
  • jakiś bezszeryfowy font

Myślałem, że się domyślnie wstawia do nagłówków. Widzę, że chyba jednak nie.

  • te listy pewnie ładniej by wyglądały na moje oko, jakby miały ustawione list-style-type: none oraz jakby co drugi li miał inne tło (to się da w CSS ustawić, :nth-child(odd) ).

Tych list ma nie być. To są zaślepki na grafiki, których na razie nie mam. Niemniej, wydawało mi się, że jakoś wyglądają...

  • No i ogólne rozplanowanie tego wszystko przestrzennie, pod kątem layoutu (także biorąc pod uwagę RWD). Np. na tym twoim screenie strasznie dużo białego miejsca jest w jednym miejscu ekranu, a w drugim miejscu ekranu przyciski niemalże najeżdżają na siebie. Coś jest nie tak.

RWD na razie olałem, stwierdziłem że zajmę się tabletami jak już będę miał działające na desktopie. (Z tabletami taki problem, że ja dość intensywnie wykorzystywałem atrybut title do podania info o statystykach stworków, co jaki ruch robi itd; nie mam pomysłu, jak to na ekran dotykowy przenieść.)

Jeśli chodzi o to białe miejsce... Biała plama w lewym dolnym jest celowo, już za 2 tury zapełni się "status messages" z konsoli. Biała plama nad "choose mon to send" to miejsce na grafiki, kiedy / jeśli już będą.

No ale zastosowanie tricków też wcale nie spowoduje, że twoja strona będzie ładna. Bo możesz przesadzić i zrobić jakąś pisankę ze strony. Więc też trzeba zachować rozsądne proporcje między miodnością a prostotą. Tym niemniej zawsze można podejść do tego w ten sposób, że najpierw sobie eksperymentujesz, robisz całą stronę. A potem patrzysz stopniowo, co można wywalić, który element niewiele wnosi, a tylko śmieci ci stronę (np. czy naprawdę potrzebuję tego cienia? Nie, wygląda jarmarkowo, wywalam go).

Ew. potem możesz skończyć i tak na czymś, co będzie bardzo proste, a rzeczy po prostu będą lepiej ułożone na ekranie i jakieś proste elementy graficzne typu kolor czy coś. Tym niemniej do prostoty trzeba czasem dojść przez chaos.

OK. Jak pisałem, nie chciałem się w to bawić, gdyż bałem się, że zrobię to pstrokate i nieczytelne. Skoro jednak do ładnego i harmonijnego układu droga wiedzie przez pstrokaciznę... OK.


Ogólnie dzięki Wam za odpowiedzi. Że ta strona wyglądała w sposób bardzo podstawowy i przez to niezbyt zachęcający, to wiedziałem; ale sądziłem, że jest przyjamniej estetyczna i czytelna, oraz że będzie stanowić bazę do sukcesywnych upiększeń. Że to dno i 5 metrów mułu to nie wiedziałem, ale jeśli tak jest, to lepiej, że się dowiedziałem...

2

No i właśnie tego nie rozumiem. Czy problem jest w tym, czego nie zrobiłem (np. kolorów czy niżej wspomnianych cieni)? No bo jeżeli jest aż do zaorania, to znaczny, że problemem jest nie tylko to, czego nie zrobiłem, ale przede wszystkim to, co zrobiłem. A zatem, układ jest zły? Co mógłbym lepiej zrobić, robiąc wszystko od 0, niż przerabiając to, co jest?

Dla mnie do zaorania w tym sensie, że nie zagrałbym w grę w tej postaci, którą prezentujesz. Dla mnie panuje tam chaos informacyjny. Nawet jeśli chciałeś tekstowo zrobić swój projekt to mogłeś chociaż przemyśleć ułożenie elementów:
title
Mniejszy chaos informacyjny?

Natomiast dorobienie kilku kolorowych itemów doda tej grze na pewno wiele. Masz na szybko namazałem taki mały syfek. Oczywiście w życiu bym czegoś takiego nie wypuścił :-) ale to ma obrazować Tobie różnicę, a nie mi.
title

Cel projektu? Zrobić coś własnego i przez to uczyć się, jak się takie rzeczy robi; długoterminowo, mieć coś co można by pokazać w CV i/lub wydać. Zarówno w przypadku backendu, jak i frontendu.
Dlatego zoutsourcowanie tego przeczy temu celowi ;/ Z wyjątkiem rysunków, nie jest chyba realistyczne, żebym teraz zaczął uczyć się rysować (mimo, iż in principle bym chciał).

Z takim celem dopracowałbym lekko tylko wygląd na czytelniejszy, a bardziej skupił się na mechanice gry i aspektach samej grywalności. Szkoda marnować $ na robienie super grafiki jeśli projekt idzie do szuflady. Chyba, że masz ambicje puszczenia go online i wiesz, że znajdziesz xxxx graczy. To wtedy może to mieć jak najbardziej sens ;-)

0

mogłeś chociaż przemyśleć ułożenie elementów:

Mniejszy chaos informacyjny?

Ano, może i mniejszy. Przyznaję.

Ale jest jeden problem. Mój układ bazował na tej fanowskiej stronie pokemoniastej: gracz, stwór, stwór, gracz, konsola obok. Dzięki temu stwór jest obok stwora i można będzie (kiedy / jeśli będą obrazki) zrobić pole bitwy, tak jak na zdjęciu strony pokemonshowdown.com:

title

Ty proponujesz zamiast tego: Stwór i gracz, konsola po środku, stwór i gracz. Tego się nie da przerobić na pole bitwy, jeśli / kiedy będą obrazki :(

Masz na szybko namazałem taki mały syfek.

OK, rzeczywiście kolorki wiele dają. Dzięki!

Chyba, że masz ambicje puszczenia go online

Rzeczywiście, mam ambicje puszczenia go online prędzej czy później... W założeniach miał być to nieduży projekcik wprawkowy, po to by COŚ zrobić co, choć małe i szału nie robiące, jednak będzie można opublikować i doświadczenie wykorzystać, by zrobić coś większego... albo rozwijać dalej to samo i podnieść jakość do takiego poziomu, by mogło zebrać grupkę userów.

Ale, jak można było się spodziewać, mocno niedoszacowałem pracy wymaganej, by zrobić ten projekt nawet tylko tak, jak był założony.

A w założeniach najpierw miał być tekstowy (żeby było łatwiej i szybciej), potem dopiero chciałem myśleć nad obrazkami.

1 użytkowników online, w tym zalogowanych: 0, gości: 1