Wskazówki i zasoby dla początkujących projektantów

189

Dzięki internetowi projektowanie graficzne i programowanie stają się coraz bardziej zbieżne.

Jako programista stale potrzebuję podstawowej wiedzy z zakresu projektowania graficznego, ale mam problem ze znalezieniem dokładnych, ale zwięzłych zasobów do nauki projektowania graficznego, a zamiast tego zwykle znajduję fragmenty wiedzy dotyczące danego zadania.

Czy możecie zaoferować jakieś wskazówki lub polecić dobre książki, samouczki, blogi i strony internetowe, które zapewniają przegląd na poziomie początkującym projektowania stron internetowych, które według Państwa były skutecznymi i wysokiej jakości materiałami do nauki. Nie szukam wskazówek, jak korzystać z narzędzi do edycji obrazów, ale zakładając podstawowe ich zrozumienie, jakie zasoby i porady najlepiej pomogą nowemu projektantowi stworzyć profesjonalnie wyglądające projekty?

Andy Groff
źródło
Uznałem to za pomocne: net.tutsplus.com/articles/lectures/design-for-developers Warto obejrzeć.
dan_waterworth

Odpowiedzi:

180
  • Zachowaj prostotę - na początku nie próbuj robić nic fantazyjnego ani pełnego przygód. Najpierw zapoznaj się z podstawami, a potem zacznij eksperymentować. Nie próbuj emulować interfejsu komputera Star Trek.
  • Bądź konsekwentny - spójny projekt jest częścią fundamentu dobrego projektu. Śledź swoje marginesy, rozmiary i rozmieszczenie i utrzymuj je przez cały projekt.
  • Usuń bałagan - uwzględnij tylko elementy niezbędne do projektu. Usuń wszystko inne.
  • Priorytet - jaki jest główny cel projektu? Podkreśl ten cel. Zrób to oczywiste.
  • Użyj białych znaków - Zezwól na prawidłowe marginesy. Duże bloki tekstu z niewielkimi marginesami lub bez marginesów nie są zbyt czytelne. To samo dotyczy innych elementów projektu.
  • Użyj palety kolorów - nie należy używać łącznie więcej niż 4-5 kolorów.
  • Spójne czcionki - przyklej do jednej lub dwóch czcionek. Używaj ich konsekwentnie, zwykle jeden dla nagłówków, drugi dla tekstu akapitowego. Oblicz i utrzymuj spójne rozmiary czcionek, wysokości linii i odstępy między wierszami. Nie używaj Comic Sans, chyba że możesz odeprzeć wściekłe zombie welociraptor.
  • Projektowanie przede wszystkim - projektowanie nie powinno być późniejszą refleksją; powinien być pierwszorzędnym członkiem etapu planowania. Projektowanie będzie sposobem, w jaki użytkownicy będą wchodzić w interakcje z twoim programowaniem, i będą oni najpierw formułować swoje opinie, w dużej mierze na podstawie twojego projektu. Nadaj projektowi odpowiednie znaczenie.

Jeśli chodzi o zasoby, możesz sprawdzić dowolne z następujących witryn:

Virtuosi Media
źródło
13
„Nie próbuj emulować interfejsu komputerowego Star Trek”. Hahaha, genialne. : D Dzięki za pouczającą odpowiedź.
Rob Howard
2
Sprawdź hackdesign.org , to bardzo dobra cotygodniowa lekcja na temat projektowania dla hakerów.
Augustin Riedinger
1
PSD Tuts - zły link!
Dmitri Zaitsev
1
Dodam do tej listy, jak ważny jest użytkownik, projekt powinien być przede wszystkim użyteczny i wszystko, co przeszkadza w użyteczności, powinno zostać porzucone
Toni Leigh
W zasadzie wszystko, co robisz z kodem. Trzymać albo klapek lub przestrzeni. Użyj białych znaków. Usuń bałagan itp.
Bald Bantha
29

