Zawartość
- Korzyści z projektowania za pomocą kodu
- Najpierw dane
- Mobilna dobroć za darmo
- Znalezienie wspólnego języka
- Ucz się szybciej
- Szybka iteracja
- Szybszy czas uruchomienia
- Dlaczego HTML5?
- Magiczny atrybut danych
- CSS3 - to nowy Photoshop
- Sass + Compass: magicznie pyszny
- jQuery: o tak, możesz
- Ramy
- Końcowe przemyślenia
Ten artykuł pojawił się po raz pierwszy w numerze 235 magazynu .net - najlepiej sprzedającego się magazynu na świecie dla projektantów i programistów stron internetowych.
Nigdy nie byłem wielkim fanem wykonywania większej pracy niż potrzeba. Zwykle oceniam metody i narzędzia na podstawie ich zdolności uczynienia mnie lub mojego zespołu bardziej skutecznymi. Jak szybko doprowadzają nas do działającego produktu? Jak skuteczni są w komunikacji? Czy nie przeszkadzają nam?
Przez lata dostosowywałem swój proces projektowania i narzędzia. Wyobrażam sobie, że nadal będę to robić. Taka jest natura projektowania pod kątem technologii i internetu. Ta branża stale się rozwija; nasz proces i narzędzia również muszą ewoluować.
HTML5 i CSS3 ułatwiają przeniesienie większej części procesu projektowania na wcześniejszy etap - z dala od Photoshopa i bardziej w kierunku żywego, oddychającego projektu. Narzędzia takie jak Foundation, Bootstrap i jQuery sprawiają, że przeniesienie większej części procesu projektowania na kodowanie jest bardziej przystępne.
Korzyści z projektowania za pomocą kodu
Po pierwsze, nie zalecam rezygnacji z programu Photoshop ani żadnego innego edytora projektów wizualnych z przepływu pracy. Zamiast tego skupię się na korzyściach płynących z przeniesienia tego projektu do kodu wcześniej niż później.
Najpierw dane
To, co zawsze lubiłem w projektowaniu za pomocą HTML, to to, że zachęca on do myślenia z perspektywy danych. W przeciwieństwie do tego, używając programów do rysowania, takich jak Illustrator, OmniGraffle lub Balsamiq, zaczynasz od pola i wypełniasz go danymi.
W HTML konstruujesz DOM (model obiektowy dokumentu), coś w rodzaju budowania spisu treści. To powrót do prawdziwego projektowania informacji ze znaczącymi hierarchiami. HTML5 idzie o krok dalej, dodając nowe elementy semantyczne: artykuł, sekcję, nagłówek, bok, stopkę i tak dalej. To podejście oparte na danych ładnie łączy się z responsywnymi projektami, które są ukierunkowane na mobilność.
Mobilna dobroć za darmo
Jeśli to czytasz, prawdopodobnie projektujesz na urządzenia mobilne. Są szanse, że będziesz musiał zaprojektować jedną lub dwie formy. Dzięki HTML5 masz szczęście. Przed HTML5 typy danych wejściowych były w zasadzie polem tekstowym lub hasłem. W HTML5 wprowadzono szereg dodatkowych typów danych wejściowych, w tym:
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "date-time">
Naprawdę niesamowite w tych dodatkowych, unikalnych typach wprowadzania danych jest to, że przeglądarki mobilne na iOS i Android rozpoznają je i automatycznie zamieniają kontekstową klawiaturę - bez żadnych specjalnych wtyczek jQuery ani hacków. Aha, i jeśli Twoja przeglądarka nie wie, co to input type = "email"> jest, to po prostu domyślnie jest wprowadzany tekst.
Znalezienie wspólnego języka
„To niesamowite, jak nasi projektanci i programiści mogą pracować w tym samym języku” - John Drago, programista aplikacji w firmie Inflection.
Sprawdź, czy to brzmi znajomo. Jestem w sali konferencyjnej z pół tuzinem programistów aplikacji po stronie serwera, którzy mogą kodować otaczające mnie kręgi w Ruby, Pythonie, Javie lub .NET. Jestem jedynym projektantem. Kilka moich sugestii zostało początkowo odrzuconych jako zbyt skomplikowane, aby je wdrożyć. Podchodzę do tablicy i zaczynam pisać na niej trochę HTML i CSS, aby dowiedzieć się, jak projekt mógłby zostać zaimplementowany. Nagle ton rozmowy się zmienia i jeden z deweloperów niechętnie mówi: „Cóż, tak - jeśli zrobimy to w ten sposób, to może zadziałać”.
Przeniesienie większej części procesu projektowania do kodu usprawniło rozmowy z programistami. Zdobywasz dodatkowy szacunek, wiedząc, jak tworzyć projekty w kodzie. Nie musisz być ekspertem, aby zdobyć ten szacunek. Podczas gdy moje umiejętności HTML i CSS są solidne, moje umiejętności JavaScript są w najlepszym razie mierne. I nie wstydzę się tego przyznać. Jednak podczas pracy z programistami frontendowymi lub serwerowymi fakt, że możemy mówić wspólnym językiem lub spotkać się w połowie drogi, jest ogromną zaletą.
Ucz się szybciej
Chociaż makiety i wizualne kompozyty mogą pomóc w planowaniu, te statyczne artefakty są teoretyczne. Ile razy próbowałeś wyjaśnić komuś interakcję, tylko po to, by ta odpowiedziała: „Chyba będę musiał to zobaczyć”. Im szybciej uzyskasz prototyp, coś, z czym ludzie będą mogli wchodzić w interakcje, tym szybciej będziesz mógł doświadczyć projektu i zobaczyć, czy pomysły działają.
Szybka iteracja
Kiedy ostatni raz ostateczny projekt, który został wysłany do produkcji, dokładnie pasował do kompozycji Photoshopa? Prawie nigdy. Dzięki projektowaniu produktów cyfrowych zmiany zachodzą nieustannie. Ponadto zmiany, takie jak zwiększenie rozmiaru nagłówków z 22 do 24 punktów na kilkudziesięciu ekranach, mogą zająć wiele godzin w programie Photoshop. Obiekty inteligentne zapewniają pewien poziom projektowania obiektowego w programie Photoshop. Niestety, większość projektantów wizualnych, których znam, nie wykorzystuje wystarczająco inteligentnych obiektów. Dzięki CSS, ponieważ zachęca do bardziej systematycznego podejścia do projektowania, zmiany typograficzne zajmują minuty zamiast godzin.
A co ze zmianą gradientów liniowych na wszystkich przyciskach? Lub rozmiar obramowania? Co powiesz na zmianę z kwadratowych rogów na zaokrąglone 2px? W Photoshopie może to zająć wiele godzin, a nadal trzeba to zakodować. Możliwość projektowania w kodzie pozwala uniknąć konieczności powrotu do programu Photoshop w celu wykonania iteracji projektu wizualnego. Kiedy przenosisz te zmiany w górę do kodu, używając CSS3 i Sass (co omówię w dalszej części tego artykułu), mogą one nastąpić w czasie rzeczywistym i zająć tylko kilka minut.
Szybszy czas uruchomienia
Z biegiem lat, gdy przenosiłem większą część mojego przepływu pracy projektowej w górę do kodu, doświadczyłem rzeczywistej poprawy - około 20 do 30 procent skrócenia czasu wprowadzenia na rynek. Im częściej to robię, tym mniej czasu spędzam na powielaniu. Spędzam mniej cykli w programie Photoshop lub Fireworks, a następnie powtarzam pracę w kodzie.
W pewnym momencie projekt musi współpracować z jakimś typem zaplecza, niezależnie od tego, czy jest to CMS, aplikacja Rails czy coś innego. Ponieważ większość moich prac projektowych jest w kodzie, integracja następuje wcześniej niż później. Kilka lat temu jeden z moich klientów, PointRoll, przeszedł od prototypu do produkcji w pięć dni.
Dlaczego HTML5?
HTML5 jest łatwiejszy niż poprzednie wersje HTML. Weźmy na przykład deklarację typu dokumentu. W poprzednich wersjach HTML DOCTYPE wyglądało mniej więcej tak:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
Było sześć różnych wersji. Na szczęście HTML5 DOCTYPE wygląda tak:
! DOCTYPE HTML>
Poważnie. Otóż to. Szokująco proste.
Podczas tworzenia standardowej strony HTML istnieje wiele wspólnych elementów, takich jak nagłówek, główny obszar zawartości, pasek boczny i stopka. Jestem pewien, że widziałeś już coś takiego:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>
Nie ma tam nic niezwykłego. Ale po wypełnieniu treścią ten szablon zamienia się w zupę div. Natomiast dzięki nowym elementom semantycznym HTML5 otrzymujesz coś znacznie prostszego i łatwiejszego do zeskanowania, na przykład:
header> nav> / nav> / header> article> aside> / aside> / article> footer> / footer>
Spójrz na to. Coś, co ma sens.
Magiczny atrybut danych
HTML5 zawiera kolejny niesamowity haczyk, który umożliwia stworzenie własnego znaczenia semantycznego: dane-. Wcześniej, jeśli chciałeś przypisać coś znaczącego do elementu DOM, byłeś ograniczony do identyfikatorów, klas i ról.
Niestety, identyfikatory muszą być unikalne. Zajęcia są uniwersalne (yippee!), Ale korzystanie z nich może szybko doprowadzić do bałaganu. Role to niewykorzystany zasób, który ma duże znaczenie dla ARIA. Ostatnio korzystałem z danych - na platformie analizy śledzenia zdarzeń, którą opracowujemy w firmie Inflection.Jesteśmy wielkimi fanami testowania naszych projektów. Podczas pracy nad aplikacjami lub stronami, które charakteryzują się dużą interaktywnością, chcielibyśmy mieć bardziej szczegółowy wgląd w zaangażowanie klientów na stronie.
Wejdz do dane-. Dzięki niemu możesz przypisać, przekazać i podłączyć do „zdefiniuj swój własny” model znaczenia. Na przykład możesz to zrobić:
typ wejścia = "przycisk" data-id = "facebook" dataregion = "główne" data-event = "rejestr"> typ wejścia = "przycisk" data-id = "twitter" dataregion = "główna" data-event = "rejestr "> input type =" button "data-id =" linkedin "dataregion =" main "data-event =" register ">
Możemy dołączyć do strony odbiornik z JavaScriptem i za każdym razem, gdy klient najedzie na ten przycisk lub kliknie ten przycisk, możemy śledzić tę aktywność. Zamiast tylko śledzić, że ktoś zarejestrował się przez OAuth na Twitterze, widzimy, że najechał na Facebooka, potem Twittera, potem LinkedIn, a następnie zdecydował się wybrać Twittera jako swojego modelu OAuth.
Wyobraź sobie, że rozszerzasz to na witrynę taką jak Pinterest lub nowy projekt Myspace, w którym klienci przeciągają i upuszczają kafelki, aby zmienić ich kolejność na podstawie zainteresowania. Albo ukrywanie kafelków, którymi nie są zainteresowani dane- atrybut umożliwia dołączenie lub przypisanie dodatkowej warstwy znaczenia semantycznego do rzeczy, które możesz zdefiniować. W przypadku witryn i aplikacji, które w dużym stopniu opierają się na Ajax, otwiera to nieograniczone możliwości.
CSS3 - to nowy Photoshop
CSS3 wprowadził zupełnie nowy poziom projektowania wyglądu, który wymagał obrazów tła, plasterków i niesławnej techniki „przesuwanych drzwi”. Na szczęście to już przeszłość.
Rzućmy okiem na stworzenie fantazyjnego przycisku z liniowym gradientem, zaokrąglonymi rogami, cieniem tekstu, który daje ładny efekt naciśnięcia litery i blaskiem po najechaniu kursorem. Nauka tych technik zajmie dużo czasu. Każdy z nich może być używany niezależnie lub w różnych kombinacjach, aby uzyskać niemal dowolną z aktualnych trendów wizualnych w Internecie.
Najpierw wprowadźmy kilka zmian do wartości domyślnych przycisk> i input type = "wyślij"> elementy. Zakładając, że używasz jednego ze standardowych resetowań CSS, po prostu dodamy trochę rozmiaru i przestrzeni.
/ * Buttons buttons, które mają przyciski. ========================================= * * / button, input [type = "wyślij"] {wysokość: 2,7em; wyściółka: .4em .7em; wysokość linii: 1,9; }
Protip: Przyciski i dane wejściowe, które są przesyłane, mogą być trudne do zmiany stylu. Przekonałem się, że ustawiając wysokość wiersza na 1,6 lub więcej, można uniknąć problemu związanego z koniecznością dodatkowego elementu div lub span wewnątrz przycisk> etykietka.
Teraz „naprawiliśmy” nasz problem z przyciskiem, możemy utworzyć plik .btn klasa, aby dać nam ładny, czysty przycisk z zaokrąglonymi narożnikami, liniowym gradientem, konturem i tym typowym wyglądem.
.btn {display: inline-block; obramowanie: 1px solid # d4d4cc; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; wyściółka: .4em .7em; tło: # edeff2; background: -webkit-gradient (linear, 0% 0%, 0% 100%, from (#fefefe), color-stop (0.55, # edeff2), to (# e4e6e9)); tło: -moz-linear-gradient (środek na górze, #fefe, # edeff2 55%, # e4e6e9); -moz-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; -webkit-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; kolor: # 6c7786; font-size: 1.1em; text-shadow: #fefefe 1px 0 1px; wysokość linii: 1.375em; kursor: wskaźnik; }
A potem ładny efekt unoszenia się z subtelną poświatą przy użyciu box-shadow metoda:
.btn: hover, .btn: focus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; box-shadow: # 129ceb 0 0 2px; tło: # e6e9eb; tło: -webkit-gradient (linear, 0% 0%, 0% 100%, from (# f7f7f7), color-stop (0.55, # f6f6f7), do (# e6e9eb)); tło: -moz-lineargradient (środkowa góra, # f7f7f7, # f6f6f7 55%, # e6e9eb); kolor: # 45484b; text-shadow: rgb (255,255,255) 1px 1px 0; border-color: # c9c9c0; }
Nie jestem wielkim fanem pisania kodu z liniowym gradientem. To jest długie i zagmatwane. Jak widać, dołączyłem tylko wersję dla -moz, -webkiti model standardowy. Jeśli chcesz dołączyć wersje -o i -ms, musisz podwoić kod.
Istnieją dwie inne opcje. Jeden to generator CSS3; w sieci jest dostępnych kilka, w tym ColorZilla. Ale jeśli chcesz nieco poprawić swoją grę, rozważ zanurzenie się w Sass: w połączeniu z Compassem to dar niebios.
Sass + Compass: magicznie pyszny
Możesz przestać mieć nadzieję na edycję jednorożca CSS4. Jest tutaj i nazywa się Sass + Compass. Sass to skrót od Syntactically Awesome Stylesheets: dziedziczysz wszystkie tradycyjne zalety CSS3 z dodatkowymi zaletami zmiennych, miksów, rozszerzeń i innych dodatków.
Niedawno zrefaktoryzowałem plik CSS o długości 5000 linii, który zawierał ponad 30 odmian tego samego odcienia niebieskiego. W przypadku Sass zamieniłem każdą odmianę na ten kod:
kolor: niebieski;
Definiując $ niebieski w moim _variables.scss plik, mogę utworzyć domyślny kolor, do którego może się odnosić każdy plik CSS lub SCSS. Każdy, kto pisze CSS, może używać $ niebieski i nie musisz martwić się użyciem zakraplacza, znalezieniem kodu szesnastkowego lub koloru RGB, RGBA lub HSL.
Pamiętasz ten kod gradientu liniowego? Zamiast pisać kilka wierszy kodu, co powiesz na to:
@include background (linear-gradient (# b1cfdc, # 7a9cac));
Pozwól Sassowi i Compassowi wykonać ciężkie zadanie i wygenerować poprawną składnię za Ciebie: gotowe. Załóżmy, że chcesz mieć ciemniejszą lub jaśniejszą wersję koloru. Możesz poruszać kroplomierzem w Photoshopie lub po prostu użyć poleceń rozjaśniania / przyciemniania w Sass:
@include background (linear-gradient (darken ($ litegray, 2%), darken ($ off-white, 5%)));
Spowoduje to utworzenie liniowego gradientu z 2% zaciemnieniem $ lite-szary i 5% pociemniało białawy. Voil! Nie potrzebujesz nawet kodów HEX ani RGB.
jQuery: o tak, możesz
Muszę się do czegoś przyznać. JavaScript używany do zastraszania mnie. Potem znalazłem jQuery. Nie będę twierdził, że jestem guru JavaScript, ale jestem przekonany, że potrafię wykonać dowolne przejście lub funkcję, której potrzebuję, aby korzystać z jQuery.
Weźmy na przykład możliwość wyświetlenia dodatkowego numeru telefonu wprowadzonego na ekranie, klikając łącze Dodaj nowy numer. Używając jQuery, po prostu napiszesz to:
// - Odsłanianie progresywne - // $ ('. Nowa-liczba'). Click (function () {$ ('. Alt-liczba'). FadeIn ('szybko');});
Szukasz czegoś bardziej zaawansowanego? Prawdopodobnie jest do tego wtyczka. Podstawowe zachowania są łatwe, a złożone w jQuery.
Ramy
Dwa z najbardziej niezawodnych obecnie frameworków to Foundation i Bootstrap. Teraz, zanim odrzucisz frameworki CSS, pozwól, że cię o coś zapytam. Czy używasz jQuery? Ruby on Rails? Django? Wszystkie frameworki.
Podobnie jak jQuery i RoR, Foundation i Bootstrap narodziły się z uświadomienia sobie, że istnieje wiele rzeczy, które robimy w kółko (takich jak resetowanie, typografia, siatki, formularze, przyciski, nawigacja i listy). Foundation i Bootstrap oferują wsparcie dla responsywnych projektów poprzez użycie klas pomocniczych. Oba są dobrze udokumentowane i przeszły testy drogowe, więc możesz z nich korzystać bez obaw.
Jedna kluczowa różnica między nimi: Bootstrap opiera się na systemie LESS do wstępnego przetwarzania CSS, podczas gdy Foundation jest oparta na Sassie. Wolę Sass od LESS ze względu na jego dodatkowe możliwości, ale zarówno Sass, jak i LESS squashują tradycyjny CSS na kawałki.
Ostatnia myśl o frameworkach. Dla tych, którzy nie chcą odziedziczyć dodatkowego wzdęcia czyjegoś szkieletu, rozważ wybranie istniejącego i rozebranie go do samych kości lub wybranie jednego z kilku, aby stworzyć własny. Tak czy inaczej, naprawdę nie ma powodu, aby za każdym razem zaczynać od zera.
Końcowe przemyślenia
Chcesz mieć większą kontrolę nad tym, jak ostatecznie kończy się Twój projekt? Przenieś więcej procesów w górę do kodu. Wreszcie HTML5 nadaje DOMowi trochę sensu. Dobre pozbycie się nonsensów DOCTYPEs i divitis. CSS3 to nowy Photoshop: gradienty liniowe, borderradius i box-shadows FTW! Dzięki narzędziom takim jak Bootstrap, Foundation, Sass i jQuery przenoszenie projektu w górę do kodu nigdy nie było łatwiejsze.
Odkryj 55 niesamowitych przykładów HTML5 na Creative Bloq.
