Nie umiem rysować. Jak mogę tworzyć dopracowane aplikacje?

41

Nie jestem grafikiem. Jestem całkiem zły w rysowaniu czegokolwiek. Z trudem buduję rzeczy, które wyglądają nawet tak ładnie, jak „przykładowe” aplikacje dołączone do narzędzi programistycznych; przede wszystkim dlatego, że nie mam przysiadów na drodze do zasobów sztuki.

Jakie strategie mogę podjąć, aby to złagodzić?

Billy ONeal
źródło
3
Żeby było jasne: chcesz tworzyć GUI, które nie używają wyglądu i działania domyślnej platformy? Pierwsze pytanie brzmiałoby: dlaczego nie polegać na systemie operacyjnym, aby narysować interfejs użytkownika?
Konrad Rudolph,
2
@KonradRudolph: Nawet przy domyślnym wyglądzie (co w rzeczywistości wydaje mi się bardziej przyjemne niż cokolwiek innego przez większość czasu), nadal istnieją zasoby artystyczne zwykle potrzebne do dopracowanej aplikacji, takie jak ikony.
Billy ONeal,
5
Zasoby ikon: Użyj zestawów ikon Open Source. ;-) Istnieje kilka całkiem wysokiej jakości, np . Jedwabne Ikony FamFamFam lub Glyphicony … Osobiście wolę unikać zbyt wielu innych grafik, ale dla tych umów praca jest prawdopodobnie najlepszym rozwiązaniem…
Konrad Rudolph
Metoda method.ac może być pomocna po uruchomieniu.
Maks.

Odpowiedzi:

24

Osobiście uważam, że nie trzeba być dobrym artystycznie, aby tworzyć przyjemne interfejsy użytkownika .

To, co sprawia, że ​​dobry interfejs użytkownika nie zależy od kreatywności, ale jest bardziej związane z kilkoma dobrze ugruntowanymi wytycznymi. Jeśli zastosujesz się do tych wskazówek i poćwiczysz, możesz samodzielnie stworzyć świetne interfejsy.

Sugerowałbym wykonanie następujących czynności ...

  • Przeczytaj o tym, co stanowi dobry interfejs użytkownika. (głównie online)
  • Zbadaj i znajdź interfejsy użytkownika, które ci się podobają.
  • Porównaj kilka dobrych projektów i spróbuj znaleźć między nimi podobne rzeczy.
  • Teraz spójrz na swój projekt i sprawdź, czy masz te elementy.
  • Spróbuj odtworzyć interfejs użytkownika, aby był podobny do tych, które lubisz.

Przewiduję, że jeśli wykonasz to ćwiczenie przez tydzień lub dwa (i jeśli poprosisz mnie o tydzień lub dwa, aby nauczyć się, jak projektować dobre interfejsy, to nie jest tak długo), dowiesz się, co stanowi dobry interfejs użytkownika .

Zaledwie kilka rzeczy, które sprawiają, że interfejsy użytkownika są przyjemne:

  • Prostota
  • Spójność (kolory, czcionki, użycie przycisków, linków itp.)
  • Rozstaw
  • Mniej znaczy więcej (ukryj jak najwięcej przed użytkownikiem bez zmniejszania użyteczności)
  • Nie używaj białego tła i czarnej czcionki. Upewnij się, że kontrast jest wystarczająco dobry, ale zwykle zmień tło na jasny odcień szarości, a czcionka na ciemnoszary.

Również ... nie zaczynaj od projektu. Zacznij od funkcjonalności i pozwól, aby projekt ewoluował. Eksperymentuj też! Nie denerwuj się, jeśli po 1-2 „iteracjach” nie wygląda idealnie. Z czasem staje się coraz lepszy. Ale co najważniejsze, musisz spróbować .

