Dlaczego ludzie powtarzają mi, że moja witryna wygląda okropnie?

Stworzyłem stronę internetową, a ostatnio szukałem pracy. Praktycznie wszyscy ankieterzy, po szybkim spojrzeniu na to, powiedzieli mi, że moja strona została okropnie zaprojektowana (ale podobała jej się koncepcja). Powinienem wspomnieć, że jestem inżynierem oprogramowania, ale naprawdę staram się również dobrze zaprojektować część projektową. Próbowałem go przeprojektować, ale nie mam pojęcia, co można zmienić.

Oto jak teraz wygląda:

Byłbym wdzięczny za wszelkie wskazówki dotyczące mojej witryny lub ogólnie, jak poprawić jej projekt (odwiedziłem kilka stron, które wyjaśniają, jak projektować witryny, ale to nie pomaga :)).

Edycja 1 : Jak powiedziałem, ludzie mają na to złe wrażenie, po prostu na to patrzą, nawet zanim przedstawię funkcjonalność. To sprawia, że ​​myślę, że coś jest nie tak z wybranymi kolorami lub układem. Pomyślałem, że projekt strony może być pomocny dla projektantów, podobnie jak konkretna historia jest pouczająca dla studentów literatury, a konkretne algorytmy są pomocne dla studentów oprogramowania. Dzięki.

Uwaga dodatkowa: Funkcjonalność: Jeśli ma to znaczenie, oto, co strona ma zamiar osiągnąć (bardzo krótko): użytkownicy mogą dodawać tematy, a do każdego tematu dodawać pytania wraz z odpowiedziami . Witryna tworzy „testy” i „quizy”, aby użytkownicy mogli brać i porównywać swoje wyniki

Edycja 2 : Oto kolejny ekran drukowania:

Edycja 3 : Żeby było jasne, żaden z tych zrzutów ekranu nie jest moją stroną docelową. Są to strony o określonej tematyce.

Przede wszystkim chcę podkreślić, że wszystko w tej odpowiedzi jest tylko MHO, a nie jakąś uniwersalną prawdą;).

Jako inżynier oprogramowania wiesz, jak ważną rzeczą w każdym projekcie jest jasna i dobrze zdefiniowana struktura - kolejność. Prawie to samo dotyczy sztuki „wizualnej” i designu. Uważam projektowanie za „enkapsulację wizualną”. Projektant zna strukturę informacji, którą chce przekazać odbiorcom docelowym. Na przykład: projektuje książkę. Wie, że ta książka jest podzielona na rozdziały, a każdy rozdział na podrozdziały. Wie, że główna sprawa jest opatrzona komentarzami (notatki na marginesie, przypisy, sidenoty). Teraz musi użyć swojego „arsenału”, aby ta struktura była „widoczna”. Może użyć jednego rozmiaru i kształtu czcionki i wypełnić wszystkie kolejne strony kroplami glifów, ale oznaczałoby to, że czytelnik musiałby czytać, interpretować i rozumieć wszystko, aby poznać zawartą strukturę informacji. Projektant może również „zasugerować” czytelnikowi znaczenie / poziom różnych informacji. Jedną z sztuczek jest użycie rozmiaru czcionki, aby pokazać gradację prezentowanych „danych”. Jeśli tak się stanie, czytelnik nie będzie musiał czytać (nie mówiąc już o interpretacji) tekstu, aby rozróżnić główną kwestię od np. Przypisów. Znaczenie i wzajemne „położenie” informacji jest „opisywane” wizualnie. Czytelnik jest w stanie łatwo „zdekapsułować” informacje. Można go również postrzegać jako rodzaj procesu serializacji / deserializacji zachodzącej w domenie wizualnej (informacje abstrakcyjne są przekazywane do przestrzeni „wizualnej”). To proste uproszczenie, ale myślę, że na początek jest wystarczająco dobre. Jeśli tak się stanie, czytelnik nie będzie musiał czytać (nie mówiąc już o interpretacji) tekstu, aby rozróżnić główną kwestię od np. Przypisów. Znaczenie i wzajemne „położenie” informacji jest „opisywane” wizualnie. Czytelnik jest w stanie łatwo „zdekapsułować” informacje. Można go również postrzegać jako rodzaj procesu serializacji / deserializacji zachodzącej w domenie wizualnej (informacje abstrakcyjne są przekazywane do przestrzeni „wizualnej”). To proste uproszczenie, ale myślę, że na początek jest wystarczająco dobre. Jeśli tak się stanie, czytelnik nie będzie musiał czytać (nie mówiąc już o interpretacji) tekstu, aby rozróżnić główną kwestię od np. Przypisów. Znaczenie i wzajemne „położenie” informacji jest „opisywane” wizualnie. Czytelnik jest w stanie łatwo „zdekapsułować” informacje. Można go również postrzegać jako rodzaj procesu serializacji / deserializacji zachodzącej w domenie wizualnej (informacje abstrakcyjne są przekazywane do przestrzeni „wizualnej”). To proste uproszczenie, ale myślę, że na początek jest wystarczająco dobre. Można go również postrzegać jako rodzaj procesu serializacji / deserializacji zachodzącej w domenie wizualnej (informacje abstrakcyjne są przekazywane do przestrzeni „wizualnej”). To proste uproszczenie, ale myślę, że na początek jest wystarczająco dobre. Można go również postrzegać jako rodzaj procesu serializacji / deserializacji zachodzącej w domenie wizualnej (informacje abstrakcyjne są przekazywane do przestrzeni „wizualnej”). To proste uproszczenie, ale myślę, że na początek jest wystarczająco dobre.

