Witam,
przygotowałem elementy do panelu administracyjnego i chciałem Was prosić o ocenę oraz ewentualne rady, sugestie. Załączona grafika nie zawiera samego ich rozkładu czy designu panelu, ale tylko pojedyncze elementy.

Wszystko zostało oparte na CSS, jedyne grafiki to ikonki (Fugue). Kod jest semantyczny (np. formularz na <dl>).

Link: http://phpworkstation.com/admin.png

Z góry dzięki za opinie.

PS: W tabeli żółty wiersz to wiersz po najechaniu myszką, a niebieski z ikonką dyskietki to ten, który przed chwilą został zapisany/zmodyfikowany.

Wg mnie powinno się oceniać całość. Bo w końcu jak robisz ciasto to też nie patrzysz na to jak smakują poszczególne składniki, tylko całość. Jakbym miał coś mądrego powiedzieć, w mojej opinii kolory boksów są za mało ciepłe. Cała reszta kolorystycznie jest stonowana a boxy są takie jaskrawe.

No i "wręcz globus" mnie rozłożył ;D

Masz rację, zdecydowanie lepiej będzie się oceniało w momencie, gdy całość będzie odpowiednio poukładana. W dniu jutrzejszym postaram się przygotować wygląd admina wraz z układem.

Natomiast co do boxów: one w założeniu miały być jaskrawe i dawać po oczach hehe.

Z szerszą oceną wstrzymam się więc do jutra - smacznie się zapowiada . Tak na marginesie - jakbyś w czerwonym boksie nie dawał białego tekstu (tylko bardzo jasno czerwony) - łatwiej czytałoby się tekst.

Hehe, dzięki za pozytywną opinię. Cenię sobie Twoje zdanie, bo widziałem kilka Twoich prac (tylko to, co się przewinęło przez to forum) i widać, że znasz się na rzeczy Grafikiem nie jestem więc bazuję głównie na możliwościach CSS bo bajerów graficznych po prostu nie jestem w stanie zrobić.

Co do koloru czcionki w czerwonych boxach: hmmm, próbowałem z odcieniami w okolicach #FFE8E9 i wg mnie było mniej czytelnie. Jeśli mogłabyś zaproponować jakiś kolor to byłbym wdzięczny.

Może minimalnie zjechać z białego na rzecz #ffc2c2 lub #fedbd9? Wiesz co, chyba łatwiej będzie to ocenić jak zobaczymy te komunikaty w całości. Może "oczojebność" jest wynikiem ich nagromadzenia w jednym miejscu? . Szkoda byłoby też rezygnować z tych soczystych kolorów w tłach, bo są fajne.

Wszystko bardzo czytelne. Obrazki nie odwracają uwagi od tekstu, a urozmaicają go.

Elementy proste i przejrzyste.

PS: Rozwaliło mnie: Hasło powinno być mocne.

Witam ponownie

Udało mi się przygotować wstępny rozkład elementów. Część z nich nieco zmieniłem, część w ogóle na razie się nie pojawiła. Link z pierwszego postu jest nadal aktualny, a oto nowe:

- Lista
- Formularz

W planach mam jeszcze m.in. integrację z jQuery UI (np. formularze na zakładkach), ale nie wiem czy uda mi się dopasować styl jQ UI do mojego hehe. Na razie więc daję Wam pod lupę to, co jest.

lista:
- stronicowanie przydałoby się także przed tabelką
- brakuje listy wyboru liczby użytkowników na stronę

formularz:
- 3 rzucające się komunikaty w oczy - trochę za dużo. powinien być jeden najważniejszy
- wybierz jeden sposób informowania użytkownika o błędach w formularzu (osobiście preferuje na górze box informacyjny + wyróżnienie błędnych pól - jakiś lekki czerwony na tło lub czerwony kolor tekst)

poza tym wszystko jak najbardziej ok!

- Stronicowanie przed tabelką - słuszna uwaga dotychczasowy panel admina miał również stronicowanie u góry, moje niedopatrzenie.
- Wybór liczby rekordów - nie planuję takiej opcji.
- Komunikaty błędów - jestem zwolennikiem umieszczania informacji czego dotyczy błąd pod polem, ponieważ samo oznaczenie pola na czerwono nic nie mówi (zła wartość? za mało znaków? a może za dużo). Możliwe, że u góry zostawię tylko 1-linjkowy pasek "Wystąpiły błędy...". Tak również miałem zrobione do tej pory - najwidoczniej nie należy na siłę usprawniać czegoś, co się sprawdza.

Dzięki za opinię.

PS: Dodałem jQuery UI musiałem zmienić <legend> bo robiło się za dużo ciemnych pasków. Nie podoba mi się niestety kalendarz, ale jego ewentualnie ostyluję osobno. Zamieściłem widok formularza na zakładkach. Wygląda chyba całkiem apetycznie

Bardzo fajnie wygląda ten panel. Moje uwagi:
- z doświadczenia polecam w formularzu zakładki, ja przy artykułach mam ich 5 i bez nich formularz byłby bardzo długi.
- w tabeli polecam dorzucić checkboxy i akcje typu "usuń zaznaczone" itp na dużej liczbie danych bardzo się przydaje

