[kiubus95]

Witam wszystkich GIMPowiczów.
Jestem nowy w branży grafiki komputerowej, ale postanowiłem, że rozpocznę prace nad szablonem do strony WWW. Mam dla Was do oceny bardzo wstępną wersję prac (w załączniku).
Bardzo proszę o szczere opinie

[be@]

Przede wszystkim napis w logo strasznie wystrzępiony i nieestetyczny (wygląda jak nagłówki sprzed 10 lat). Po drugie napis poniżej (projektowanie stron...) jest zbyt blisko tego w logo. Jak na mój gust, to również napisy w menu są z byt blisko siebie. Kolorystyka nawet mi się dość podoba, chociaż chyba nieco inny odcień pomarańczowego bym wybrała do tego menu. A może jakiś bardziej żółto-złoty? W każdym razie mi te kolorki kojarzą się raczej z wojskiem lub grami niż z projektowaniem stron. Podobnie jak deseń pod nagłówkiem. Tego typu serwisy mają raczej strony wyglądające bardzo nowocześnie i schludnie.

[kiubus95]

Przede wszystkim napis w logo strasznie wystrzępiony i nieestetyczny (wygląda jak nagłówki sprzed 10 lat). Po drugie napis poniżej (projektowanie stron...) jest zbyt blisko tego w logo. Jak na mój gust, to również napisy w menu są z byt blisko siebie. Kolorystyka nawet mi się dość podoba, chociaż chyba nieco inny odcień pomarańczowego bym wybrała do tego menu. A może jakiś bardziej żółto-złoty? W każdym razie mi te kolorki kojarzą się raczej z wojskiem lub grami niż z projektowaniem stron. Podobnie jak deseń pod nagłówkiem. Tego typu serwisy mają raczej strony wyglądające bardzo nowocześnie i schludnie.

co masz na myśli mówiąc, że takie strony wyglądają bardzo nowocześnie i schludnie?

[be@]

Najlepiej, jeśli po prostu sobie takie stronki poprzeglądasz. Na czym się wzorować, to myślę, że najlepiej podpowie użytkownik Skwarek.

[Madzialena]

Aktualnym trendem jest tzw. "Flat design". Windows 8 jest chyba najbardziej znanym przykładem tego stylu. Ogólnie chodzi o prostotę, minimalizm i elegancję Im mniej tym lepiej
Tu masz parę rzeczy na ten temat:
Po co stworzyliśmy Flat design?
Flat design-co to jest? (ogólnie)
duuużo (dobrych) przykładów użycia tego stylu na stronach
To tak ode mnie

[kiubus95]

a jakieś typowe tutoriale są do tego rodzaju stylu? :p

[Madzialena]

Na gimpa nie ma, ale jak będę miała odrobinę czasu to mogę coś napisać takiego luźnego na ten temat (ale gwarancji nie daję). Chwilowo to zostaje ci robienie wedle referencji, tak jak ja się uczyłam. Patrz na dany layout ewentualnie 2 i spróbuj je odwzorować dodając coś od siebie (ale koniecznie w tej konwencji). Od siedmiu boleści zagraniczne fora które obfitują w tego typu poradniki... ale na PS'a i Ilustratora, nie ma jednak większych problemów z przerobieniem ich na Gimpie (tylko jest czasem więcej roboty)

[kiubus95]

ok ale mam jeszcze pytanie w kwestii menu. Jak mam je zaprojektować jeśli ma się ono wysuwać po najechaniu myszką? Mam w gimpie zrobić je tak, jakby było w pozycji wysuniętej? Bo wysuwanie to raczej będzie kwestia js/css?

P.S
Coś takiego z Flat Design zrobiłem, nie wiem czy idę w dobrym kierunku Pomiędzy tymi białymi kreskami planuję zrobić stałe menu z ikonkami, chyba, że znajdę więcej info o takim rozwijanym to przeprojektuję. Na chwilę obecną proszę o oceny.

[be@]

Ale dlaczego znów ten obrazek w logo (te dłonie) jest wystrzępiony? W jaki sposób go robiłeś, że ma takie krawędzie? I o ile się nie mylę, to takie cienie jak pod napisem w logo raczej nie są w stylu flat. Tam raczej nie używa się rozmycia ani gradientów.

[Madzialena]

be@ masz racje, nie używa się cieni i gradientów jako takich (delikatne, niemalże nie widoczne czasem występują) ale dla uzyskania jako takiego efektu 3D można dać coś takiego. na moim avku też jest, ale słabo widoczny, to się Long shadow nazywa
A co do tematu, to użyj tego:grid bo coś ci tak krzywo ten heder leży Ogólnie Grid ułatwia umieszczenie wszelkich elementów, dobór odległości jest ważny.
A i ten fiolet coś mi nie leży, ale pierw go skończ, a potem się zobaczy. Do logo to polecam używać ścieżek, długo się robi ale efekt jest bardzo dobry

[kiubus95]

te dłonie to ściągnąłem ikonkę w PSD z neta (darmowe) i takie wyszło.
A co do 960.gs to macie coś więcej informacji o tym? Chętnie bym poczytał

[be@]

W takim razie nie używaj takich wystrzępionych ikon ani słabej jakości obrazków, bo nie wygląda to estetycznie.

[kiubus95]

Zmieniłem, może takie coś? Skoro prostota w flat dominuje?

[Madzialena]