Teraz, jeśli chodzi o twój projekt. Ja osobiście nie wiem od czego zacząć. Muszę to wszystko przeczytać, wszystko zrozumieć, wszystko przemyśleć, a potem uporządkować wszystko w kolejności, którą uważam za właściwą. To dużo pracy dla mnie jako czytelnika. Trudno jednoznacznie określić, co jest najważniejsze, a co najmniej ważne. Nawet kiedy poświęcę trochę czasu na zapoznanie się z treścią, wciąż nie ma wielu „punktów orientacyjnych” wizualnych, które pomagają mi znaleźć drogę do pewnych konkretnych danych. Pomyśl: kiedy zostawiasz samochód na parkingu, szukasz jakiegoś „przełomowego” elementu, który pomoże ci zapamiętaćgdzie jest twój samochód. Spróbuj pomyśleć przez chwilę, w jaki sposób korzystasz ze stron internetowych, jak możesz zapamiętać, gdzie najczęściej używasz opcji / linków. Czy nie chodzi o to, że szukasz linku jako „drugiego kwadratu po prawej stronie od tego czerwonego logo w górnej części strony”? Bez czytania - tylko zapamiętywanie obrazu / lokalizacji.

Myślę, że największym problemem tutaj nie jest „brzydota” - myślę, że to brak gradacji ważności. Postaraj się „poprowadzić” użytkownika witryny za pomocą twoich danych. Co chcesz, żeby zobaczył pierwszy? Dokąd się udać? W ten sposób tworzysz „przepływ odczytu” / „przepływ pracy”. Indukujesz (może być może?;)) Określoną ścieżkę, którą podążą twoi czytelnicy. Jeśli istnieje kilka tras, postaraj się, aby były jak najbardziej oddzielne (np. „Ścieżka” przez menu - coś w rodzaju spisu treści / przeglądu głównego / opisu struktury, „ścieżka” poprzez formularz logowania itp. ). Myślę, że jeśli to naprawisz, Twój projekt zdecydowanie się poprawi. Może nie stanie się „piękny” od razu, ale przynajmniej będzie bardziej dostępny i zrozumiały, a przez to, jako efekt uboczny, bardziej przyjemny estetycznie.

Mam nadzieję, że ma to dla ciebie jakiś sens :).

Kilka rzeczy, które zauważam, że szczególnie nie lubię to:

• To bardziej przypomina część „zaplecza” lub „administratora” strony internetowej, szczególnie jakąś formę systemu zarządzania treścią, a nie „frontonu” lub tego, co widzą ludzie. W szczególności przychodzi mi na myśl PhpMyAdmin.
• Niespójność w używanych kolorach. Logo (które wydaje mi się trochę zbyt ciasne) ma już kilka kolorów, więc te kolory można wykorzystać do opracowania schematu kolorów dla witryny. Ten schemat kolorów powinien mieć zastosowanie do takich elementów, jak pasmowanie tabel, kolor linków itp.
• Istnieje zbyt wiele kontrastowych elementów wizualnych. Zwykle opowiadam się za większą prostotą i standaryzacją w projektowaniu. Jednak na tym zrzucie ekranu widzimy:
  • Pudełko „Everything” jest twardym prostokątnym pudełkiem.
  • Nawigacja na pasku bocznym wykorzystuje zaokrąglone rogi.
  • Podtemat wykorzystuje gradient radialny.
  • Żadne z pól nie ma wystarczającego „wypełnienia”: zwróć uwagę na to, jak ciasno pojawiają się słowa w linkach „podtematów”; wyglądałyby znacznie lepiej, gdyby wokół nich było trochę miejsca.

Następnie zdecydowanie przeczytaj uważnie odpowiedź z @thebodzio , ponieważ jest ona bardzo dokładna: nowy odwiedzający stronę miałby trudności z ustaleniem, gdzie najpierw szukać, i jest to na ogół oznaką „złego” projektu.

Jest tu kilka dobrych odpowiedzi, więc przedstawię kilka konkretnych przykładów. Dla mnie podstawowa struktura strony wygląda przyzwoicie; jak powiedzieli inni, trójkolumnowy układ od lat jest podstawowym elementem projektowania stron internetowych. Większość problemów dotyczy projektowania graficznego.

To powiedziawszy, względne znaczenie „Podtematów” wydaje się dziwne:

• Czy tytuł powinien być czymś w rodzaju „Podtematów”?

• To jest po prawej stronie i wygląda na ważniejsze niż nagłówek tematu; być może mógłbyś włączyć go do głównego tematu, aby był bardziej podrzędny?

• Ciężar nagłówka „Tematy podrzędne” sprawia, że ​​wydaje się on cięższy (ważniejszy) niż bułka tarta tematu.

W przypadku projektowania graficznego możesz zadać sobie pytanie o podstawowe zasady dotyczące każdego elementu strony:

• Kontrast : elementy, które nie są tym samym, powinny wyglądać na tyle inaczej, aby użytkownicy mogli je od razu odróżnić.