- Zakładki już dodane
- Checkboxy na liście - - zapomniałem... Do tego będzie trzeba dorobić listę <select> możliwych akcji no i knefel wysyłający (a może zamiast tego linki wysyłające formularz?).

Swoją drogą: dziwię się, że nikt nie lamentuje, że formularze są nieostylowane hehe. Przez chwilę używałem jQuery NiceForms, ale więcej mnie to wkurzało niż cieszyło. Obramowania, tła itd. można z powodzeniem zastosować do większości pól, ale nie do checkboxów czy radio. Z tymi polami są szopki. Wyszedłem więc z założenia, że daruję sobie stylowanie pól.

no i b. dobre założenie. w końcu człowiek przyzwyczajony do przeglądarki i sposobu wyświetlania niektórych elementów, to po kiego grzyba na siłę zmuszać "do myślenia"

PS teraz komunikaty w formularzu są ok.

Wydaje mi się, że dobrnąłem do końca. Naniosłem zmiany zasugerowane przez Was i finalnie prezentuje się to tak:

- Lista
- Formularz

Mi się podoba. Macie jeszcze jakieś sugestie?

W liście zamiast kolumny Akcje podzieliłbym na kolumny o nazwach akcji, czyli: Edytuj | Usuń | itp. Nie każdy wie że ikonka z plusikiem oznacza edycję galerii, a raczej każdy wie że są to linki do akcji

Co do szukajki wrzuciłbym ją nad listy, ale to raczej przyzwyczajenie, nie wiem, chyba kwestia gustu

Tak poza tym bardzo prosty, elegancki i czytelny czyli tak jak Panel admina wyglądać powinien

Akcje pozostaną tylko i wyłącznie w formie graficznej. Po prostu taki "system" do tej pory mi się sprawdzał. Dzięki temu mam stałą szerokość komórek z akcjami, do tego zajmują mniej miejsca niż napisy. Podpowiedzi co do tego do czego służą ikonki pakowane są w title dla obrazka.

Szukajka (rozumiem, że chodzi Ci o filtry) moim zdaniem lepiej pasuje po lewej stronie. Pola filtrów są krótkie, więc lista np. z filtrowaniem po 2 polach marnowałaby sporo miejsca u góry. Nie mówię już o przypadku, gdy tylko jeden filtr przeskoczy do nowej linii. Rozwiązanie z filtrami jeden pod drugim wydaje mi się rozsądniejsze.

Tak czy siak dzięki za opinię

Nie czytałem wszystkiego, ale:

1. It's so 2002.
2. Mogłeś pokusić się o jakieś detale (cienie, zaokrąglone rogi, gradienty - to wszystko możesz przecież czystym CSSem uzyskać).
3. Menu rozwijane w takiej postaci to chyba najgorszy możliwy pomysł, jeżeli chodzi o nawigacje.
4. W wielu miejscach marginesy dla tekstu są za małe.
5. Fonty też mogłeś dla jakiś nagłówków nieco ładniejsze wybrać.
6. Ikony są po prostu brzydkie - Windowsem 98/XP zalatuje (patrz punkt 1.).

Ogólnie: tragedii nie ma, całość trzyma się kupy - ale jeżeli chodzi o walory estetyczne (częściowo dotyczy to też UX) to słabo wypada.

1. Wybacz, ale nie rozumiem że niby wygląda jak sprzed 8 lat?
2. Nie cierpię zaokrąglonych narożników. Zdecydowanie bardziej wolę kanciaste (surowe i ostre) linie. Cienie - tu masz rację, chętnie bym je dodał. Gradienty? Może też, ale już z mniejszym "zapałem".
3. Dlaczego? Wg mnie jest całkiem wygodne i pozwala zaoszczędzić kupę miejsca. Jeśli rozsądnie się je rozplanuje to nie powinno być tragicznie.
4. Gdzie są te "miejsca"?
5. Dla mnie sans-serif rządzi
6. Te ikony to Fugue. Lepszego (ilościowo i jakościowo) zestawu nie znalazłem.

Dzięki za kolejną opinię.

Z darmowych dobry jest jeszcze zestaw Silk Icons Ogólnie podoba mi się choć osobiście rzadko używam ciemnych kolorów w panelach - kwestia gustu.

1. Dokładnie tak - takie właśnie to na mnie wrażenie wywołało.
2. Chodziło mi ogólnie o "dopieszczenie" tego. W tej chwili jest to takie właśnie "Win98-owate" - jednokolorowe, kanciaste - bardziej mi to jakąś makietę przypomina niż finalny projekt. Nie wszystko musi być zaokrąglone itp. - chodzi mi o "ogół szczegółów"
3. Problem takiego menu, to to, że trzeba tą myszką się nalatać, a jego elementy nie są szybko/łatwo dostępne. W dodatku z reguły kliknięcie czegokolwiek powoduje schowanie takiego menu i proces zaczyna się od początku.
4.1. Treść błędu pod polem tekstowym.
4.2. Nagłówki w formularzach ("dane podstawowe" itp.)
4.3. Etykiety w formularzu "filtrowanie danych" (btw: wyświetlanie strzałek góra/dół przy każdej kolumnie nie wygląda zbyt estetycznie - dużo ładniej wygląda gdy wyświetlana jest tylko przy kolumnie względem której dane są sortowane - co jednak sprawia, że zmiana kierunku sortowania na odwroty wymaga kolejnego kliknięcia)
4.4. Interlinia w boksach (boks zółty/czerwony/itp.) jest IMO za mała