c_maker
źródło
3
Mówię o języku polskim, a nie UX. Wiedza o tym, jak zaprojektować „przyjemny” interfejs użytkownika nie pomaga (na przykład), aby Twoje ikony wyglądały lepiej.
Billy ONeal,
5
@BillyONeal: Przykro mi, ale twoje pytanie do mnie było o wiele szersze niż „projektowanie ikon”.
c_maker 19.04. Kwietnia
3
To jest; ikony to tylko prosty przykład. Chodzi mi o to, że nie jest to „ukrywanie się za wymówką” - istnieją uzasadnione części przyzwoitego projektu interfejsu użytkownika, które wymagają, no cóż, sztuki. Istnieją ładne i bezużyteczne interfejsy, użyteczne i brzydkie interfejsy, bezużyteczne i brzydkie interfejsy oraz użyteczne i ładne interfejsy; dopracowana aplikacja musi być użyteczna i atrakcyjna wizualnie. W tej odpowiedzi dobrze traktujesz użyteczność (+1); ale „ładna” też jest uzasadniona.
Billy ONeal,
Myślę, że kolor czcionki / kolor tła zmierza tutaj w dobrym kierunku. Kontrast był jednym z pierwszych elementów, z których otrzymałem opinię publiczną z pierwszej witryny, jaką kiedykolwiek opublikowałem. Może kilka innych wskazówek, na przykład jak wybrać / zastosować kolor - ile? Jeden lub dwa? Więcej? Jasne czy ciemne? Umieścić to w nagłówkach? Granice? Tło? Wszystkie / brak / niektóre z powyższych?
Stoive,
12

Moje umiejętności artystyczne to około 5 klasy w dobry dzień :). Zatrudniam grafika, zawodowo w pracy lub moją żonę, która ma doskonałe umiejętności plastyczne i uwielbia je wykorzystywać.

Zauważ, że moim zdaniem grafika nie jest projektem UI / UX. Albo robię większość UX, albo zatrudniam eksperta UX, aby zachować kontrolę nad UX, który następnie współpracuje z GD, aby wyglądał ładnie. Chociaż jestem pewien, że istnieją dobre zespolone zespoły UX / GD, miałem bardzo złe doświadczenia z GD robiącymi rzeczy, które wyglądały ładnie, miały bardzo zły UX i były przestarzałe w ciągu kilku miesięcy i nie podejmę tego ryzyka, dopóki nie współpracowałem z GD przy kilku projektach.

mattnz
źródło
1
Więc zapłać komuś, kto to zrobi, lub złap się kogoś, kto może to zrobić za darmo? : p. Co jeśli jest za wcześnie, aby zapłacić projektantowi - dowód koncepcji lub wypróbowanie funkcjonalności? Oprogramowanie wymaga minimalnej uwagi estetycznej, aby ludzie, którym pokazuję moje oprogramowanie, nie rozproszyli się niewyraźnymi kolorami i czcionkami, dla których nie wiem, jak sobie radzić lepiej.
Stoive,
2
@Stoive. Świetna uwaga, teraz już mnie zacząłeś. Pierwsze wrażenia są naprawdę ważne. Dla każdego nie-inżyniera (i wielu inżynierów) GD jest zwykle krytyczna, niestety przewyższa projekt i inżynierię UX o kilka rzędów wielkości. Spraw, by grafika wyglądała na błyszczącą i błyszczącą, a sroki będą gromadzić się wokół produktu, bez względu na to, jak badziewie.
Pomyl
1
Aby rozwinąć - przekonałem klienta, że ​​wcześniej wynajął projektanta graficznego (projektowanie interfejsu mam się dobrze, grafika jest przerażająca), stwierdzając, że dobra grafika zapewnia użytkownikom pewność siebie i wiarygodność. W tym przypadku klient już płacił (ich pomysły, właśnie kodowałem), ale w innych okolicznościach musisz przekazać klientom zaufanie i wiarygodność, zanim zaczniesz dotykać jakichkolwiek pieniędzy na zasoby graficzne. Lub, zgodnie z PO (projekty hobbystyczne?), Pieniądze nigdy nie będą zaangażowane - zatrudnienie projektanta nie jest możliwe, ale prezentacja jest nadal ważna.
Stoive,
9

Jeśli szukasz zasobów graficznych, istnieje kilka stron internetowych, które zbierają wysokiej jakości grafikę do bezpłatnego użytku:

  • Bootstrap dla prawdopodobnie najlepszej (ale zdecydowanie najgorętszej obecnie) struktury sieciowej interfejsu użytkownika
  • Glyphicons dla zestawu ikon, który uzupełnia framework Bootstrap interfejsu użytkownika Twittera
  • Subtelne wzory dla, cóż, subtelnych wzorów tła
  • Jedwabne ikony FamFamFam, które są używane w wielu programach na całym świecie
  • Rynek kreatywny dla różnorodnych elementów

I wiele innych, takich jak projekt artystyczny GNOME, który zawiera również wiele bezpłatnych zasobów graficznych.