• Powtórzenie : Wzory tylko wyglądają dobrze, jeśli rzeczy, które mają taki sam wygląd jak to. Innymi słowy, dąż do spójności. Może to przybierać postać wszystkich teł o tym samym nasyceniu i jasności, ale różniących się odcieniem lub wykorzystujących gradienty we wszystkich nagłówkach (lub nie wykorzystujących żadnych gradientów). Na przykład:

  • tło „Tematy podrzędne” jest jedynym tłem z gradientem (przycisk jest inną rzeczą, więc umieszczenie na nim gradientu sprawia, że ​​wygląda inaczej, zapewniając kontrast w grze)

  • podświetlenie nawigacji po lewej stronie ma zaokrąglone rogi, podczas gdy większość innych elementów ma ostre, kwadratowe rogi

  • kolor „Preferencji quizu” (niepoprawnie napisany) nie pojawia się w logo, w którym inaczej próbujesz kolorów; postaraj się uzyskać taki sam odcień elementów strony, jak kolory w książce

(W rzeczywistości istnieje prosty sposób, aby upewnić się, że kolory pasują do siebie: zacznij od jednego koloru, a następnie zmień tylko jeden odcień, nasycenie lub jasność. Wszystkie kolory generowane tą metodą powinny razem dobrze wyglądać.)

• Wyrównanie : wyrównania sprawiają, że elementy łączą się w całość, zamiast wyglądać na rozproszone i niespójne. Na przykład:

  • pole „Pamiętaj mnie” jest niższe niż drugi tekst obok niego

  • „Preferencje quizu” znajdują się po prawej stronie niż bułka tarta powyżej

  • preferencje są wyśrodkowane, podczas gdy większość pozostałych tekstów jest wyrównana do lewej

• Bliskość : zbliżenie obiektów do siebie sprawia, że ​​są one pogrupowane w umyśle użytkownika, ale pozostawienie zbyt małej przestrzeni wokół obiektów sprawia, że ​​są ciasne i trudno je postrzegać jako pojedyncze przedmioty. Na przykład:

  • wokół twoich tematów nie ma miejsca na bułkę tartą lub podtematy (według mnie jest to jedna z najczęstszych funkcji, która mówi mi, że projekt graficzny nie został w pełni rozwinięty)

  • odstępy między akapitami poniżej głównego nagłówka treści są niespójne

Istnieje wiele innych zasad projektowania w Internecie, ale są to cztery najważniejsze.

Myślę, że głównym problemem związanym z projektowaniem witryny jest nie tyle projektowanie graficzne, co projektowanie interfejsu użytkownika . W szczególności, kiedy patrzę na twoje zrzuty ekranu powyżej, pytanie, które sobie zadaję, nie brzmi: „ Fajnie, co powinienem najpierw spróbować? ”, Ale „ Co to do cholery jest i co mam z tym zrobić? ”.

Jest to powszechny problem z witrynami internetowymi i innymi interfejsami użytkownika zaprojektowanymi przez inżynierów (lub innych ekspertów w dziedzinie): wiedzą już, jak ma być używany system, więc dla nich wszystko jest w porządku, o ile wszystkie potrzebne funkcje są wygodnie dostępne . Niestety, często powoduje to, że wszystkie funkcje są równie widoczne i dostępne, dając nowemu użytkownikowi bardzo mało wskazówek, od czego zacząć.

Projektowanie graficzne ma tutaj pewien wpływ, o ile zły projekt graficzny może wprowadzać w błąd każdy interfejs użytkownika, natomiast dobra grafika może ulepszyć interfejs użytkownika, wyjaśniając znaczenie i relacje różnych elementów interfejsu i przyciągając uwagę użytkownika do najważniejszych elementów. Ale zasadniczo problem dotyczy bardziej tego, co przedstawić użytkownikowi i jak go ustrukturyzować, niż tego, jak ładnie wygląda.

OK, przejdźmy do bardziej szczegółowych. Moja pierwsza rada to: uprość! Możesz czerpać inspirację z oryginalnego projektu pierwszej strony Google , który w zasadzie zawierał trzy elementy: logo, pole wyszukiwania i dwa przyciski (i można argumentować, że drugi przycisk był niepotrzebnym bałaganem). Aha, i kilka linków do innych stron z większą ilością elementów - które zostały wyraźnie oznaczone jako drugorzędne, ponieważ znajdują się niżej, małą czcionką i / lub szarym - i informację o prawach autorskich, widocznie dodaną jako subtelna wskazówka do użytkownicy, że strona naprawdę się tam kończyła.

Lub spójrz na Doodle , kolejną firmę o makaronowej nazwie i prostym, ale efektownym projekcie na pierwszej stronie. Dla wygody zrobiłem zrzut ekranu ich pierwszej strony i dodałem kilka czerwonych bazgrołów na górze:

Doodle jest całkiem dobrą witryną do porównania z twoją, ponieważ ich strona, podobnie jak twoja, jest zasadniczo ramą umożliwiającą użytkownikom projektowanie własnych treści (quizy dla ciebie, harmonogramy wydarzeń dla nich) i zapraszanie innych użytkowników do interakcji z nią. Duża różnica polega na tym, że w przeciwieństwie do twojego projektu, ludzie z Doodle spędzają dużo wysiłku, łagodząc swoich użytkowników delikatnie w interfejsie, zamiast po prostu wrzucając ich do głębokiego końca basenu i czekając, aż opadną lub popłyną.