2. Postaram się jeszcze z tym popieścić dodając jakieś smaczki. Nie chciałbym jednak przesadzić, generalnie stawiam na prostotę i surowy wygląd (np. wygląd Windowsa w domu i w pracy mam ustawiony na klasyczny ) ale to jest kwestia indywidualnego gustu.
3. W takim razie jakie inne menu byś proponował? Wg mnie menu rozwijane jest dobrym wyjściem. Zaoszczędza sporo miejsca, szybko można wybrać dowolną opcję, do tego jest zbliżone do tego znanego z systemów operacyjnych.
4. W pełni się zgadzam. Do poprawy

Z lekkim poślizgiem ocena, ale nie miałam czasu porządnie się nad tym zastanowić wcześniej . Jak zwykle lista:
[-] O ile czerwony komunikat jest całkiem fajny, tak ten żółty jest jak dla mnie słabszy. "Podrasowałabym" trochę na kolor tła i zmieniła kolor czcionki.
[-] Ograniczyłabym liczbę kolorów (patrząc na admin_lista nie wiem na czym zawiesić wzrok - tyle tego tam ).

[+] Ogólne wrażenie.
[+] Komunikaty samodzielne i te pod inputami (no, poza tym żółtym) - mniam! .
[+] Wszystkie elementy są na swoich miejscach (bez zbędnych udziwnień).
[+] Zasadniczo fajna kolorystyka (poza tabelką, gdzie moim zdaniem jest za kolorowo).

Sugestie:
[~] Zwiększyłabym wysokość wiersza w żółtej uwadze po lewej (plik: admin_formularz, "Użytkownik w ostatnich dniach...") i w niebieskim boksie z filtracją (plik: admin_lista, "Nazwa użytkownika....").
[~] Dodałabym dodatkową linię pomiędzy pozycjami menu [1].
[~] Powiększyłabym też "grubość" menu i dodała pare bajerów [2].
[~] Lekko zwiększyłabym odstępy (paddingi) w komunikatach, wszelkich boksach, menu (poza zawartością) itd. Z doświadczenia wiem, że to zdecydowanie zwiększa czytelność.


[1] O tak (pozwoliłam sobie pracować na Twoim pliku):


[2] Myślałam o czymś takim (przynajmniej ostatnim razem zrobiłam u siebie coś w tym guście):



Powiem Ci, że mam na swoim sumieniu już kilka projektów panelu administracyjnego i zwykle ciężko mi się to projektuje. To nie strona www, gdzie można dowolnie szaleć (zwłaszcza przy statycznym wdrożeniu) - a jednak człowiek chciałby, żeby efekt wizualny był co najmniej zadowalający. Zasadniczo fajnie Ci to wyszło, chociaż można jeszcze pokombinować z dodatkami. Chciałabym zobaczyć wdrożony projekt .

Ło hoho, ale lista


Nad żółtym pomyślę Liczba kolorów w tabeli: weź pod uwagę, że zazwyczaj widoczne będą tylko 2 kolory wierszy (ciemny i jasny). Żółty to wyróżnienie wiersza po najechaniu na niego mychą, a niebieski to oznaczenie ostatnio zapisanego rekordu (czyli widoczne tylko raz). Najczęściej widoczne będą więc 2 kolory wierszy + 1 w momencie klikania w ikonki.


Cieszą mnie te plusy. Starałem się by całość wyglądała prosto, schludnie i była funkcjonalna - chyba udało się to osiągnąć.


Wysokość wiersza faktycznie należałoby zwiększyć. Sądzę, że tego typu poprawki wyjdą w momencie użytkowania panelu i ciągłej jego rozbudowie. Dodatkowa linia między pozycjami menu jak najbardziej mi się podoba, natomiast modyfikacja górnego menu wcale do mnie nie przemawia - za bardzo udziwinione jak dla mnie, ale dzięki za chęć pomocy

Jasne, menu to tylko przykład wyrwany trochę z kontekstu, bo przecież musi to jeszcze współgrać z resztą . Co do tabeli, to pewnie wyjdzie w praniu - sama nie wiem. Tak jak już pisałam - fajnie byłoby to zobaczyć w akcji.

Mi się podoba bo w końcu ma być to "panel administratora", a nie jakas "sweetasna strona dla na100latek". Każdy ma inny gust. Ja wole kanty, ktos inny woli koła.
Dla mnie git

tutaj masz ciekawy link możesz podpatrzyć jak wyglądaja inne panele admina