Jak nauczyć się projektować ładne strony internetowe? [Zamknięte]

32

Jestem umiarkowanie sprawnym programistą. Mogę umieścić rzeczy tam, gdzie chcę, i umieścić tam trochę JQuery, jeśli zajdzie taka potrzeba. Jeśli jednak tworzę własną stronę internetową (co zaczynam robić), nie mam pojęcia, jak ją zaprojektować. Gdyby ktoś usiadł obok mnie i wskazał na ekran i powiedział: „włóż to zdjęcie, napisz tam”, mogę to zrobić dość łatwo. Ale zaprojektowanie własnej strony z wyborem kolorów i tekstu będzie wyglądało tak, jakby wynalazł ją maluch.

Czy ktoś zna strony internetowe / książki, na które mogę spojrzeć, czy też ktoś ma jakieś porady na temat podstaw projektowania stron internetowych dla dzieci?

Richard
źródło
1
Spójrz na kod stworzony w witrynach o dobrym projekcie. Powinieneś być w stanie zobaczyć ich arkusze stylów i dowiedzieć się, jak zostały one połączone z HTML.
ChrisF
1
Wydaje mi się to trochę nie na temat. Być może bardziej odpowiedni dla webmasterów?
Phil Mander,
9
ChrisF, pyta o projekt, a ty sugerujesz spojrzenie na kod? Niech zgadnę, jesteś programistą.
Craig
1
@Phil - Webmasterzy nie projektują stron internetowych. Zdecydowanie nieodpowiednie dla tej strony.
Charles Boyung

Odpowiedzi:

10

Masz kilka rzeczy do zrobienia.

Wskazówki:

Naucz się korzystać z Photoshopa. (W szczególności style warstw są doskonałe. Zauważ, że mogą być trudnymi efektami do zaimplementowania w CSS2). Jest wiele do zrobienia dobrych makiet.

Spójrz na profesjonalnie zaprojektowane strony. Jakie strony wyglądały dla Ciebie ładnie?

Znajdź witryny, które Ci przeszkadzają, i zastanów się, co może to poprawić. Zobacz także reklamy produktów. Opakowania do żywności. Ogłoszenia prasowe. Nazwij to.

Ponadto, kiedy zaczniesz rozumieć, ćwicz, ćwicz, ćwicz. Opracowanie grafiki wymaga czasu, zwłaszcza od programisty, który musi wziąć pod uwagę kodowanie. (Gradienty a „kafelkowanie”)

Przybory:

(Photoshop jest osobistym ulubieńcem. Paint.NET jest dobrą alternatywą dla systemu Windows, ale nie jest tak potężny.)

System siatki 960 Nathana Smitha . Ma szablony dla wielu popularnych programów graficznych. Sprawdź to.

Referencje:

Spójrz na niektóre z tych stron: (Widziałem więcej, postaram się dodać, gdy je zobaczę)

Mosze
źródło
@Moshe - Ponieważ poprosiłeś o komentarze na swojej stronie - wygląda naprawdę świetnie, jedynym problemem, który mam od razu, jest czerwony kolor; to dla mnie trochę zbyt denerwujące.
Edan Maor,
@Edan Maor - Dziękujemy za uwagę. Słyszę twój kawałek o czerwonym. Sprawiłem, że jest tak jasny, ponieważ pasuje do politycznej kolorystyki czerwieni, bieli i niebieskiego. Gdybym był ciemniejszy, leżałby bardziej jak bordowy, którego tam nie ma. Dzięki za wkład! Doceniam to.
Mosze
Jako darmowa alternatywa dla Photoshopa można spróbować GIMP znaleźć tutoriale na: tuxradar.com/gimp
kasterma
@Kasterma - Tak, GIMP też działa, ale Photoshop jest standardem branżowym. GIMP jest zbyt skomplikowany. Też tego użyłem.
Moshe,
960 kratek!
JP Alioto,
10

Strona praktyczna

Na pewno jest kilka praktycznych aspektów projektowania krok po kroku, których należy się nauczyć. Nie wszystko jest subiektywne.

   • Samouczki dotyczące projektowania stron internetowych: http://webdesign.tutsplus.com/

   • Poradniki Photoshop: http://psd.tutsplus.com/

   • Mnóstwo samouczków: Lynda

Inspiracja

   • Strona internetowa: niezrównany styl

   • Strona internetowa: Abduzeedo

   • Książka: wytyczne dotyczące sukcesu online

   • Strona internetowa: Smashing Magazine