Patrząc na ich pierwszą stronę, zwłaszcza bez moich bazgrołów, oczywiste jest, jak mało jest w niej - szczególnie nieistotnych - rzeczy. Jasne, na dole strony jest mnóstwo małych notatek i linków, ale to wszystko „poniżej zakładki” i coś, co nowi użytkownicy po prostu zignorują. Drugą najbardziej widoczną rzeczą, dużymi przyjaznymi literami w miejscu, w którym użytkownik prawdopodobnie będzie wyglądał pierwszy, jest ośmiobokowy (!) Wyraz objaśniający, o czym jest strona. Najbardziej widoczne jest to duży graficzny pokazujący, w prostych obrazów, głównych etapów przepływu pracy, dzięki czemu wszystkie wyglądają łatwe i przyjemne. Między nimi znajduje się duży przycisk zachęcający użytkownika do kliknięcia i rozpoczęcia pracy.

W górnej części strony znajdują się tylko cztery elementy, które można kliknąć (oprócz logo, które można kliknąć - tak jak użytkownicy tego oczekują - ale po prostu przeniesie Cię z powrotem na pierwszą stronę): dwa linki do pierwszego kroku w kreatorze planowania zdarzeń od jednego do konserwatywnego przykładu dla użytkowników, którzy nie mają wystarczającej pewności, aby wskoczyć od razu, i jeden dyskretny link w prawym górnym rogu, który otwiera wyskakujące okno logowania dla ustalonych użytkowników. To wszystko.

A co z twoją witryną? Pierwszą rzeczą na twoim zrzucie ekranu, która wyskakuje dla mnie jako coś, co może być warte obejrzenia, są zielone nagłówki, które są co najmniej krótkie, dużymi literami i pośrodku czegoś, co wygląda jak „obszar treści”. Niestety, nie ma tam nic ciekawego - sekcja „Informacje o temacie” zawiera tylko trywialne metadane, które powinny być drukowane małym drukiem w rogu, sekcja „Tematy podrzędne” zawiera kilka linków (do innych podobnych stron?), Które się pojawiają aby powielić je w prawym górnym rogu, a sekcja „Zasoby” jest po prostu pusta. Poza tym, nawet po przeczytaniu tego wszystkiego, wciąż nie mam pojęcia, o czym jest strona ani co mogę z nią zrobić.

Więc, co można zrobić z Twojej strony? Mówisz, że mogę tworzyć i rozwiązywać quizy, co powiesz na umieszczenie dużych i atrakcyjnych linków / przycisków na pierwszej stronie z napisem „ Weź quiz ” i „ Utwórz quiz ”? (Ta pierwsza powinna być bardziej widoczna, ponieważ nowy użytkownik prawdopodobnie najprawdopodobniej podejmie quiz, niż go stworzy, ale umieszczenie drugiej na pierwszej stronie przynajmniej pozwoli użytkownikom wiedzieć, że oni też mogą to zrobić.) krótkie wyjaśnienie - od kilku słów do krótkiego akapitu - na czym polega Twoja strona. (To może być również dobre miejsce na umieszczenie linku „czytaj więcej”).

Lub patrząc na to z drugiej strony, co możesz sobie pozwolić na utratę z bieżącej strony? Cóż, naprawdę powiedziałbym „większość”, ale oczywistą rzeczą, która podskakuje (oprócz zrzutu metadanych) jest formularz logowania na górze. Jasne, dobrze jest zapewnić ustalonym użytkownikom łatwy sposób logowania, ale to nie znaczy, że musisz pokazać formularz logowania na każdej stronie. Zamiast tego zrób to tak, jak Doodle i po prostu otwórz wyskakujący formularz logowania dostępny za pośrednictwem linku. (W przypadku użytkowników z wyłączonym JavaScriptem dobrym pomysłem jest również utworzenie osobnej strony logowania jako zastępczego miejsca docelowego linku).

Jest też kilka innych rzeczy, które możesz stracić: na przykład, jako nowy i niezarejestrowany użytkownik, dlaczego widzę coś, co wygląda jak link „usuń”? Czy naprawdę mogę usunąć stronę? Jeśli tak, dlaczego ? Jeśli nie, dlaczego jest tam link?

Podobnie notatka „(703 Dostępne pytania)” jest bezcelową rozrywką, ponieważ wygląda jak element interfejsu. Jeśli chcesz zaimponować odwiedzającym głębią swojej witryny, umieść ją tam, gdzie należy: w odpowiednim imponującym wyglądzie w obszarze zawartości. („ Mamy już dostępnych 703 pytań, a więcej nadchodzi! ”)

Na koniec powinienem zauważyć, że wszystko jest względne. Na przykład TV Tropes ma okropny interfejs użytkownika (bardzo podobny do twojego), ale to nie ma znaczenia, ponieważ nadrabiają go mnóstwem doskonałych i gęsto powiązanych treści, tak że większość nowych użytkowników wygrała ” w ogóle muszę dotykać interfejsu nawigacyjnego. W rzeczywistości jest to dość powszechne w przypadku witryn wiki; Wikipedia nie jest tak naprawdę lepsza. Problem polega jednak na tym, że musisz mieć taki ładunek treści (lub bazę użytkowników zaangażowaną w jego tworzenie), zanim ten efekt zacznie działać.

Twój „projekt” byłby fajny… w 1995 roku. W rzeczywistości jest przestarzały. Jest to projekt, który inżynierowie zawsze wymyślają :-) Najłatwiejszą rzeczą, jaką możesz zrobić, to użyć frameworka css, np. Twitter Bootstrap , Zurb , cokolwiek . Framework pomaga chronić Cię przed własną „kreatywnością” ;-)