Indeks podstaw projektowania Jima Krause'a dał mi bardzo dobre podsumowanie podstaw kompozycji, koloru i typu. Nie byłem wielkim fanem większości jego przykładów, ale naprawdę dobrze ilustrują jego argumenty, a on porusza kilka cennych rzeczy, o których nie widziałem zbyt wiele gdzie indziej. I być może najważniejsze, przeczytanie go bardzo mnie podekscytowało, że mogłem eksperymentować z pomysłami, które przedstawiał.

Damon
źródło
24

Czasami istnieje niewielkie nakładanie się między tworzeniem stron internetowych a projektowaniem stron internetowych, ale nie sądzę, że twórcy stron powinni starać się być pełnoetatowymi projektantami, chyba że zechcą włożyć w to tyle wysiłku, ile nauczyli się programować. To nie jest coś, w co można po prostu spędzać weekendy i być dobrym.

Jeśli tak, możesz nauczyć się być projektantem stron internetowych (tzn. Zrób własny projekt stron internetowych, na których pracujesz), to naprawdę polecam ci formalne szkolenie (nawet jeśli to tylko kilka kursów projektowania college'u) nauczyć się podstaw projektowania wizualnego i kompozycji. Pomocna może być książka projektowa w stylu podręcznika, taka jak ta, którą opublikował Damon, ale musisz faktycznie wykonać wszystkie ćwiczenia w książce i upewnić się, że rozumiesz materiał. Ale co najważniejsze, musisz poświęcić dużo czasu na przeglądanie (przeglądanie galerii projektów online, przeglądanie czasopism i reklam w czasopismach itp.) I tworzenie projektów (pobierz kilka ćwiczeń projektowych online lub weź udział w konkursach online).

Jeśli ma to pomóc w komunikowaniu się z projektantami stron internetowych / grafik, z którymi pracujesz, to po prostu zdobycie książki, która nauczy Cię słownictwa (np. Koncepcje typografii) i skupienie się na użyteczności , dostępności i projektowaniu UX to prawdopodobnie najlepsze wykorzystanie twojego czasu. W ten sposób możesz zaangażować się w kreatywne kierowanie projektem i pomóc zaprojektować interfejsy, ale to projektant tworzy „wygląd” lub estetykę witryny.

Virtuosi Media wymienia wiele dobrych zasobów (sieć Tutsplus jest ogólnie świetna, a Smashing Magazine to lektura obowiązkowa dla każdego programisty / projektanta stron internetowych), do której dodałbym:

Calvin Huang
źródło
2
Zgadzam się z większością twoich argumentów i nie rozważam zmiany kariery zawodowej ani czegoś takiego :-) W pracy i gdybym miał rozpocząć naprawdę poważny osobisty projekt, oczywiście wykonują ją specjaliści. Ale ja i ja zakładamy, że wielu innych programistów lubi budować małe mini projekty i nie możemy zatrudnić profesjonalistów na coś, co będzie 4 razy w miesiącu. Tak więc dzięki tym staraniom sam je projektuję, a im lepszy wygląd, tym większa szansa, że ​​wystartują. Lubię też proces tworzenia sztuki cyfrowej. Jest to miła przerwa w kodowaniu, a przyzwoity wynik sprawia, że ​​jest to tym bardziej przyjemne.
Andy Groff,
4
@Andy Groff: Brzmi jak dobry plan. Miałem głównie na myśli twórców stron internetowych, którzy sami zajmują się projektami komercyjnymi i spędzają 95% swojego czasu na części programistycznej, a następnie starają się wykonać projekt w ciągu ostatnich 3-4 dni przed upływem terminu. Ale myślę, że każdy może coś zyskać, ucząc się nowych umiejętności i poszerzając swoje horyzonty. To trochę tak, jak sportowcy wykonują trening krzyżowy, co pomaga poprawić ich ogólną wydajność.
Calvin Huang
1
Istnieje ogromne nakładanie się ról. Oczywiście te role zwykle nie są obsługiwane przez tę samą osobę.
DA01
19

