Świetne strony internetowe zawsze łączą świetny design z doskonałym kodem. Odkąd zbudowanie strony internetowej jest dość prostym zadaniem, wiele osób uczy się HTML i CSS i zauważy, że jeśli mogą się tego nauczyć, mogą zaprojektować dowolną stronę internetową. Choć technicznie mogą ci często zdarzyć się, że popełniają pewne kluczowe błędy, ponieważ nie chcą poświęcać czasu na faktyczną naukę o projektowaniu.

Programiści są projektantami, ale projektują kod i wspaniale zaprojektowane systemy. Projektowanie czegoś wizualnego jest zupełnie inne i tylko dlatego, że masz dobre oko na projekt, nie oznacza, że ​​masz dobry umysł, aby go zastosować.

Ponieważ tak wielu programistów ma osobiste projekty, co zwykle oznacza, że ​​muszą tworzyć własne strony internetowe. Jeśli jesteś niezależnym programistą, jednym z największych zasobów, jakie możesz mieć, jest znajomość całego procesu tworzenia stron internetowych od początku do końca, a to obejmuje projektowanie.

Oto osiem błędów, które często widzę w tworzeniu aplikacji na stronie internetowej.

1. Wiem, jak wygląda dobry projekt

Oddzielenie oka na projekt od umiejętności projektowania może być trudne. Jest bardzo podobny do ludzi, którzy mogą patrzeć na modę i mówić ci, co wygląda dobrze, ale tak naprawdę nie mogą ubierać się w ten sam sposób.

Świetni projektanci po prostu wiedzą, co to jest dobry projekt. Wiedzą, co zadziała, a co nie będzie działać wiele razy, zanim jeszcze podniosą ołówek lub otworzą Photoshopa. Często dzieje się tak dlatego, że spędzili lata, przelewając różne projekty i samodzielnie próbując wzorów. Tak jak żaden artysta nie może odebrać ołówka i narysować czegoś wspaniałego po raz pierwszy, żaden deweloper nie powinien uwierzyć, że może zapukać pierwszy projekt prosto z parku.

Podobnie jak programista może studiować kod innej osoby, każdy może studiować projekt i zacząć rozumieć, dlaczego działa.

Przyjrzenie się pięknym Punchfork możesz zobaczyć, co czyni projekt tak wspaniałym.

  • Świetne wykorzystanie obrazów. Obrazy są zawsze pomocne w dopracowaniu projektu, ale zbyt wiele razy projektanci mogą się nimi unieść. Obrazy użyte na Punchfork są pomocne w przekazywaniu wiadomości.
  • Solidna siatka. Wielkie wykorzystanie układu siatki pomaga spojrzeć w oko.
  • Prosta typografia. Istnieją czcionki, które powinny być używane w Internecie i są czcionki, które powinny być używane bardzo, bardzo oszczędnie w Internecie (Papyrus, Comic Sans itp.). Nie ma nic złego w trzymaniu się Georgii i Helveticy za projekt, ponieważ działają prawidłowo.

Istnieje wiele innych elementów projektu, które czynią go tak wspaniałym. Kiedy natkniesz się na projekt, który Ci się podoba, poświęć czas na przestudiowanie poszczególnych elementów, ale także potwierdź, jak pasują one do całości. Jeden świetny element projektu nie sprawia, że ​​cały projekt jest świetny.

2. Wybór koloru

Dobór koloru może być uciążliwy. Nienawidzę konieczności wybierania kolorów, ponieważ jest ich tak wiele do wyboru. Z jakiegoś powodu większość programistów zwykle trzyma się niebiesko-białej palety. Może dlatego, że jest używany wszędzie lub są to ustawienia domyślne przeglądarki, ale świetny projekt może obejmować wiele kolorów. Na szczęście dla nas, ludzi z kolorowymi wyzwaniami, jest mnóstwo narzędzi, które mogą nam pomóc stworzyć wspaniałe kombinacje kolorów.

COLOURlovers to wspaniała społeczność, w której ludzie tworzą swoje ulubione palety kolorów i udostępniają je innym. Możesz przeglądać, zapisywać i głosować na ulubione palety i kolory. Niejednokrotnie zwróciłem się do COLOURlovers, aby przyjść i zapisać dzień dzięki doborowi kolorów.

Wybierając paletę kolorów, trzymaj się tej, która pasuje do nastroju Twojej strony i jej zawartości. Nie wybieraj palety tylko dlatego, że ją kochasz. Kolor pomarańczowy i czarny mogą nie być najlepszymi kolorami na stronie wokół idei miłości na przykład.

Rzadko będziesz musiał użyć więcej niż 3-4 różnych kolorów, a jeśli zdecydujesz się na to, musisz uzasadnić swój wybór.

3. Wyśrodkuj to

Może to być bardzo kuszące, aby wyśrodkować nagłówek. Wygląda świetnie w gazetach, ale rzadko sprawdzi się dobrze w Internecie, chyba że wszystko jest wyśrodkowane. Wiemy, że tekst wyrównany do lewej wygląda profesjonalnie i działa z naturalnym przepływem oczu, więc dlaczego wyjść poza linie?