Z punktu widzenia układu witryny nie ma nic złego. Jest to standardowy układ 3 kolumn z logo w lewym górnym rogu. Ta ogólna struktura była używana od wieków, a to dlatego, że działa. Większość współczesnych stron internetowych nadal stosuje podobne zasady, oparte na kilku typowych układach, ale ukryte pod znacznie bardziej płynną grafiką. (Uważaj na ludzi, którzy krytykują na podstawie tego, jak nowoczesne jest coś - tylko dlatego, że minęło kilka lat, nie oznacza, że ​​ludzie przyjmują informacje nagle zupełnie inaczej.)

Niektórzy mogą spierać się o to, czy główne linki nawigacyjne powinny znajdować się po lewej stronie lub u góry, ale różnice te nie tworzą ani nie psują strony.

Nie, problem nie dotyczy wyboru pozycji rzeczy. Dotyczy to grafiki, wyborów kolorów, rozmiarów rzeczy i tak dalej. Rozróżniam układ terminów , który polega na rozmieszczeniu, projekt , który polega na dotyku i wyglądzie. Nie jestem jednak pewien, czy wszyscy użyliby tych warunków dokładnie tak samo jak ja.

Powiedziawszy, że twój układ jest zasadniczo w porządku, ale twój projekt jest problematyczny, jest niestety trudniejszą sytuacją do rozwiązania. Jeśli twój układ byłby problemem, moglibyśmy udzielić bardziej konkretnych porad, takich jak „przenieś swoje pola wyszukiwania tutaj” lub „umieść tam swoje logo”. Układ jest tak naprawdę implementacją użyteczności .

Projekt dotyczy jednak wyczucia i stylu, co oczywiście jest o wiele trudniejsze do komentowania. Chociaż mogę powiedzieć, że po prostu pozostawiłeś wiele kolorów do wyboru jako domyślnych (tło jest białe, linki są niebieskie, bardzo mało obrazów interfejsu), o wiele trudniej jest powiedzieć, jakie kolory i grafika powinny tam być . Wiele zależy od tego, jak chcesz się czuć. Nudne i bezpieczne odcienie niebieskiego i szarości dla korporacyjnego charakteru, róż i żółcie dla niewinnego i dziecięcego nastroju, gorące czerwienie i czernie dla ekscytującego klubu nocnego ... I nawet wtedy użycie tych przykładowych kolorów niekoniecznie prowadzi do czuję, że się do nich przywiązałem. Diabeł tkwi w szczegółach.

Pomiędzy bardziej konkretnymi problemami z układem a bardziej eterycznymi kwestiami projektowymi zachodzą pewne nakłady , takie jak to, co mówi thebodzio w swojej odpowiedzi na temat różnych rozmiarów czcionek w nagłówkach i przypisach itd., Aby podkreślić znaczenie i pomóc w prowadzeniu strony poprzez informacje, które chcesz mieć. Powinieneś posłuchać jego / jej rady.

Obawiam się jednak, że jeśli Twoim celem nie jest partnerstwo z projektantem, ale nauka samodzielnego stosowania atrakcyjnego projektu witryny, nie tylko uzyskujesz odpowiedź, jesteś w podróży. Istnieje wiele dróg do zostania dobrym projektantem, tak jak są projektanci, i mnóstwo zasobów, więc nie brakuje okazji do nauki.

Aby znaleźć najkrótszą drogę do uzyskania sensu projektowego dla tej konkretnej witryny, przyjrzałbym się innym stronom, które lubisz i innym, które oferują podobną usługę do tej, którą tworzysz, i zacząłem porównywać i kontrastować to, co lubisz i o czym te i to, czego brakuje w Twojej witrynie.

Niestety jest to tak obiektywne, jak to tylko możliwe, i tylko najwyższy punkt wierzchołka góry lodowej. Mam jednak nadzieję, że część tego, co powiedziałem, pomaga.

Oto dlaczego myślę, że ludzie reagują negatywnie na twoją stronę: rodzi zbyt wiele pytań!

Tak jak powiedziałeś, zanim wprowadzisz funkcjonalność. Co mówi mi, że ludzie nie rozumieją, o co chodzi. Które powinno być pierwszym pytaniem udzielonym przez stronę internetową. Ponieważ jeśli jest w Internecie, nie możesz stać obok nich i wyjaśniać.

„Cała wiedza na świecie” nie przekazuje dokładnie tego, co można znaleźć na stronie (lub nie jest w to bardzo wiarygodna) ani dlaczego należy się zalogować. Twój projekt jest źle postrzegany, ponieważ nie obsługuje odpowiedzi na te pytania.

Najpierw musisz odpowiedzieć „o czym jest ta strona?”. Np. Z opisem misji. Może to być dla ciebie oczywiste, ale nie dla wszystkich innych w sieci. Jaki jest główny cel? Wziąć quizy czy stworzyć quizy? Jaka jest pierwsza rzecz, którą ludzie chcą zrobić? Zaloguj sie? Odpowiedz na quiz? Stworzyć jeden? Na te pytania powinieneś odpowiedzieć, jeśli chcesz, aby ludzie pozostali na Twojej stronie.

Następnie powinieneś uporządkować swoje informacje. Co to jest treść, co to jest meta (logo, nawigacja, logowanie). Spójrz na stackexchange. Treść (jasna) wyraźnie odróżnia się od meta (ciemna).

Pogrupuj rzeczy, które pasują do siebie. Masz bułkę tartą odłączoną od nawigacji. Wizualnie, a także sformułowania. Nie znajduje się „Wszystko” w głównej nawigacji. Jak mogę się tam dostać?

