Kodowanie dla niekodera: projektanci mogą myśleć jak programiści

Tak długo, jak tworzymy strony internetowe, istnieje niepisany podział na projektantów i programistów. Ludzie, którzy sprawiają, że rzeczy wyglądają dobrze, w porównaniu z ludźmi, którzy sprawiają, że to działa. Te dni minęły.

Każdy projektant musi nauczyć się, jak działa rozwój w cyfrowym krajobrazie. I każdy programista powinien zrozumieć podstawowe teorie projektowania. Tutaj pomożemy projektantom lepiej zrozumieć język programistów, niezbędną umiejętność na dzisiejszym rynku. (Jako dodatkowy bonus wszystkie przykłady projektowania są tworzone przy użyciu frameworków CSS.)

Poznaj elementy Envato

Interfejsy użytkownika i projekt

Podstawą każdej witryny jest ciąg zer i jedynek. To nie jest zbyt ekscytujące, jeśli chodzi o projektowanie. Ale rzeczywisty interfejs i połączenie z użytkownikiem to.

Każdy drobny szczegół zawiera elementy projektu, z którymi ktoś powinien się angażować - od przycisków, przez elementy nawigacyjne, formy, oglądając film lub kupując buty. Celem jest stworzenie czegoś, co wygląda ładnie, angażuje i jest łatwe w użyciu. Tam spotykają się projektowanie i rozwój.

Słowa, które musisz znać:

• Ajax: Korzystanie z asynchronicznego JavaScript i XML tworzy interaktywne środowisko, w którym nowe informacje mogą się pojawiać na końcu strony internetowej bez odświeżania. Typowym przykładem jest ciągłe ładowanie postów, gdy użytkownik przewija stronę Twittera.
• API: Podając specyfikacje procedur, danych, klas obiektów i zmiennych, a interfejs programowania aplikacji umożliwia różnym stronom internetowym lub oprogramowaniu „rozmowę” i współpracę. Pomyśl o tym jak o wirtualnym zestawie elementów budulcowych.
• CSS: Kaskadowe arkusze stylów są kręgosłupem języka używanego do stylizowania stron internetowych i wizualnego wyświetlania elementów HTML.
• Zapytanie medialne: element CSS, który tworzy określone reguły dla niektórych urządzeń, jeśli chodzi o sposób wyświetlania grafiki. (To magia sprawia, że ​​to samo renderowanie zdjęć z jednym współczynnikiem proporcji i kadrowaniem w witrynie na komputery stacjonarne i innym sposobem na urządzeniu mobilnym).
• Responsive web design (RWD): technika projektowania stron internetowych, w której zastosowano elastyczną siatkę oraz obrazy, multimedia i tekst, dzięki czemu jedna witryna dostosowuje się do wielu rozmiarów urządzeń. (Jest to prawdopodobnie jeden z najważniejszych czynników projektowania stron internetowych.)
• Interfejs użytkownika: interfejs użytkownika to wszystko, co użytkownik widzi i wchodzi w interakcje w projekcie. Może to być wszystko, od sposobu, w jaki korzystają ze strony internetowej i urządzenia, po każdy pojedynczy element na ekranie.
• UX: User Experience jest tym, co każdy użytkownik usuwa z interakcji z witryną. Zwykle wyraża się to jako związek emocjonalny i odnosi się do postrzeganej ogólnej wartości.

Pomyśl w pytaniach

„Każda z tych interakcji powinna przypominać rozmowę między dwojgiem ludzi, którzy sobie ufają i zasługują na siebie.”

Każda część witryny prosi użytkowników o zaangażowanie lub kontynuowanie interakcji z inną częścią witryny. Niezależnie od tego, czy grasz, czytasz artykuł lub kupujesz prezent, każda czynność prowadzi do czegoś innego. Ale jak się tam dostać?

Tam właśnie pojawiają się pytania. Jeśli zadajesz pytania w procesie projektowania, możesz tworzyć powiązania między działaniami, tworząc bardziej płynny projekt z logicznym przepływem.