Sam jestem programistą i dla mnie bardzo pomocne są następujące książki:

  • Książka projektanta nie-projektanta autorstwa Robina Williamsa: Ta książka obejmuje podstawy projektowania graficznego.
  • Rysowanie po prawej stronie mózgu przez Betty Edwards: Książka do rozwijania umiejętności rysowania.
  • Interfejs Humana autorstwa Jefa Raskina: Ta książka prowokuje do przemyśleń na temat projektowania interfejsu użytkownika.
caahab
źródło
15

Być może nie dotyczy to wszystkich przypadków, ale dla programistów internetowych jedną z największych rzeczy, które mnie wyróżniają, być może odrobinę wypełniając lukę, jest nauka CSS wewnątrz i na zewnątrz, ponieważ umiejętność dobrego projektowania nic nie znaczy jeśli nie możesz zintegrować go z tworzonym projektem.

Kaji
źródło
12

W 2004 roku znalazłem się w połowie drogi między oboma światami, tak jak przez większość mojego życia - robiłem internet od HTML 3.2 w czasach dot-com; wychowany w Apple // e przez rodziców (choreograf i pedagog), którzy pozwolili mi zachęcić mnie do spędzenia dużo czasu ze sztuką. Projektowanie nie jest sztuką, a niektóre bardziej algorytmiczne wzorce dobrze współgrają z programowaniem, niezależnie od tego, czy robisz to w sieci, czy w inny sposób.

Histogram półki na książki

  • Histogram półki na książki - wydruk, który wykonałem w szkole wyższej, zarówno projektowy, jak i programistyczny.

Ale tak, 2004: rozdzieliłem różnicę, kiedy poszedłem do szkoły średniej, gdzie najpierw dostałem wykształcenie typograficzne pierwszej klasy, a potem swobodę eksploracji - w tym czasie przydały się moje skłonności do maniaków.

Więc może rozważ szkolnictwo wyższe lub cokolwiek innego, podobnie jak angażowanie się w ciebie w sposób całkowicie pochłaniający. Życzymy powodzenia.

fish2000
źródło
12

Dowiedz się dużo o typografii.

Od klasyki

Forma książki, Tschichold
Jan Tschichold

Nie klauni

Koniec wydruku: projekt graficzny Davida Carsona
David Carson

Strategiczna i skuteczna typografia jest jedną z najczęściej nieobecnych cech w tej dziedzinie (i zawsze była).

Zwykle mogę zatrudnić projektanta opartego całkowicie na ich obsłudze typów. Około 80% historii znajduje się w konfiguracji wznowienia.

Dobrym (bezpłatny) start jest to szczegółowy adaptacja od zasadniczego zasobu Roberta Bringhurst dla aplikacji do sieci.

Elementy stylu typograficznego, Bringhurst
Elementy stylu typograficznego, Bringhurst

Jest to szersza uwaga, która dotyczy interakcji typu i układu.

Systemy sieciowe w projektowaniu graficznym
Systemy sieciowe w projektowaniu graficznym, Brockmann