Po co to wszystko? Im szybciej ludzie zrozumieją przedstawione im informacje, tym większe prawdopodobieństwo, że pozostaną i będą wchodzić w interakcje. Jeśli będą zdezorientowani i skonfrontowani z pytaniami, na które nie mogą odpowiedzieć, zareagują negatywnie.

Ponieważ tak jest. To było wredne, prawda :) To był tylko żart, moja najlepsza odpowiedź to praca z kimś w części projektowej, jeśli nie masz kogoś do pracy z freelancerem, jeśli to nie działa zacznij też od nowa, ale staraj się, aby wszystko było prostsze i pozwól treści oddychać ...

Kilka wskazówek / porad / zaleceń dotyczących pierwszego spojrzenia: Zwiększ czcionkę znaczników h (Tytuły) niż znacznik p, znacznie większą (coś w zakresie rozmiaru czcionki tytułowej 30–48 i akapitu (11 - maks. 13). Pozwól przynajmniej Marginesy 20 pikseli lub wypełnienie między blokami treści (na przykład maring-bottom: 20px; dla paska logowania pozwoliłby być bardziej oddzielny i czytelny.

Poproś kogoś, aby zaprojektował ci właściwe logo. To, które masz teraz, jest ... niedobre. Wypróbuj różne czcionki, być może czcionkę bezszeryfową (np. Open Sans, darmowe czcionki Google lub… po prostu Arial-Helvetica).

Nie używaj gradientów, jeśli nie masz poczucia koloru tylko dlatego, że jest fajny lub tylko dlatego, że wygląda lepiej dla ciebie, spróbuj trzymać się zwykłych kolorów, a może na końcu, kiedy skończysz, spróbuj eksperymentować z gradientami tylko na CTA ( Wezwania do działania) (na przykład na przyciskach).

Jest wiele rzeczy, które możesz zrobić ... ale te rzeczy zwykle przychodzą z czasem, masz wyszkolone oko, patrząc na wiele świetnych projektów i próbując zrozumieć, jak powstał ten wynik ... najlepszym sposobem na to jest spróbuj sam odtworzyć ten sam wynik, w tym procesie zdobędziesz trochę wiedzy i wglądu na temat tego, dlaczego i jak rzeczy są zrobione / wykonane, aby wyglądać / wchodzić w interakcje i doświadczać interfejsów użytkownika.

Polecenie książki: Smashing Book [pierwsza i druga książka] oraz strona internetowa:

http://smashingmagazine.com

i jeszcze jeden: http://www.bamagazine.com/

Łał! Naprawdę wygenerowałeś odpowiedź! Przynajmniej wiesz, że Twój projekt nie pozostaje niezauważony;)

Oto krótka odpowiedź na pytanie: Witryna wygląda jakby został zaprojektowany przez inżyniera oprogramowania. To właśnie robisz i jestem pewien, że robisz to dobrze. Teraz potrzebujesz kogoś, kto zajmuje się projektowaniem interfejsu użytkownika, aby Twój pomysł był dostępny. Nie można tego obejść. Nie zamierzasz uczyć się projektowania w weekend i rozwiązać problemu.

Znajdź studenta lub młodego projektanta, który chce wypełnić swoje portfolio i dać im trochę swobody. Chcesz, aby ktoś, kto pracuje, był czysty i uporządkowany dla tego projektu. Sprawdź, czy możesz znaleźć projektanta, który preferuje minimalizm.

Nie jestem profesjonalnym projektantem, więc z punktu widzenia użytkownika i doświadczenia przeglądania różnych stron internetowych mogę wskazać kilka rzeczy?

1. Kolor tła strony jest biały, ale nagłówki Sekcja / pasemka są w odcieniach żółtego lub białego, można spróbować trochę kontrastywna kolory , można zaprojektować poziom kontrastu pasujące do Twojego elementu hierarchii (więcej wysoki poziom header = więcej kontrast) lub stały schemat kolorów nagłówka (np. głęboki Pomarańczowy jak na drugiej stronie książki pokazany w logo nagłówka, biały w przypadku tekstu nagłówka i ciemnoszary w przypadku tekstu treści).
2. Zbyt dużo wolnego miejsca na stronie, wolne miejsce jest dobre, aby dać użytkownikom miejsce do oddychania, ale zbyt dużo wolnego miejsca sprawia, że ​​strona wygląda jak back-office / niedostateczna konserwacja. np. sekcja „Podtemat” na pierwszym ekranie mogłaby zostać rozłożona na całą przestrzeń w sekcji „Wszystko”. Także dlaczego dwie zbędne sekcje podtematów?
3. Dystrybucja treści IMO powinna podlegać hierarchii . Jeśli weźmiesz na przykład dowolną z witryn, takich jak strony kodowe Google (która wygląda bardzo podobnie do Twojej witryny), Wikipedii lub tej witryny, wszystkie one wydają znaczną ilość miejsca na nagłówek witryny , a następnie pojawia się treść. Również teraz wiele dni używa paska narzędzi, takiego jak nagłówek, który ma wyraźny kolor, menu ogólne i osadzone w nim logo witryny, ale możesz powiedzieć, że twoje logo jest zbyt duże, aby to zrobić.
   Weźmy na przykład podtemat w prawej części strony, czy naprawdę wyglądają na dalszą specjalizację bieżących treści? Raczej wyglądają raczej jak losowe tagi lub powiązane tematy. Możesz odzwierciedlić ich hierarchię, tworzącstruktura drzewiasta, jak na różnych stronach dokumentacji, sprawiłaby, że bułka tarta nie byłaby konieczna. Również IMO właściwym miejscem dla tego drzewa (nawigacja) będzie na pasku bocznym po lewej stronie, a reszta działań pójdzie w miejsce bułki tartej.
4. Jednorodność jest równie ważna jak dystrybucja. Twoje przyciski mogą mieć różne kolory zgodnie z ich przeznaczeniem / znaczeniem. Ale ich struktura powinna pozostać taka sama. Twój przycisk „Zaloguj się” jest ostry, a „Weź quiz teraz” jest zaokrąglony. Możesz pozbyć się jednego z tych podejść.
5. Linki i działania nie są takie same , powinieneś je odpowiednio nazwać. Podobnie jak menu „Usuń” po lewej stronie odzwierciedla usunięte elementy lub akcję usuwania, nie można powiedzieć. Daj użytkownikom przycisk usuwania i menu / kartę usuniętych elementów, tak jak w Gmailu.
6. Czcionki są bardzo ważne, aby odzwierciedlić cel. Jeśli tworzysz stronę ze sztuką lub rodzinę literacką, jest do tego dobra, ale aby stworzyć witrynę e-learningową, musisz wybrać czcionkę, która jest wygodna w różnych rozmiarach i ma mniej powiększenia (jak wydłużone krawędzie), Sans jest w tym dobry. Wikipedia używa go na przykład. Ważny jest także wybór rozmiaru i wagi. Tam, gdzie statystyki są ważne (i zmieniają się), cyfry należy pogrubić (np. 703 dostępnych pytań). Tak jak w przypadku wybierania liczby pytań na drugim ekranie. Kursywa w nagłówkach IMO nie wygląda dobrze, dlaczego zamiast tego nie użyć pogrubionej czcionki?
7. Jest to bardzo podobne do mojej osobistej opinii, ale myślę, że bardziej zaokrąglone rogi uwolnią użytkowników od odczuć przypominających pudełko.

Jestem profesjonalnym projektantem i programistą. Myślę, że najważniejszą rzeczą związaną z projektem jest użycie programu graficznego - takiego jak Fireworks - do stworzenia projektu przed jego wdrożeniem. To ułatwia zmianę rzeczy i łatwe eksperymentowanie. Pochodzę ze środowiska programistycznego i wiem, jak ważne jest to.

Nie wiem o jakie stanowiska się ubiegasz. Jeśli ubiegasz się o stanowisko projektanta grafiki, możesz poświęcić trochę czasu na naukę profesjonalnego projektowania grafiki. Jeśli zajmujesz stanowisko programistyczne, warto zapłacić profesjonalnemu projektantowi trochę za ładny projekt lub zrobić szybką naprawę zamiast zajmować miesiące.

Jeśli chcesz szybko naprawić, postaram się podać kilka szczegółów, które pomogą ci zacząć. Odpowiedzi tutaj są dobre - ale nie są bardzo szczegółowe. Spróbuję.

Pamiętaj, że projekt o zmiennej szerokości jest zawsze nieco trudniejszy niż projekt o stałej szerokości. Myślę, że masz rację, wybierając projekt z 3 kolumnami. Treść jest poprawna, projekt nie jest tak świetny (moim zdaniem).

Oto, co bym zrobił (prawdopodobnie zajmie to mniej niż dzień):

1. Zacznij od logo. Wygląda na bardzo zajęty -> spróbuj to uprościć. Użyj bardziej żywych kolorów; żółty jest brudny. Wypróbuj prostszą czcionkę.
   • Po zrobieniu logo możesz dopasować do niego kolory strony
2. Wszystko na stronie powinno być „przewiewne”. Więc nie rób rzeczy ciasnych.
   • lewa kolumna powinna być znacznie szersza. 1,5 razy większa niż obecna szerokość
   • góra powinna mieć więcej odstępów wokół pól logowania
   • prawo powinno mieć podtematy każdy w nowej linii. Upewnij się, że mają większe odstępy wokół siebie, aby nie były do ​​siebie ściśnięte
   • w tabeli podrzędnej można użyć ton więcej wypełnienia komórek, div div tytułu można uzupełnić więcej itp.
3. Cała zawartość powinna płynąć zamiast być niepewna. Oznacza to wyrównanie w jak największym stopniu, stosowanie jednolitych czcionek i odpowiednich rozmiarów.
   • Centralna kolumna „Cała wiedza na świecie” wygląda nie na miejscu z resztą treści. Być może przesuń go w lewo, usuń podkreślenie i na pewno zmniejsz go niż tytuł.
   • Zawartość strony nie jest wyrównana. Wyglądałoby to lepiej, jeśli wyrównałeś zawartość podrzędną z podtytułami.
4. Pola logowania na górze mogą być ładniejsze.
   • Możesz umieścić etykiety w polach wprowadzania tekstu (wyszarzone). To by uczyniło go czystszym.
   • Możesz znacznie zmniejszyć pole wyboru / czcionkę Zapamiętaj mnie. To nie jest najważniejsza funkcja, więc nie powinna być tak duża jak ważna część.

Nie sprawi to, że Twoja witryna będzie najbardziej niesamowitą witryną w Internecie, ale mam nadzieję, że dopracuje ją wystarczająco, by przejść inspekcje. :)

