Skocz do zawartości
Szukaj w
  • Więcej opcji...
Znajdź wyniki, które...
Szukaj wyników w...
kamikaze101

kamikaze101 - Nauka webdesignu

Rekomendowane odpowiedzi

Witajcie. Nigdy wcześniej nie miałem do czynienia z webdesignem. Nie projektowałem żadnych stron internetowych. Założyłem ten temat, by wrzucać do waszego wglądu moje prace w tym kierunku.

Mój pierwszy ever projekt strony wrzucam niżej. Tematyka - donuty, pączki, obwarzanki. Celowo nie chciałem bajkowych słodkich kolorów, wolałem zostać przy brązie.

Proszę o wasze opinie i uwagi. Ja osobiście uważam że im niżej w dół, tym jest gorzej, tym bardziej ta mapa (zabarwiony screen z google maps xD ) Plus nie pasuje mi coś w menu...

Tutaj link do projektu bez 'prezentacji': http://

Zaloguj się lub zarejestruj, aby zobaczyć ukrytą zawartość.


emQmrTp.jpgemQmrTp.jpg"><a href=https://i.imgur.com/emQmrTp.jpg' alt='URL>'>

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Dzięki za komentarz :peace:

Niedawno skończyłem kolejny projekt, prezentuje się tak:

NqcjvmB.jpgNqcjvmB.jpg"><a href=https://i.imgur.com/NqcjvmB.jpg' alt='URL>'>

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Projekt medyczny: mam wrażenie, że trochę to wszystko jest duże. Wyrównaj odstępy w formularzu i będzie spoko. Dorób podstrony bo to tylko strona główna a zabawa się zaczyna przy podstronach.

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

chaa dzięki za komentarz :D

Ogólnie przy tym drugim projekcie zacząłem się zastanawiać nad jedną rzeczą. Mianowicie mam pewien problem ze zdecydowaniem co do wielkości fontów, a dopasowania ich do gridu. Eksperymentuję różnymi ustawieniami tekstu i decyduję się na ten (moim zdaniem) najlepszy, zawsze dopasowując się do siatki.

I pytanie 'czemu być wiernym' w takiej sytuacji?

>Mojej np. przyjętej zasadzie, że "aa tu wszystkie nagłówki dam na 50px" i wszystkie takie są, ale nie zawsze dopasowują się do kolumn siatki (wychodzą poza linie, albo kończą się sporo przed nią).

>Czy może mojej innej zasadzie że "aaa tu wszystkie nagłówki będę równał idealnie co do kreseczek, ewentualnie będę zmieniał sobie rozmiar fontu jak będzie za dużo tekstu" Wtedy niby jest równo, no ale każdy nagłówek ma inny rozmiar.

Czym się kierować? :wut:

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

kamikaze101 jeśli chodzi o wielkość nagłówków to powinieneś sobie założyć że np h1 (jeden na stronę) czyli nagłówki na wszystkich stronach mają rozmiar np 36px. h2 czyli drugi w hierarchii np 26px, natomiast h3 np 22px i tego się trzymaj. Jeśli chodzi o teksty i nagłówki na stronie głównej to trzeba dopasować pod projekt ale zasada powinna być taka sama dla wszystkich podstron. żeby było konsekwentnie to na dole strony masz adres, godziny pracy i email to to powinny być takie same nagłówki (wielkość) jak imiona lekarzy w sekcji powyżej. jeśli chodzi o grid to jest to bardzo elastyczne wymierz sobie ze strona ma mieć np 1180px szerokości i np 3 kolumy lekarzy w tej szerokości, jeśli potrzebujesz więcej miejsca to szerokość jest na 100% i w 100% wkładasz te 3 kolumy. Dużo zależy od tego czy sam będzie kodował stronę czy komuś zlecał. Sprawny koder sobie z tym poradzi bez problemu sam sobie dopasuje marginesy itp ale jest łatwiej jak projekt ma dobre odstępy albo prawie dobre. Na pewno nie rób tak że masz np 3 kolumny ikonek albo lekarzy i 1 jest szersza bo się tytuł zmieści. Rozmiary nagłówków w kolumnach (z danej sekcji) powinny być takie same. Mam nadzieję że w miarę jasno to wytłumaczyłem ;)

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Dzięki, postaram się stosować do tych rad ;)

Ostatnio zrobiłem coś takiego. Troszkę mniejsze i prostsze.

Po odpaleniu projektu na innym monitorze umarłem od tych kolorów. Czerwień strasznie mocno nasycona, mimo że na laptopie na którym to robiłem, było naprawdę... znośnie

No i teraz dostrzegam że niepotrzebnie zmniejszałem krycie na buttonie od newslettera :ugh:

Ogólnie projekt z zamiarem wykonania sklepu. Chyba niedługo się za niego zabiorę =D