Nie będąc najmniej kreatywnym i nie posiadając wykształcenia w zakresie projektowania, zawsze dążę do konserwatyzmu: używaj ustalonych wzorców (tj. Ram) i jak najmniej odbiegaj od wydeptanych ścieżek. To niekoniecznie będzie bardzo interesujące, ale przynajmniej zminimalizujesz ryzyko niepowodzenia i katastrofy UX.

Picasso powiedział, że „wielcy artyści kradną”, ale w rzeczywistości są to głównie beznadziejne ataki hakerskie i popatrz, co doprowadziło Microsoft i Samsunga: do świetnie sprzedających się platform.

Konrad Rudolph
źródło
8

Możesz zatrudnić specjalistów do tego rodzaju rzeczy, ale nie potrzebujesz wrodzonej zdolności artystycznej do nauki podstawowych technik. Mój stopień licencjata wymagał w rzeczywistości semestru „sztuki dla inżynierów”. Biorąc klasę lub dwie w lokalnej szkole społecznościowej może być bardzo korzystne. Nadal nie będziesz tak dobry, jak ludzie specjalnie przeszkoleni w tej dziedzinie, ale możesz zdecydowanie poprawić do tego stopnia, że ​​twoje programy wyglądają bardziej profesjonalnie.

Są też książki skierowane do względnych amatorów. Jedną z książek, które uznałem za przydatne do projektowania stron internetowych, są Zasady pięknego projektowania stron internetowych autorstwa Jasona Beairda. Nawet jeśli twoje projekty nie ulegną znacznej poprawie, zdobycie odrobiny edukacji może pomóc ci lepiej werbalizować, co jest nie tak z projektem. Zamiast zawsze mówić: „Wiem, że to źle wygląda, ale nie mogę zrozumieć, dlaczego”, będziesz w stanie wskazać problemy, takie jak złe kerning lub brak ujemnej przestrzeni, a określenie problemu to połowa sukcesu.

Karl Bielefeldt
źródło
3

To, czego możesz szukać, to „UI / UX Design for Developers”. Jedna książka związana z tym tematem to Projektowanie interfejsu użytkownika dla programistów

Jeśli nie szukasz projektu interfejsu użytkownika / interfejsu użytkownika, ale chcesz poprawić umiejętności projektowania graficznego, polecam znalezienie klasy dotyczącej korzystania z programów Adobe Photoshop lub Adobe Illustrator (jeśli nie, przynajmniej niektóre samouczki w Internecie). Ucząc się kilku technik i patrząc na inspiracje innych ludzi, zdziwisz się, jak mało potrzebujesz kreatywności artystycznej.

Na przykład, możesz nauczyć się narzędzia Gradient w Photoshopie, wraz z narzędziem Zaokrąglony prostokąt, i możesz zrobić coś podobnego do przycisku „Zapisz się do newslettera” po prawej stronie (chociaż w tym przypadku robi się to za pomocą czystego CSS).

Atif
źródło
Większość (wszystkich?) Książek Joela można znaleźć na jego stronie: joelonsoftware.com/uibook/fog0000000249.html
Fara,
Wygląda na to, że jest tam około 2/3 książki. Nie ma rozdziałów 13–18.
Steve Bennett,
1

Pozwól innym „wykonać pracę za Ciebie” w postaci ram, szablonów i gotowych komponentów GUI. Na przykład nie mogę rysować ani projektować, więc albo dla każdego nowego projektu internetowego zaczynam od szablonu css (z wielu darmowych stron szablonów css) dla układu i projektu, a następnie „poprawiam” go stamtąd. Te szablony zawierają kompletny projekt, który może pomóc w rozwiązaniu tej luki.

Zgadzam się z c_makerem, że dobra użyteczność to dobry projekt, choć brzmi to bardziej precyzyjnie na designie.

Jeśli zajmujesz się projektowaniem i układaniem stron, oto niektóre z tych stron css:
http://www.freecsstemplates.com/
http://www.templatemo.com/
http://www.free-css.com/
http : //www.oswd.org/
http://www.openwebdesign.org/

Michael Durrant
źródło
Chyba działa dobrze dla twórców stron internetowych. Naprawdę myślę jednak, że tutaj jest więcej języków. Grube klienci również potrzebują miłości interfejsu użytkownika.
Billy ONeal,