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?

• 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:

• Smashing Magazine
• Porady PSD
• Abuzeedo
• Stoisko UX
• Kocham typografię
• Jason Santa Maria

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ł.

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:

• http://www.alistapart.com/
• http://webdesignledger.com
• http://behance.net - hostuje portfolio wielu światowej klasy projektantów, z których można czerpać inspirację

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.

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.

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 - 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.

Dowiedz się dużo o typografii.

Od klasyki …

^{Jan Tschichold}

Nie klauni …

^{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}

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

^{Systemy sieciowe w projektowaniu graficznym, Brockmann}

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

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 .

2. 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.

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.

3. 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

   2. Jego (przyszli) użytkownicy
   3. Zamierzone doświadczenie dla użytkowników / gości
   4. 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 .

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.

Wystarczy dodać jeszcze kilka linków dla osób pochodzących ze środowisk programistycznych zainteresowanych projektowaniem interfejsu użytkownika.

• Projekt dla hakerów (drukowana książka)
• Zasady projektowania interfejsu użytkownika (strona)
• Projekt interfejsu użytkownika krok po kroku (ebook)
• The Shape Of Design (darmowa wersja online)

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 !!!

Subskrybuj http://sidebar.io/, aby otrzymywać codzienne biuletyny. Każdy artykuł będzie pomocny w taki czy inny sposób. Innym świetnym sposobem na samodzielne poznanie wzorów jest drybling .

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.

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