PuROnpb.jpgPuROnpb.jpg"><a href=https://i.imgur.com/PuROnpb.jpg' alt='URL>'>

Edytowane przez Gość

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Moje uwagi, może i nie słuszne:

- menu mało widoczne, spróbuj linki dać czarne (po najechaniu czerwone), zmniejszyć odstęp między nimi o ok 70% i dać do prawej, logo powiększyć, dać social media czarne (po najechaniu myczą czerwone)

- główny obrazek: zmniejszyć kontrast, całość ściemnić, usunąć ciemniejszy pasek, powiększyć napisy, całość dać niższą (zmniejszyć height)

- sekcja z czerwonym tłem i płytami: zwiększyć odstęp między nagłówkami a tekstem, tekst i buton dać do lewej, w tekście zmniejszyć interlinie

- to samo z tekstem na ciemny tle

- sekcja z płytami: zmniejszyć odstęp między kolumnami tekstu, zmniejszyć interlinie

- kontakt: dać mniej widoczny guzik sing up, logo dać białe i przenieść wyżej a tekst pod logo niech się zaczyna na tej samej wysokość co home. Przymierz jeszcze z czarnym tłem, brakuje social media, nie potrzebne jest 2018

- możesz spróbować dać formularz singup na główny baner na górze

Sorry za krytykę, ogólnie mi się podoba

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Ogarnąłem troszkę poprzedni projekt wg uwag. Jednak ne będę go wrzucał, bo zrobiłem teraz sklep.

Nie podoba mi się efekt po najechaniu myszą na album. Inaczej sobie to wyobrażałem, a całkiem inaczej wyszło.

Edit: Dopiero zauważyłem że w menu dalej wybrane jest "Home" :ugh2:


Przy okazji mam dwa pytania:

• Czy ten projekt (pomijając kwestie wyglądu) jest zdatny do zakodowania i uruchomienia jako normalnie działający sklep, czy może jednak ma w sobie elementy, których po prostu nie da się umieścić tak aby sprawnie działały?

• Używać koloru czarnego i ew. balansować sobie kryciem w elementach które chcę aby były 'bardziej szare', czy używać tylko odpowiednich kolorów szarych, bez bawienia się opacity? Jak to wygląda z perspektywy kodowania?


1y7it5b.jpg1y7it5b.jpg"><a href=https://i.imgur.com/1y7it5b.jpg' alt='URL>'>

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

kamikaze101, widzę że zaczynasz myśleć globalnie i bardzo dobrze. Rozumiem ,że teraz jesteśmy na podstronie kategorii sklepu, ja bym przymierzył ten czerwony obrazek z płytą o połową mniejszy w wysokości. Jeśli to sklep to elementy stałe dla sklepu jak wyszukiwarka i koszyk powinny być zdecydowanie wyżej, gdzieś w okolicach menu. Nie wiem jak na Twoim monitorze ale coś mam wrażenie że wyszukiwarka jest za jasna. Jeśli to sklep to na pewno brakuje zaloguj / zarejestruj / pomoc itp. Ok teraz lista produktów jedna z najważniejszych rzeczy. Spróbuj przymierzyć nagłówki filtrów by font był tej samej wielkości co elementy w nim. Zmniejszyć interlinie w filtrach, często w sklepach jest np 50 podkategorii w tedy będzie lista na kilka ekranów. Strzałki w dój daj jasno szare a po najechaniu myszką czarne / czerwone i mniejsze. Nikt nie będzie celował w strzałkę tylko klika w cały napis. Na pewno trzeba zmniejszyć odstęp od lewej krawędzi dla podkategorii. Bardzo często w sklepach zdarzają się kategorie z długą nazwą a przy tym rozwiązaniu pewnie wszystkie by się łamały na 2 linie. No i lista produktów, jest przyjemna, super nawiązanie do winyli jeśli chodzi o pasek z cenami, dobra robota. Ja bym tylko przesunął tytuł z ceną do góry bo teraz jak jest prawie równo pomiędzy 1 a 2 rzędem płyt to nie wiadomo do którego jest cena czy do dolnego czy górnego. Po najechaniu myszą nie rób tła, przymierz czerwony border na 4-8px i będzie super, nawiąże to do kwadratowego opakowania płyty a zarazem nie będzie ciężkie. Stronicowanie na drugą stronę tu jest bardzo nieintuicyjnie. Ilość elementów na stronie może zostać w tym miejscu. Jeśli chodzi o kodowanie to nie widzę tu nic co by się nie dało zrobić. Jeśli chodzi o to czy dasz kolor szary czy krycie dla kodera nie ma różnicy ale przyjemniej jest jak jest to kolor bo w tedy się tylko klika w element i jest a tak to trzeba celować próbnikiem (bardzo niewygodne przy fontach). tak naprawdę bez znaczenia, ja jak koduje wole kolor niż opacity :)

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się

×