Umiejętności projektowe

Ogólny projekt

   • Książka: Projekt graficzny: nowe podstawy

   • Książka: projekt graficzny, odnośniki

   • PDF: Wielka Czwórka: kontrast, powtórzenie, wyrównanie, bliskość

Typografia

   • Książka: Myślenie z typem

   • Książka: elementy stylu typograficznego

   • Artykuł: http://en.wikipedia.org/wiki/Typography

   • Artykuł: http://www.informationarchitects.jp/en/the-web-is-all-about-typography-period/

Układ

   • Książka: skoroszyt układu

Kolor

   • Książka: skoroszyt do projektowania kolorów

   • Książka: skoroszyt harmonii kolorów

Filozofia projektowania

„Najgłupszym błędem jest postrzeganie projektu jako czegoś, co robisz pod koniec procesu„ uporządkowania ”bałaganu, w przeciwieństwie do zrozumienia, że ​​jest to kwestia„ dzień pierwszy ”i część wszystkiego”. -Tom Peters

 

„Dobry design sprawia, że ​​użytkownik jest szczęśliwy, producent w czerni, a esteta bez urazy”. -Raymond Loewy

 

„Naprawdę elegancki design łączy najwyższą funkcjonalność w prostej, uporządkowanej formie”. -David Lewis

„Dobry projekt to dobry biznes”. -Thomas J. Watson Jr.

Więcej cytatów

Andy Fleming
źródło
zapisz ten komentarz
Lanaru
6

To może być nieco nie na temat, ale pamiętam, że Jeff Atwood zdecydowanie polecił książkę Don't Make Me Think . Opisuje, w jaki sposób należy zaprojektować witrynę tak, aby zapewnić jak najlepszą obsługę.

Preets
źródło
Doskonały punkt UX jest bardzo ważny.
Moshe
7
DMMT jest, jak rozumiem, bardziej książką użyteczności niż książką do projektowania stron internetowych.
Fishtoaster,
3
@ Fishtoaster tak, ale użyteczność i design są ze sobą powiązane, ponieważ w dobrej użyteczności określa projekt strony internetowej.
Darknight
1

Ogilvy o reklamie: ta książka obejmuje podstawy projektowania graficznego, a także wiele zdrowego rozsądku w tworzeniu wszelkiego rodzaju ulotek, reklam itp., Nawet jeśli została napisana na długo przed erą www.

Mówiąc bardziej ogólnie, przeglądaj książki i czasopisma dotyczące projektowania graficznego, dzieł sztuki, dekoracji wnętrz, kręcenia filmów - istnieje wiele wspólnych zasad projektowania, które sprawiają, że coś jest wizualnie atrakcyjne, a informacje lub inne treści są atrakcyjne. W pewnym sensie, jak elektromagnetyzm jest powszechny w elektronice, naukach planetarnych, chemii, nuklearnej i innych dziedzinach fizyki i inżynierii.

DarenW
źródło
1

Kolejną dobrą książką w tej przestrzeni byłby Design of Everday Things. Obejmuje wiele praktycznych pomysłów, takich jak faworyzowanie projektów, które nadają się do łatwego użytkowania, wykorzystując to, jak ludzie naturalnie podchodzą do nowej rzeczy. Książka nie jest specjalnie poświęcona interfejsowi użytkownika ani projektowaniu stron internetowych, ale wydaje mi się, że trochę to omawia.

Wczesnym przykładem książki są drzwi. Mówi o tym, jak drzwi z gałką lub klamką po jednej stronie i widocznymi zawiasami są intuicyjne, ponieważ wiesz, że drzwi otworzą się, popychając lub pociągając po tej stronie. Fantazyjne drzwi z ukrytymi zawiasami, popychacze na całej drzwi lub wyśrodkowane gałki są trudne i wymagają chwili eksperymentowania, ponieważ ich obsługa nie jest intuicyjna.

CodexArcanum
źródło
Ta książka była kluczowym materiałem do czytania na moim kursie interakcji człowiek-komputer w Uni.
Richard
1

Jednym z narzędzi, które uważam za nieocenione w projektowaniu, jest Color Scheme Designer . Zazwyczaj wybieram kolor, na którym chciałbym oprzeć projekt, a następnie używam schematu „Analogiczny”, aby uzyskać ładny zestaw pasujących kolorów. Dla mnie poprawienie kolorów jest najgorszą częścią, więc potem reszta to po prostu ładny układ i zastosowanie ograniczonej palety kolorów.

CodexArcanum
źródło