search

koduj / koduj.github.io

2 stars 5 forks source link

Szablon strony #3

Closed jakubgoldas closed 9 years ago

jakubgoldas commented 10 years ago

co myślicie? chciałem przygotować animację rozwijania, niestety zbyt duży rozmiar, żeby moja maszynka mogła przetworzyć.

Layout:

layout

Layout rozwinięty

layout-rozwiniety

Mock animacje

przycisk-animacja

mkiedys commented 10 years ago

@jakubgoldas dodałem nagłówki rozdzielające layouty.

jakubgoldas commented 10 years ago

dodam jeszcze, że będziemy korzystać z darmowych czcionek internetowych Edge Web Fonts, ewentualnie Google Fonts

pgle commented 10 years ago

Mam kilka spostrzeżeń związanych z projektem, przy czym towarzyszy im pewien wspólny wniosek: obecny charakter konceptu nie oddaje dobrze wartości, które chcemy promować.

Gdybym miała opisać obraz osobowości marki na podstawie tego projektu, byłaby to osoba dojrzała, elegancka, powściągliwa, amator drukowanej literatury, czytanej w wygodnym fotelu swojego gabinetu.

Osobowość, która wydaje mi się zgodna z ideą projektu jest: młoda (przy czym dorosła, nie dziecko), energiczna, nastawiona na rozwój. Technologia towarzyszy jej na co dzień, przenikając wszystkie dziedziny jej codziennego życia.

Przenosząc tę metaforę na konkretne uwagi:

1. Ograniczmy szeryfy

Projekt wizualnie dominuje czcionka szeryfowa, silnie związana z prasą drukowaną. Szeryfy są z natury bardzo eleganckie, ale czasem trudno jest je przemycić w taki sposób, żeby nie dawały wrażenia "tradycyjności".

2. K jak... książka?

3. Motyw kartek

Zagięte rogi kartek pogłębiają wrażenie, że serwis poświęcony jest książkom/ literaturze. Kartka to zaprzeczenie nowych technologii.

4. Dużo kolorów

Czy przedstawione w projekcie kolory należy traktować jako docelowe, czy w niektórych przypadkach na chwilę obecną służą one jedynie oddzieleniu poszczególnych sekcji?

Mam jeszcze pytanie o to, dlaczego zdecydowałeś się odejść od konceptu układu strony, który w formie mockupu przygotowała Eliza. Moim zdaniem jest on logiczny oraz przejrzysty i stanowi dobrą bazę dla tego projektu.

Na TAK:

1. Kafle

Nadal są w miarę trendy, sprzyjają mobilnym platformom.

2. Zdjęcia w tle kafelków

Przy czym, ograniczyłabym się nieco z ich ilością- szczególnie tam, gdzie występuje więcej tekstu niż tylko nagłówek/tytuł sekcji. Niejednorodne tło nie sprzyja czytaniu tekstu.

3. Szczegółowy widok kategorii

Podoba mi się sposób, w jaki przedstawione są poszczególne propozycje w ramach kategorii "nauka w grupie". Brakuje mi jednak wyraźnego zaznaczenia, w jaki sposób wrócić do widoku, w którym użytkownik może wybrać, czy może jednak nie chce się uczyć w grupie, a samodzielnie.

4. Animacja buttonów

Pewnie umrę, próbując dociec jak ją zakodować, ale nawet cieszę się na myśl o tym wyzwaniu. :)

Co o tym sądzisz, Kuba? Chętnie skonfrontuję też swoje spostrzeżenia ze zdaniem innych osób.

jakubgoldas commented 10 years ago

Słuszne uwagi, spieszę z odpowiedzią.