zwykłe ubrania
źródło
10
  1. Myśl krytycznie o zaprojektowanych obiektach wokół ciebie

    Prawie wszystko w środowisku stworzonym przez człowieka ma za sobą jakiś projekt, czy to grafika, strona internetowa czy modny dodatek.

    Zwróć uwagę, jak dobrze projekt funkcjonuje zgodnie z jego przeznaczeniem, a także jak wygląda.

  2. Pomyśl o projekcie jako sposobie zaspokojenia potrzeby lub rozwiązania problemu

    Choć stara się, aby wszystko wyglądało dobrze, design różni się od innych rodzajów sztuki tym, że ma praktyczne zastosowanie.

    Na przykład logo to rodzaj projektu graficznego, który pomaga szybko rozpoznać markę lub firmę.

    Artykuł odzieżowy służy do zakrycia ciała, a także sprawia, że ​​użytkownik wygląda atrakcyjniej.

  3. Ćwicz komunikację wizualną.

    Projektanci muszą mieć możliwość tworzenia rysunków lub innych przedstawień swoich projektów w celu ich udoskonalenia i wyjaśnienia innym osobom, takim jak współpracownicy i producenci.

    Rysowanie jest potężnym narzędziem dla projektantów, ale nie martw się, jeśli nie możesz rysować fotorealistycznie. Rysunki projektantów nie muszą być arcydziełami, a jedynie sposobem na szybkie uchwycenie pomysłów, które doprowadzą do ukończenia produktu. Śledzenie jest również całkowicie dopuszczalne.

    Oprócz rysunków projektanci wykorzystują również takie elementy, jak makiety, prototypy i obrazowanie komputerowe do wizualizacji swoich projektów.

  4. Dowiedz się, jak powstają rzeczy

    Kiedy pracujesz jako projektant, musisz nie tylko zastanowić się, co jest przyjemne dla oka, ale zawsze musisz zastanowić się, jak Twój projekt zostanie wdrożony.

    W przypadku przedmiotu takiego jak etui na telefony komórkowe projektanci przemysłowi muszą zastanowić się, jakie rodzaje tworzyw sztucznych i procesy formowania zostaną zastosowane oraz w jaki sposób każda część zostanie połączona ze sobą.

  5. Znajdź dobre źródła informacji

    Oprócz czasopism poświęconych projektowaniu szukaj książek na temat procesu, zasad i metod projektowania.

    Spróbuj poszukać w podręcznikach i filmach technicznych różnych rzeczy dotyczących konstrukcji odzieży, metod produkcji i różnych technik rzemieślniczych.

    Nauka projektowania jest głębsza niż czytanie magazynów o modzie i dekorowaniu, choć są to dobre zasoby dla aktualnych trendów.

  6. Rozwijanie umiejętności projektowania

    Studiowanie i praktyka są dobre, ale tym, co naprawdę przeniesie Twój projekt na wyższy poziom, jest doświadczenie w świecie rzeczywistym.

  7. Szybko popełniaj błędy

    popełnisz wiele błędów, a im szybciej je znajdziesz, tym lepiej.

  8. Zawsze bądź gotowy na łapanie pomysłów.

    Szukaj inspiracji wszędzie. Inspiracja nie musi pochodzić z innych wzorów lub trendów projektowych - często może pochodzić z natury lub rzeczy, które zdarzają się przypadkowo.

Książki i materiały

http://www.alistapart.com

http://webdesignledger.com

Smashing Magazine

Porady PSD

Abuzeedo

Stoisko UX

Rachuru
źródło
7

Kilka punktów, o których należy pamiętać:

  1. Każdy projekt rozwiązuje problem

Przestań myśleć o projekcie w kategoriach „Jak sprawić, by był ładny?” i zacznijcie myśleć o tym w kategoriach „Jak sprawić, by korzystanie z niego było tak proste, jak to tylko możliwe po ludzku?”

Kiedy tworzysz strony internetowe, oznacza to, że w najszerszym znaczeniu rozwiązujesz problem biznesowy .

Istnieje strona internetowa, aby zrealizować cel biznesowy .

Użytkownicy strony internetowej również myślą o swoich celach - mogą chcieć coś kupić, porównać produkty, przeczytać na dany temat itp.

Twoim zadaniem jako projektanta jest pomóc firmie , upewniając się, że jak najwięcej użytkowników osiąga cel biznesowy i pomaga użytkownikom nawigować po stronie, aby mogli osiągnąć swój własny cel.

Na przykład projektujesz sklep e-commerce: celem biznesowym będzie sprzedaż produktów. A celem użytkowników jest znalezienie tego, co chcą kupić, tak szybko, jak to możliwe, i sprawdzenie, tak szybko, jak to możliwe.

Duża część procesu projektowania polega na rozwiązywaniu problemu, budowaniu profilu użytkownika, zastanawianiu się, jak zrealizować cel biznesowy itp.

