Ścieżka programisty do projektanta: jak to zrobić

Jako programista, który chce zostać projektantem, bardzo interesuje mnie nauka tworzenia najwyższej jakości interfejsu użytkownika dla stron internetowych, aplikacji mobilnych itp. Jednak nie wiem nic o Photoshopie ani nic związanego z projektowaniem, moje główne umiejętności to HTML i CSS .

Od czego powinienem zacząć Jak nauczyć się tworzyć piękne strony internetowe i interfejsy?

Jako były programista, który został projektantem, zasugerowałem kilka rzeczy. Przede wszystkim zacznij pracować nad projektami! Jeśli masz taką możliwość, znajdź mentora, który jest już projektantem interfejsu użytkownika / interfejsu użytkownika i zacznij z nimi pracować nad projektami. Odkryłem, że nauczyłem się więcej, pracując nad projektami i przyswajając wiedzę od ludzi, którzy robili to od lat, niż kiedykolwiek czytając książkę.

Biorąc to pod uwagę, jeśli chcesz czytać na UI / UX / itp., Rzuciłbym okiem na ten doskonały wątek: Must-read User Interface Book? Myślę, że moim osobistym faworytem jest „Don't Make Me Think” Steve'a Kruga - ale jestem pewien, że w końcu znajdziesz swojego ulubionego.

Wreszcie, w odniesieniu do narzędzi takich jak Photoshop, Illustrator itp. ... nie martw się! W końcu znajdziesz narzędzia, które najlepiej Ci odpowiadają. Osobiście zaczynam od makiet ołówkowych i papierowych, a następnie w zależności od projektu albo przeniosę się do czegoś w Balsamiq , albo Axure , albo czasem prosto HTML i CSS - to naprawdę zależy od wielkości projektu, zakresu itp. Użyj tego, co jest najwygodniejszy dla ciebie. Ostatecznie liczy się tylko to, że jasno przekazujesz swoją wizję swojego projektu, a nie to, jakiego narzędzia użyłeś do tego.

Długo mieszam projektowanie i rozwój. Ale na początku spędzałem więcej czasu na nauce narzędzi do edycji niż na tym, co stanowi dobry projekt. Istnieje wiele samouczków do nauczenia się korzystania z Photoshopa, Illustratora, Fireworks itp. Ale miło jest mieć wyczucie i kierunek projektowania. W tym wciąż chcę być lepszy.

Jedną z moich inspiracji jest facet o imieniu Robby Ingebretsen, ponieważ bardzo dobrze rozwija zarówno projektowanie, jak i projektowanie. Jego strona internetowa to nerdplusart.com .

Jest kilka rzeczy, na które mógłbym spojrzeć od niego ...

• Moja (bardzo) krótka lista książek do przeczytania dla projektantów
• Podstawy projektowania dla programistów
• 10 sposobów na zaatakowanie problemu projektowego i wygranie zwycięstwa

Jak mówi we wszystkich swoich prezentacjach, myślę, że niezwykle ważne jest znalezienie inspiracji dla swoich projektów. Nawet najlepsi projektanci nie wymyślają tego po prostu z powietrza. Jedną z moich zakładek jest kolekcja „New Graphic Design” , głównie w druku. Większość z nich jest bardzo prosta, często wykorzystując samą typografię jako główne elementy graficzne. Tak proste, jak się wydaje, po prostu przeglądanie takich rzeczy może pomóc w ukształtowaniu projektu.

Podobnie jak uczenie się Visual Studio nie czyni dobrego programisty, tak samo uczenie się Photoshopa nie czyni dobrego projektanta interfejsu użytkownika.

Jeśli chcesz iść formalną drogą, edukacja w sztuce / projektowaniu graficznym, czynnikach ludzkich, psychologii, architekturze informacji / naukach bibliotecznych byłaby miejscem do poszukiwania.

Nieformalnie, zabierz się do pracy! ;) Najlepszym sposobem na naukę jest po prostu zrób to.

Jestem formalnie wykształconym grafikiem, który podjął się pracy programistycznej. Zacząłem od czystej konieczności.

Osobiście uważam, że najlepszymi członkami zespołu UX są ci, którzy mają mieszankę obu umiejętności. Myślę, że jesteś na dobrej drodze.