Przede wszystkim, jest to absolutny mock, szkic. Wszelkie szczegóły są niedopracowane. Gołym okiem widać, że ikonki są nierówne itp.

  1. SZERYFY - nie jestem w posiadaniu czcionki, którą miałem w zamyśle. Istnieją szeryfowe fonty, które nie przywodzą na myśl tradycyjności, druku, a wyłącznie elegancję w nowoczesnym wydaniu. Użyłem innych w projekcie wyłącznie ze względu na brak tych właściwych, a poszukiwaniom odpowiednich czcionek zawsze poświęcam mnóstwo czasu, którego w ostatnim tygodniu nie miałem. Uważam, że szeryfowe nagłówki to dobra rzecz.
  2. Jeśli zaś chodzi o barwy, kierowałem się tutaj tym, co ustaliliśmy na ostatnim spotkaniu. Moje pierwsze szkice strony zawierają podkreślone frazy "KOLORY". Oczywiście same odcienie to kwestia dyskusyjna, nieszczególnie się nad nimi zastanawiałem. Również, gdzie to będzie potrzebne, zmniejszymy nasycenie tła, w nowej wersji projektu niektóre miejsca wcale nie będą zawierały zdjęć w tle.
  3. Funkcjonalne przycisku typu "powrót", "następna karta" itp. oczywiście będą. Jak dobrze, że jest spec od user experience. Będą, myślę, dość intuicyjnie umieszczone na górze i u dołu kart.
  4. A propos motywu kartek, miałem na myśli raczej sticky notes, które nieodzownie kojarzą mi się z nauką i są dość popularnym motywem w technologiach (można się z nimi spotkać w wielu programach, na witrynach, najczęściej przybierają formę wyskakujących okienek). Książki nie przyszły mi do głowy wtedy, ani nie przychodzą teraz, kiedy patrzę na szablon, zapoznawszy się z Twoją uwagą. Może to skojarzenie z książkami to połączony skutek tych wszystkich czynników?
  5. Wreszcie ostatnia kwestia - logo - przyznaję Ci rację, może wyglądać zbyt tradycyjnie dla kogoś, kto nie siedzi w mojej głowie, bowiem nie powiedziałem o bardzo istotnej rzeczy!, jeśli nie w ogóle najważniejszej! Podstawowym logotypem jest litera "k" w kwadratowym nawiasie. W gruncie rzeczy, na tym logotyp się kończy. Jest on jednak na tyle uniwersalny, że postanowiłem go urozmaicić SZEREGIEM RÓŻNYCH ANIMACJI. Pech chciał, że zaprezentowałem Wam jedynie tę z książką. Kolejnym wariantem rozwiniętego logotypu byłaby macierz, co zaproponowali na spotkaniu koledzy. Mam w zanadrzu jeszcze kilka propozycji, które chciałem poruszyć na spotkaniu. Jest to jednak kwestia drugorzędna. Innymi słowy, prosta w założeniach konstrukcja nawiasu ma być klamrą dla wielu różnorodnych kompozycji, używanych być może do różnych podprojektów i inicjatyw? To trochę metafora programowania, z pozoru surowa, kryje multum niesamowitych możliwości, wystarczy najechać myszką, tyle różnych rzeczy wpisanych w prostą klamrę. W moim mniemaniu takie, lub podobne, urozmaicenie jest wręcz konieczne, jeśli decydujemy się na tak banalny koncept. Tak więc, o ile mam nadzieję, że rozwiałem Twoje wątpliwości co do rozwiniętego wariantu logotypu, o tyle przyznaję, dobrym pomysłem mogłoby być uproszczenie litery. Postaram się znaleźć ciekawy, bezszeryfowy font, który lepiej sprawdzi się w tej roli.
  6. Jeśli zaś chodzi o ogólny design, kierowałem się kilkoma przesłankami:
  7. uniwersalność (strona jest przecież kierowana również do rodziców i nauczycieli, stąd powściągliwie dozowałem energię i szaleństwo),
  8. jak najmniejsza surowość, raczej pastelowe kolory, bez siatek i geometrycznych wzorów,
  9. prostota i przejrzystość, takie w końcu jest programowanie.

W którym miejscu odbiegłem od szkicu? Czy masz na myśli tylko trzy karty u góry? Jest to moja propozycja rozwiązania problemu pierwszego użytkownika, który może nie do końca wiedzieć, gdzie trafił. Czy kurs online, czy repozytorium kodu, czy encyklopedia, a może strona fundacji lub szkoły? Poruszaliśmy tę kwestię na spotkaniu.

Starałem się odpowiedzieć na wszystko, choć odrobinę chaotycznie i nie w kolejności. Bardzo dziękuję za naprawdę super feedback!

elizak commented 10 years ago

Podsumując nasze spotkanie:

Umówiliśmy się wstępnie na piątek z końcem designu. Ja bedę z Jakubem w kontakcie i na bieżąco bedziemy wrzucać projekty do Waszej oceny.

jakubgoldas commented 10 years ago