Kolory, czcionki, układ, każda decyzja dotycząca projektu musi być podyktowana celem witryny .

  1. Powtarzalność sprawia, że ​​wszystko wygląda ładnie .

Na tym polega konsekwencja.

Na przykład parowanie czcionek. Czcionki są sparowane w oparciu o podobne cechy, przy powtarzaniu szczegółów.

Oto mecz: Farnham i Benton Sans.

Farnham i Benton Sans są dobrym partnerem

Zgodnie z tym postem tutaj 2 te dwie czcionki pasują do siebie, ponieważ:

[...] twarze są podobne do przysadzistości małych liter, które mają wyraźnie krótkie wstępki i zstępy. [...] Małe litery obu są szerokie.

Powtarzanie niektórych cech sprawia, że ​​te 2 czcionki działają dobrze razem. Możesz je zobaczyć na stronie internetowej tutaj 3 .

Powtarzanie przynosi harmonię w projekcie. Harmonia sprawia, że ​​projekt wygląda pięknie.

Ale, jak widać, Farnham i Benton Sans również kontrastują - Farnham to czcionka serif, a Benton to sans serif.

Dlaczego potrzebny jest kontrast? Chcemy wprowadzić podobieństwa w projekcie, prawda?

Cóż, tak, ale zbyt wiele powtórzeń powoduje, że projekty są nudne i trudne w użyciu .

Lekarstwem jest kontrast.

  1. Kontrast pomaga użytkownikowi znaleźć drogę

Pomaga im rozróżniać różne elementy. Pomaga im znaleźć kluczowe elementy, takie jak nagłówki, nawigacja, przyciski.

Im ważniejszy element, tym bardziej powinien kontrastować z otoczeniem.

Użyj powtarzania, aby Twoje projekty były spójne. Jak powiedzieli inni - 2 czcionki, ograniczona paleta kolorów itp.

Użyj kontrastu, gdy naprawdę potrzebujesz oddzielić element od reszty.

Wszystko, co warto wiedzieć, ale ... nadal nie pomaga ci zaprojektować następnej strony, prawda?

Cóż, ja też mam na to rozwiązanie .

Krok 1, aby stać się lepszym w projektowaniu stron internetowych, to obserwowanie i absorbowanie pracy innych. Dużo tego. Stąd pochodzi „inspiracja”.

Spójrz na sto projektów, które lubisz, przeanalizuj je, a zaczniesz dostrzegać wzorce. Twój mózg pomoże ci połączyć te wzory we własny projekt, który będzie odmianą wszystkich podobnych projektów, które widziałeś. Nie musisz tworzyć czegoś „unikalnego”.

Podsumowanie: Następnym razem, gdy zaczniesz projektować projekt poboczny

Przejrzyj kilkanaście podobnych stron / aplikacji internetowych i szybko szkicuj ich projekty. Zwróć uwagę, jakiego przepływu pracy używali. Dlaczego go wykorzystali? Zwróć uwagę, jakich kształtów, kolorów i czcionek używali.

Następnie przejdź przez ten proces, aby stworzyć własny projekt:

  1. Zdefiniuj projekt. Zanurz się w projekcie i dowiedz się więcej o:

    1.Jego cel, zamierzone wyniki

    1. Jego (przyszli) użytkownicy
    2. Zamierzone doświadczenie dla użytkowników / gości
    3. Branding projektu
  2. Zdobądź potrzebne zasoby. Zdobądź (przykładowe) treści (pożycz z podobnych witryn)
  3. Nadaj kształt treści

    1. Wybierz krój, w którym chcesz wpisać treść (wybierz taki, który pasuje do nastroju i przesłania witryny)
    2. Wybierz rozmiar czcionki dla kopii głównej
    3. Wygeneruj skalę modułową (tabelę proporcjonalnych wymiarów harmonicznych) na podstawie rozmiaru czcionki kopii głównej (używając Skali typu - kalkulator wizualny)
    4. Naszkicuj różne układy w oparciu o wymagania projektu
    5. Zbuduj układ (w HTML i CSS) za pomocą skali modułowej: szerokość kolumny, wysokość linii, rozmiary nagłówków, dolne marginesy, kolumny (w razie potrzeby)
    6. Zastosuj kolor zgodnie z wytycznymi marki