Wywal tą nazwę strony w postaci linku (usuń to .pdg.pl) bo trochę to lipnie wygląda Ewentualnie zrób to tak:
{Kubuss }
{Code   }
{Design }
Tylko to } ma być duże tak jak w oryginale u ciebie W logo możesz dać czcionkę Lato Normalną i dajesz na środek, a pod tym logo dajesz Lato Light mniejszą i dajesz to hasełko: Projektowanie(...). Ogólnie Logo czcionka większa, a hasełka pod mniejsza. Duża różnorodność rodzajów czcionek nie zalecana... ciężko się na to patrzy i czyta Link do czcionki
Odnośnie Grida:
960 Grid System – jak przyspieszyć projektowanie i cięcie projektu
960 grid system układ 12 i 16 kolumnowy

[kiubus95]

A co powiecie na takie coś?

[Madzialena]

Od razu lepiej A teraz spróbuj to skończyć.

[Ziomioslaw]

Trochę puste, możesz dorzucić jakieś Lore Ipsum, żebym zobaczył, jak to wygląda z tekstem?

[kiubus95]

Trochę puste, możesz dorzucić jakieś Lore Ipsum, żebym zobaczył, jak to wygląda z tekstem?

będę jeszcze dopracowywał pod względem grafiki Postaram się aktualizować na bieżąco

[kiubus95]

Co powiecie na takie rozpoczęcie Menu?

[be@]

Mi się podoba , ale header jakoś dziwnie mi wygląda. To "Projektowanie stron iternetowych" chyba nie powinno tak stykać się z linią poniżej? A jakbyś spróbował na napisach w headerze i tych poziomych liniach zmniejszyć nieco krycie, albo zastosować tam jakąś cieniutką czcionkę, bo teraz to jakoś niezbyt się odróżnia jako header. Osobiście uważam, że strony gdzie na pierwszy rzut oka nie można wyróżnić poszczególnych sekcji, są mniej czytelne (sprawiają wrażenie chaosu, nie wiadomo na czym w pierwszej kolejności zawiesić oko ).

[kiubus95]

Fakt, użyłem w menu tej samej czcionki co w headerze. Nie pamiętam już z jakiej strony ją ściągnąłem ale wiem, że miała do FLAT'u pasować, i nie wiem jakie inne mogą również spasować do tego 'kierunku' webdesignu. Co do napisu dolnego w headerze to pokombinuję i niedługo myślę wstawię kolejne foto

[kiubus95]

Wymyśliłem takie coś jak w załączniku. Nie wiem co z tą linią na dole, która ma oddzielać stopkę od reszty strony. Myślałem, żeby zrobić jakoś tak, że gdzieś przy końcu prawym był widoczny jakby blask światła. Albo żeby światło było kumulowane na środku linii? Niestety nie wiem jak takie coś wykonać, nie widziałem też żadnego tutoriala a sama linia taka jaka obecnie jest wydaje mi się trochę "łysa" i banalna.
Czekam na komentarze

[be@]

Sama nie wiem, trochę dziwna ta czcionka w menu. Header z kolei wydaje mi się zbyt "agresywny" z tym wielkim, białym i tłustym napisem. Ja bym jednak zostawiła w menu poprzednią czcionkę, a napisom w headerze zmniejszyła krycie albo dała cieńszą wersję tej samej czcionki, ale nie jestem znawcą. Na pewno powinieneś zainteresować się typografią, aby czcionki na stronie były w odpowiednim stylu, pasującym do charakteru strony i do siebie nawzajem. Może po prostu zrób do końca, wtedy łatwiej będzie ocenić, chyba, że wypowie się ktoś bardziej kompetentny. Mi osobiście jakoś niezbyt się to teraz podoba (ale ja też nie gustuję zbytnio w stylu flat, strony w tym stylu są dla mnie mniej czytelne i wg mnie styl ten sprawdza się głównie na smartfonach i tabletach, ew. na stronach z dużą ilością tekstu i małą elementów nawigacyjnych). Na plus wyszło jedynie odsunięcie napisu od linii.
 

[kiubus95]

Ok. Ostateczna chyba wersja.

[kiubus95]

nadal czekam na opinie

[Madzialena]

Źle nie jest. Tak pusto trochę. To wygląda bardziej jak szkielet pod projekt (może to  przez to, że sama czasem podobne rzeczy robię a potem to ubieram w efekty). Spróbuj popatrzeć na inne projekty i trochę na nich się wzorować.
http://www.awwwards.com/ - klasa sam w sobie, zbiór najlepszych projektów z internetu.
https://www.behance.net/ - Tu też jest masa inspiracji.
Generalnie nie da się nauczyć projektowania stron. Można nauczyć się tworzenia poszczególnych elementów/efektów które sklejasz razem. Nie bój się używać większej ilości kolorów bo coś ubogo u ciebie z tym. Brawa, że nie na dźgałeś masy różnych czcionek, bo inaczej był by problem
Edit: Natknęłam się na to przez przypadek ale może się przydać: http://www.goodui.org/ - generalnie chodzi o układ strony. Co zrobić żeby strona była czytelna. Po angielsku, ale obrazki mówią całkiem sporo

[kiubus95]

dziękuję za opinię. Ogólnie ma to być layout strony w stylu flat (nie dość, że pierwszy we flacie to w ogóle pierwszy w życiu). Tekstu właśnie nie pisałem, dlatego taka pustka. Pasuje go pociąć i zakodować, ale nie mam niestety pojęcia jak go pociąć :/