wow ... to całkiem zły lol.

Nie sądzę, że możesz nauczyć się przeprojektowywać coś w kilku sugestiach, jeśli nie masz żadnego wyczucia projektu, więc naprawdę myślę, że powinieneś poprosić kogoś innego, aby zrobił układ. Podejdź do lokalnej uczelni artystycznej i sprawdź, czy klasa weźmie to za przykład z prawdziwego świata.

Ale jeśli tego nie zrobię, oto kilka moich sugestii. Strona indeksowa / docelowa pomimo swojej nazwy musi funkcjonować bardziej jak reklama na tablicy lub w magazynie. Musi przekazać swój komunikat SZYBKO, za kilka sekund. Zauważ, że powiedziałem „wiadomość”, a nie informacje. Informacje muszą być dostępne, gdy widz ich szuka, ale nie muszą być ułożone jak lekko zakodowany spis treści.

Jeśli chodzi o przesłanie ... pierwszą rzeczą do przemyślenia jest to, na co oni patrzą ... strona internetowa, tak, ale strona internetowa czego? Nawet czytając twoje kategorie, nie jest dla mnie jasne, co to za strona.

„Co” zostanie przekazane za pomocą schematu kolorów, ogólnego układu oraz tytułów.

Po rozwiązaniu pytania o to, co chcesz, najpierw zdecyduj, co mają zobaczyć. Moim wyborem byłaby praktyka czyni logo Perfect, powiększałbym to i wyskakiwałem z nagłówka. Ale możesz mieć powody, aby skupić się na czymś innym lub wezwaniu do działania.