Możesz przeczytać więcej o każdym kroku z tego procesu tutaj .

rsdimitrov
źródło
6

Trochę więcej:

  1. Przejrzyj inspirujące kolekcje witryn internetowych, aby znaleźć pomysły. Kolekcja Motherload inspirujących kolekcji witryn zawiera całkiem sporo kolekcji. Kolejne dwa dobre strony to siiimple.com i minimalsites.com .

  2. Sugestia Virtuosi Media „Usuń bałagan” jest zdecydowanie idealna, ale strona z bałaganem wykonywana przez początkującego wygląda lepiej niż minimalistyczna strona wykonywana przez początkującego. Zaśmiecenie nieco kamufluje inne słabe elementy projektu, odwracając uwagę od treści. W typowej witrynie biznesowej jest zbyt dużo bałaganu, podobnie jak prawie wszystkie szablony, ale nadal są wystarczająco profesjonalne.

    Wymaga intymnego połączenia z czcionkami, kontrastem, ujemną przestrzenią, kolorem, gęstością, przepływem ..., aby stworzyć naprawdę dobrze zaprojektowaną, wydajną stronę, która dobrze oddycha.

  3. Jeśli wszystko stanie się nieco przytłaczające, rozważ zakup szablonu.

jontyc
źródło
6

Na początku będziesz miał kłopoty, ponieważ niektóre rzeczy ci nie przeszkadzają. Ale będziesz musiał uzbroić się w cierpliwość i dużo ćwiczyć. Kiedy zacząłem projektować i spojrzeć wstecz na moją pracę sprzed 4 lat, nie mogę uwierzyć, że ją wykonałem.

Naprawdę musisz poszukać innych świetnych projektantów. W tym celu powinieneś podążać za świetnymi projektantami na Dribbble . Inną bardzo ważną rzeczą jest regularne oglądanie najnowszych projektów na stronach galerii css, takich jak www.minimalistgallery.com lub innych.

Życząc wszystkiego najlepszego !!!

Vicky
źródło
2
Cześć, oba posty na tej stronie są powiązane z tą samą witryną zewnętrzną, minimalistyczną galerią. Wiesz, ludzie mogą myśleć, że takie rzeczy wyglądają na nieco spamerskie.
user568458
2

To może być dość ogólna wskazówka, ale dla mnie jest to coś, co naprawdę mówi, czy ktoś jest dobrym projektantem, czy nie:

Białe spacje, marginesy i wyrównanie.

Są kluczem do tworzenia zgrabnych, profesjonalnie wyglądających projektów. Tworzą swoistą „przestrzeń do oddychania” i naprawdę mogą ustalić, czy Twój projekt będzie wyglądał razem, czy nie. Podobnie jak w przypadku czcionek, chcesz trzymać się określonego zestawu marginesów / białych znaków, aby układ był czysty.

Aby śledzić takie rzeczy, bardzo przydatne może być użycie siatki lub przewodników do projektowania.

Lato
źródło
0

Twoje pytanie brzmi: „Jako projektant ciągle potrzebuję podstawowej wiedzy na temat programowania aplikacji”. Oba są rozległymi obszarami, z super nałożonymi regionami, które się potrzebują. Dobra wiadomość: jesteś zainteresowany i rozumiesz ich znaczenie. Zła wiadomość: nie ma łatwego sposobu, aby w pełni zrozumieć, co wymaga dobrego projektu, bez odpowiedniego kursu lub metodologii. ALE na pierwsze kroki, ta książka jest jakoś dobrym sposobem na bezpieczne rozpoczęcie budowania sensownych systemów wizualnych.

Książka projektowa dla innych projektantów

Ale Macedo
źródło