layout2- -odzyskano layout2 odzyskano layout2 odzyskano2

mkiedys commented 10 years ago

Dobre, podoba mi się!

vash000 commented 10 years ago

Wielkie dzieki za przygotowanie tych przykładów.

Sądze, że jesteśmy już bardzo blisko tego i powoli sami wiemy czego chcemy.

Pierwszy:

Kolory zdecydowanie na plus, delitakne. Do tego się dopełniają (są przeciwstawne na kole) Nagłówek mocno zakreśla cześć nawigacyjną strony. A czarna lina na górze fajnie łagodzi.

Ciekawe wykorzystanie ciena w motywie loga. Cien bym dał jako efekt po najechaniu kursorem. Tak aby była zachowana spójnośc. Fajnie ze wszystko jest zrobione jedną czcionką.

Jeśli chodzi o przykłada animacji, to cienie nie sa konsekwetne. Sądze, że prosty cień kafla (u dołu i z prawej) będzie wystarczającym efektem, Jego zwiększanie jak i cien elemetów na nim sie znajdujących jest już za dużo. Jeśli jenak miałbym to uatrakcyjnic to dodałbym animację samej grafiki. Na przykąład mogłby sie ruszac wskazówki zegara lub ludzie mobli sie powoli pojawiacpo tym jak najedziemy myszą. Minusem takiego rozwiazania jest konsekwencja w późnijeszych elementach. Ale zdecydowanie dodaje to atrakcyjności.

Nie jestem też przekonany do tak duzych odstępów pomiędzy blokami ani wyśrodkowania nagłowka.

+1

Drugi:

Dobrane kolory niestety są zbyt jaskrawe i dominują nad stroną brak paska na gorze powoduje wrażenie ze elemty zawieszone sa w nienaturalnej prózni

Zmniejszyłbym nasycenie kolorów (czarnego w szary też) i wtedy ponownie ocenił

Przykładowe kolory do wykorzystania FF531D E80C2A F300FF 6C0CE8 3F4EFF lub F9FF66, E8994F, FF64E3, 4F74E8, 57FF9C -1

Trzeci: Kolory kafli tutaj wygladaja juz lepiej, ale ten zielony to jeszcze nie to. W przypadku tych kolorów gdzie wartośc jednej z barw jest ustalona na zero. troche trudno ustalic jakis fajny komprmis dla oka. Zwieksznie zawartosci niebieskiego dla zielonego i zieleni dla fioletów troche zblize te kolory do siebie

-1

Jeśłi można to prosze o jakiś layout ze stopką.

vash000 commented 10 years ago

Idą za złotą radą Kuby jakby ktoś chciał podesłac swoje sugestie to

Aplikacja online https://kuler.adobe.com/

Można z niej kopiowac całe linki tak aby nie przepisywać recznie kolorów.

Na szybko teoria http://mansfeld.pl/grafika/dobieranie-kolorow-na-strone/ (nie czytalem ale tak na rzut oka widac;p)

Kurs o kolorach w pptx http://www.czn.uj.edu.pl/moodle/mod/resource/view.php?id=11688

jakubgoldas commented 10 years ago

Nie, nie! Kolory na dwóch ostatnich projektach to jakaś dziwna kompresja kolorów, albo zmiana z CMYKa na RGB, to wina Githuba, bo na moim komputerku wszystko pięknie wygląda. Za chwileczkę wrzucę projekt do repozytorium.

jakubgoldas commented 10 years ago

Odniosę się jeszcze tylko na szybko do Twoich uwag.

Cień pod najechanym kafelkiem nie może być prosty, wygląda nienaturalnie i dziwacznie, próbowałem. Mogę zaraz pokazać, jak to wygląda. Mnie bardzo się nie podoba i choć to był moja pierwsza próba, od razu porzuciłem i zrozumiałem, czemu na Google Design również tego nie ma (wszędzie używają cieni flatdesignowych, ale kafelki rzucają cień wyglądający realnie).

jakubgoldas commented 10 years ago

Słuchajcie, to jednak wina mojego photoshopa, nie wiem, jak przywrócić domyślne ustawienia kolorów, kiedyś miałem ten sam problem, nie pamiętam, jak go rozwiązałem. Zajmę się tym jutro. Tymczasem muszą was zadowolić projekty z jaskrawymi kolorami.

vash000 commented 10 years ago