Zgaduję, że twoją najważniejszą rzeczą jest „cała wiedza na świecie”, ponieważ wyśrodkowałeś ją (zły pomysł), uczyniłeś ją kursywą (zły pomysł!) I dałeś jej dużo przestrzeni wokół siebie (dobry pomysł). Ale z wyjątkiem same słowa ... nie jest jasne, co to jest lub robi, spróbuj czegoś bardziej opisowego i mniej głupiego.

Spróbuj podzielić ogólną stronę docelową na 3 elementy projektu i 3 poziomy ważności informacji. Zadaj sobie pytanie, co jest PIERWSZĄ rzeczą, którą powinni zobaczyć, PIERWSZĄ rzeczą, którą powinni zrobić? co jest drugie, trzecie? i spróbuj odpowiednio przeprojektować.

Używaj mniej kolorów i nadaj im sens. Dlaczego 3 różne zderzające się bluesy posypały losowo tekst? Użyj więcej rozmiarów czcionek (!), Ponowne podzielenie na 3 s to dobry początek, DUŻA czcionka dla najważniejszych, średnia dla drugorzędnych itp.

Moja ostatnia propozycja to zrobić projekt PIERWSZY i na długo przed napisaniem kodu. Sugeruję, aby zacząć od PAPIERU i długopisów lub ołówka, aby zablokować stronę. Po prostu szybkie szkice, NIE pisz przy tym faktycznych słów, po prostu blokuj obszary, próbując zdecydować, jak duży powinien być obszar zawartości względem nagłówka , jak duży jest pasek boczny i tak dalej.

Następnie wykonaj bardziej sfinalizowany projekt w programie graficznym. PRZESUWAJ różne rzeczy i eksperymentuj z rozmieszczeniem. Pamiętaj, że projektujesz stronę, która musi funkcjonować jak strona czasopisma. Zatrzymaj widza, postaraj się pokazać mu to, co chcesz, i poprowadź go do zrobienia tego, co chcesz.

I zacznij SZUKAJ od i do projektowania. Spójrz. nie oceniaj zawartości, zamiast tego SZUKAJ, jakie wiadomości są przekazywane przez strony internetowe. Jak używają odstępów, koloru i rozmiaru czcionki? Spróbuj naśladować dobry projekt. powodzenia

i rozważ sugestię szkoły artystycznej. programy do projektowania graficznego często szukają dla swoich studentów projektów przeprojektowania w świecie rzeczywistym.

Główny problem, który czerpię z tego wątku, polega na tym, że bardziej interesuje Cię debata i obrona swojego „projektu” niż nauka tworzenia czegoś, co jest atrakcyjne. Typowe dla inżyniera oprogramowania. Myślisz, że możesz podzielić stronę na elementy składowe, przetestować i zweryfikować te elementy, a następnie, po zintegrowaniu składników, uważasz, że elementy powinny matematycznie wyliczyć dobry projekt. Następnie myślisz, że poprzez opublikowanie tego pytania, które ponownie możesz podzielić stronę na komponenty i argumentować zalety każdego z nich oraz argumentować, w jaki sposób postępuje zgodnie z tym, co powiedział dostawca odpowiedzi.

Dopóki nie zechcesz zaakceptować faktu, że jesteś do kitu w UX, nadal będziesz mieć ten problem. Jak wspomniano powyżej, projekt graficzny dotyczy dotyku. Projektowanie graficzne nie jest równoznaczne z projektem inżynierskim. Nie możesz matematycznie skonstruować czegoś, zintegrować go z innymi „matematycznie poprawnymi” rzeczami i oczekiwać dobrego rezultatu. Nigdy nie będziesz dobry w UX (prawdopodobnie), ponieważ po prostu nie patrzysz na świat tak, jak postrzega go projektant. Ale jeśli przestaniesz mierzyć swoją stronę i porównywać ją z czymś innym - otwórz się całkowicie na naukę, wiedząc, że nie wiesz nic o projektowaniu graficznym, możesz zacząć ją otrzymywać ...