Zacznę od przeczytania książki Watrall & Siarto „Head First Web Design” (wydanej przez O'Reilly). Jest to całkiem nonsensowne, łatwe do strawienia i prowadzi przez wszystko, co projektant musi wziąć pod uwagę. Nie jest to dogłębne badanie, ale pozwala dowiedzieć się, na jakie pytania należy odpowiedzieć w następnej kolejności. Obejmuje nawigację, organizację, układ, pisanie, kolor i dostępność.

Ponadto, zanim przejdziesz do Photoshopa, Adobe Illustratora lub czegokolwiek, sformatuj swój projekt, aby upewnić się, że wszystko jest we właściwym miejscu, zanim poświęcisz dodatkowy czas, aby wyglądać ładnie. Możesz naszkicować go na papierze lub tablicy lub użyć narzędzia. Narzędzie, które znalazłem naprawdę pomaga na tym etapie, to makiety Balsamiq . Pozwala najpierw pomyśleć o organizacji i układzie witryny.

W rzeczywistości podjąłem odwrotne podejście od Projektanta UX do Projektanta UI, jednak przy wyborze Projektowania poleciłbym kilka obszarów na początek:

Rzuciłbym okiem na książkę „Don't Make Me Think!” Steve Krug , który moim zdaniem jest świetną książką o projektowaniu do projektowania w Internecie.

Istnieje mnóstwo świetnych zasobów internetowych, w tym SmashingMagazine.com i PSDTuts.com, które dają świetne aktualne artykuły ze świata projektowania i technologii internetowych.

Chciałbym również rzucić okiem na zrozumienie zasad HCI, jeśli szczególnie chcesz zostać projektantem UX.

Powodzenia i szczęśliwego projektowania!

Jestem naprawdę zainteresowany nauczeniem się, jak tworzyć najwyższej klasy interfejs użytkownika dla stron internetowych, aplikacji mobilnych itp.

Okej, to szeroki temat. Chcesz stworzyć „piękne”, „najwyższej klasy”, profesjonalnie wyglądające „strony internetowe”. Więc musisz wiedzieć, co sprawia, że ​​ludzie postrzegają coś jako „piękne”, prawda? Na szczęście dla ciebie piękno nie jest tak naprawdę subiektywne.

Jednym z kluczy do pięknego wyglądu jest harmonia .

Brak harmonii sprawia, że ​​Twoje projekty wyglądają amatorsko.

A najlepsze jest to, że wizualna harmonia sprowadza się do matematyki. Tu nie chodzi o przeczucie.

Jak zauważyli inni, polecam projektowanie stron internetowych na własną rękę. Spróbuj zastosować zasady projektowania, o których się dowiesz, zamiast korzystać z gotowego frameworka. Na początku może to być trudne, ale pomoże ci stać się lepszym.

Jak osadzić harmonię w projekcie strony internetowej

Poniżej znajduje się praktyczny przykład i zabawne małe ćwiczenie, które możesz teraz wykonać.

Jednym ze sposobów, który osobiście wolę, jest użycie modułowej skali do harmonijnych proporcji elementów witryny. Witryna, która może pomóc w wygenerowaniu skali modułowej, to: modularscale.com

Zaletą korzystania ze skali modułowej jest to, że może ona podejmować decyzje o wielkości tak proste, jak wybranie liczby ze skali.

Na przykład, zmieńmy rozmiar nagłówków strony (aby przekazać hierarchię wizualną).

Załóżmy, że mamy tę modułową skalę opartą na wybranym rozmiarze czcionki 19px (19px, ponieważ najlepiej wyglądała z czcionką, której używałem, ale możesz pominąć ten krok i przejść z domyślnym rozmiarem 16px) i współczynnikiem 1,412 (nie muszę szczegółowo opisać, dlaczego wybrałem ten współczynnik. Po prostu każdy współczynnik będzie lepszy niż brak współczynnika dla twoich projektów.):

Patrząc na to, wybrałbym H1 na 2.815em, H2 na 1.994em, a H3 na 1.412em. Pierwsze 3 liczby większe niż rozmiar czcionki. Spokojnie, prawda? Tekst podstawowy to 1em (w moim przypadku 19px). Następnie zmieniłem rozmiar H4-H6 na 1em i użyłem kontrastu (inna grubość czcionki lub styl), aby odróżnić je od tekstu podstawowego.

Wypróbuj teraz:

1. Wygeneruj własną skalę modułową
2. Uzyskaj zwykły dokument HTML (prawdziwa treść, proszę nie Lorem Ipsum)
3. Użyj skali, aby zmienić rozmiar nagłówków.
4. Następnie spróbuj użyć skali do innych decyzji dotyczących rozmiaru (marginesy, wypełnienia itp.)

To tylko mały krok w kierunku lepszych projektów, ale mam nadzieję, że ci to pomoże.

Jeśli okaże się to pomocne, możesz przeczytać moją inną listę 7 wskazówek dla początkujących projektantów stron internetowych, którzy znają HTML i CSS

PS: Naprawdę masz dużo do czytania

Jak powiedzieli inni, przeczytaj:

• Elementy projektowania graficznego autorstwa Alexandra White'a
• Elementy stylu typograficznego autorstwa Roberta Bringhursta
• Nie każ mi myśleć Steve Krug

Ponadto tutaj znajduje się ogromna lista zasobów internetowych, takich jak blogi i społeczności, na które można mieć oko: enboard.co/webdesign/