Wyśrodkowany tekst najlepiej nadaje się do nagłówków i krótkich linii tekstu. Użytkownicy mogą z łatwością je odczytać, ponieważ linie są krótkie, mogą być skanowane i nie wymagają powtarzających się ruchów oczu. Wyśrodkowany tekst może również nadać Twojemu układowi estetyczny wygląd z symetrycznym formatem. Działa to w przypadku tekstu z wyśrodkowanymi obrazami. Jeśli Twoje obrazy są wyrównane do lewej lub prawej strony, musisz wyrównać tekst do lewej, aby zachować spójność z układem.

Centralne nagłówki działają w gazetach, ponieważ tekst jest podzielony na kolumny, więc nagłówek przepływa przez całą historię. Jeśli masz do czynienia tylko z jedną kolumną tekstu, powinieneś trzymać się wyrównanego do lewej strony nagłówka.

4. Czcionka smorgasbord

Kiedy nie jesteś zanurzony w świecie typografii, Arial wygląda jak Helvetica, a Gruzja przypomina Times New Roman. Wiesz, że istnieją inne czcionki, takie jak Comic Sans, ale nie widzisz znaczenia konieczności płacenia za czcionkę, kiedy możesz bardzo łatwo wykorzystać to, co jest dla ciebie dostępne.

Dzięki takim zasobom jak Typekit chociaż wybór czcionki stał się niesamowicie podobny do wyboru koloru. Badanie może zająć wiele dni, aby znaleźć odpowiednią kombinację, kiedy można łatwo użyć podstawowej czcionki i zakończyć ją z resztą.

Nie przesadzaj z czcionkami. Podobnie jak kolory, ograniczony wybór często działa najlepiej. Jeśli chodzi o czcionki, jedna lub dwie różne czcionki mogą być przydatne do stworzenia pięknego projektu. Pamiętaj, że możesz robić wiele różnych rzeczy za pomocą czcionek. Możesz je pochylić, pogrubić, podkreślić, wpisać w wielkie lub małe litery.

5. Zapakuj informacje

Gdy jesteś programistą, im więcej informacji możesz mieć na stronie, tym lepiej. Kiedy koduję, lubię to robić na wielu ekranach, ponieważ pozwala mi mieć wszystko tuż przede mną. Niestety to nie działa w projektowaniu. Nie należy dopuścić do tego, by tak duża ilość informacji znajdowała się w ciasnej przestrzeni, ponieważ wydaje się, że projekt staje się dysfunkcyjny.

Oko może zabierać tylko tyle informacji na raz i jeśli celem większości projektów jest wykonanie zadania, to ukrywanie go w milionie innych informacji nie pomoże.

Choć ruchliwe strony internetowe mogą być skuteczne, częściej niż nie, nie są. Biała przestrzeń powinna być twoim najlepszym przyjacielem. Potrzebujesz pustych części w swoim projekcie, aby podkreślić elementy projektu, które są ważne.

6. Brak pytań

Wszyscy znamy to cudowne uczucie tworzenia czegoś i oglądania go w prawdziwym świecie. Ponieważ stworzyliśmy to, pojawia się tendencja do uprzedzeń, która sprawia, że ​​myślimy, że jest lepsza niż w rzeczywistości. Musisz zdobyć opinie innych, aby wiedzieć, czy Twój projekt jest skuteczny, a jeśli nie, możesz znaleźć sposób na jego ulepszenie. Zamiast tego deweloperzy czują, że nie muszą pytać o opinię innych, ponieważ wiedzą, jak działa ich projekt, więc wszystko ma dla nich sens.

Przekonasz się również, że gdy ludzie proszą o opinię na temat projektu, nie proszą o krytykę, ale o zgodę. Chcą uzasadnienia decyzji, które podjęli, a to nie jest właściwe podejście. Zadawanie pytań naprawdę pomaga w znalezieniu problemów z użytecznością, o których być może wcześniej nie wiesz. Często utkniesz w swoim własnym projekcie, że wszystko ma dla ciebie sens, ale dla nowej osoby Twój projekt może być bardziej skomplikowany niż Kostka Rubiks.

7. Szczegóły czasu odpadów

Dzięki świetnym projektom może być trudno zauważyć małe szczegóły, które naprawdę to robią. Mogą być tak subtelne, że przypadkowy obserwator patrzy na nich i kontynuuje. Dla programisty małe szczegóły mogą być stratą czasu, ponieważ nie rozumieją ogólnego wpływu, jaki cień może mieć na element.

Drobne szczegóły same w sobie wpływają tylko na określony element projektu, ale gdy wszystkie się ze sobą łączą, masz wspaniały projekt, który płynie. Strony takie jak Dribbble pokazać, jak wielkie mogą być małe detale w większym projekcie. Jeśli jednak nie jesteś projektantem z branży, skupienie się zbytnio na szczegółach może spowolnić proces bardziej, niż byś chciał. Nie oznacza to jednak, że nie należy zdawać sobie sprawy, w jaki sposób szczegóły mogą wpłynąć na projekt.

Jakie inne typowe błędy popełniają deweloperzy, jeśli chodzi o projektowanie? Proszę podzielcie się w komentarzach!