Ok rozumiem nieporozumienie i juz klaruje.

Ja miałem na myśli zrezygnowanie z efektu powiększenia z cieniem na rzecz zastosowania tylko cienia.

W mojej subiektywnej ocenie jest to estetycznie ok.

A ogólnie jest to też łatwiejsze do wykonania. On 22/08/2014 12:24 AM, "jakubgoldas" notifications@github.com wrote:

Odniosę się jeszcze tylko na szybko do Twoich uwag.

Cień pod najechanym kafelkiem nie może być prosty, wygląda nienaturalnie i dziwacznie, próbowałem. Mogę zaraz pokazać, jak to wygląda. Mnie bardzo się nie podoba i choć to był moja pierwsza próba, od razu porzuciłem i zrozumiałem, czemu na Google Design również tego nie ma (wszędzie używają cieni flatdesignowych, ale kafelki rzucają cień wyglądający realnie).

— Reply to this email directly or view it on GitHub https://github.com/koduj/koduj.github.io/issues/3#issuecomment-52993478.

jakubgoldas commented 10 years ago

Za moment w repozytorium znajdzie się garstka grafik, a konkretnie przycisków do przewijania oraz zamykania wraz z całym projektem homepage'a i rozwiniętych kafli.

Nie przygotowałem projektu rozwiniętych kafli "dlaczego warto", bo będą zawierały jedynie tekst (proponuję w kilku kolumnach, i tego trzymajmy się na całej stronie). Również wygląd pozostałych płacht z treścią jest zbliżony, dlatego nie przygotowywałem każdej osobno.

Jedynym sposobem na "ujednolicenie" kompozycji było wprowadzenie alternatywy dla kafli - kwadratowych chmurek tekstu, podobnych do tych na karcie "ucz się". Motyw powtarza się na całej stronie we wszystkich miejscach, więc jest to dość spójna kompozycja, moim zdaniem.

vash000 commented 10 years ago

Wielkie dzięki za wysiłek.

Mam nadzieje ze zdrowie u Ciebie juz lepiej.

Teraz pociągniemy temat dalej, zatem spokojnie się możesz skupić na projektach.

Jeszcze raz dzięki i jesteśmy w kontakcie. On 28/08/2014 11:05 PM, "jakubgoldas" notifications@github.com wrote:

Za moment w repozytorium znajdzie się garstka grafik, a konkretnie przycisków do przewijania oraz zamykania wraz z całym projektem homepage'a i rozwiniętych kafli.

Nie przygotowałem projektu rozwiniętych kafli "dlaczego warto", bo będą zawierały jedynie tekst (proponuję w kilku kolumnach, i tego trzymajmy się na całej stronie). Również wygląd pozostałych płacht z treścią jest zbliżony, dlatego nie przygotowywałem każdej osobno.

Jedynym sposobem na "ujednolicenie" kompozycji było wprowadzenie alternatywy dla kafli - kwadratowych chmurek tekstu, podobnych do tych na karcie "ucz się". Motyw powtarza się na całej stronie we wszystkich miejscach, więc jest to dość spójna kompozycja, moim zdaniem.

— Reply to this email directly or view it on GitHub https://github.com/koduj/koduj.github.io/issues/3#issuecomment-53799001.

elizak commented 10 years ago

Dołączam się do podziękowań! Daj znać jak będziesz miał czas by jeszcze wrócić do tematu infografik. Będziemy Cię informować jak strona ruszy, byś sobie dopisał do portfolio!

jakubgoldas commented 10 years ago

Bardzo dziękuję, ale muszę Was powściągnąć, kochani! To jeszcze nie koniec. Na pewno będziecie mieli sporo uwag i jutro pojawi się "ostateczniejsza" wersja layoutu.

Również, jutro w nocy wrzucę wszystkie ikonki, bo wciąż nie miałem czasu ich wybrać i przygotować. Wybaczcie :(

https://github.com/koduj/koduj.github.io/commit/f81f18a816b2461d117f7162998c84303afd882a tutaj link. jest w gałęzi alpha. myślałem, że w ten sposób tworzy się pull request. nie wyszło :D

vash000 commented 10 years ago

Na repo w masterze pojawiły się nowy layouty. Szczegóły będą omówione w środę.

Główne zmiany, to zrezygnowanie z opisowego nagłówka w sekcjach na rzecz prostych jedno liniowych zdań.