„Nicely Said” Nicole Fenton i Kate Kiefer Lee to podręcznik do pisania dla Internetu. Zapewnia również ramy pytań, które działają dla każdej części doświadczenia w projektowaniu stron internetowych.

Pytania, które należy zadać po drodze (oraz wiele innych z przewodnika po książce):

• Jak ludzie korzystają teraz z tych treści lub funkcji?
• Kto tu mówi?
• Jakie problemy próbujemy rozwiązać?
• Jak ta treść służy naszym celom? Jaki jest jego cel?
• Jakie są funkcje strony internetowej? Jak się zachowuje?
• Jaki jest ostateczny format?
• Czy są jakieś ograniczenia techniczne lub limity postaci?

Fenton pisał jeszcze więcej o innych pytaniach, które strony internetowe „zadają” przez cały czas. Mówimy o danych osobowych, które pomagają użytkownikom odnosić się do witryn, z którymi wchodzą w interakcje. „Każda z tych interakcji powinna przypominać rozmowę między dwojgiem ludzi, którzy sobie ufają i zasługują na swoje zaufanie”, pisze.

Niektóre z tych pytań obejmują:

• Jak możemy ci pomóc?
• Gdzie teraz jesteś?
• Czy chcesz za to zapłacić?

Odpowiedź na te pytania określa charakter relacji użytkownik-interfejs i ma duży wpływ na projekt. Pomyśl o tym w ten sposób: jeśli użytkownik nie chce powiedzieć ci swojej lokalizacji, projekt i interfejs użytkownika nie będą skuteczne, jeśli będą oparte na geolokalizacji; projekt powinien podejść do użytkownika w inny sposób.

Pomyśl o prostocie i kierunku

Gdy strony internetowe się łączą, wszystko ma tendencję do upadku gdzieś na mapie. Możesz wykreślić kurs od interakcji użytkownika do następnego. (Co jest świetne dla myślicieli wizualnych.) Więc pomyśl o procesie projektowania / rozwoju w kategoriach A vs. B: Jaki jest następny krok, A lub B?

Każdy element powinien mieć prosty cel, łatwy do zdefiniowania i opisania. (Kliknij, aby zagrać; kliknij, aby przewinąć.) Jeśli nie możesz uczynić go zrozumiałym w jednym zdaniu, możesz ponownie przemyśleć strategię projektowania.

Naucz się kodu

Teraz, gdy myślisz o rzeczach w metodyce programisty, musisz wyjść i rozwinąć umiejętności kodowania. Nie oznacza to, że musisz być głównym programistą, ale powinieneś to zrozumieć, aby wprowadzić proste zmiany i spójnie rozmawiać z innymi projektantami i programistami. (Dodatkowo możesz naprawdę stworzyć fajne efekty, takie jak te powyżej.)

Osobiście zacząłem od małego HTML z celem. Zrobiłem listę rzeczy, które chciałem wiedzieć, jak to zrobić i nauczyłem się ich od środka (tj. Jak zmienić kolor elementu witryny przy użyciu wartości HEX w CSS zamiast klikania pola wyboru koloru). Tam dostępnych jest wiele narzędzi, od zajęć online i samouczków po szkolenia osobiste w Twojej okolicy. Wszystko, co musisz zrobić, to zarejestrować się i zacząć.

Cztery świetne zasoby do tworzenia kodu:

1. Tuts +
2. CodeAcademy
3. Code School
4. Khan academy

Wniosek

Nauka tworzenia stron internetowych to nie tylko nauka frameworków i kodu. Chodzi o proces myślowy. Projektanci mogą myśleć jak programiści na drodze do stworzenia udanej strony internetowej. Musisz być otwarty na pomysł.

Zrozumienie, że niektóre procesy myślowe są podobne - wizualne myślenie i ważenie rozwiązań i wyników - jest częścią każdego projektu lub projektu. Wszyscy jesteśmy projektantami / programistami na dzisiejszym rynku.

Źródło obrazu: Marjan Krebelj.