Programiści tacy jak ja są często zastraszani przez projekt – ale trochę wysiłku może dać ogromny zwrot z inwestycji. Oto wskazówki jednego z programistów, aby każda strona szybko wyglądała bardziej profesjonalnie.
jestem programistą. Nie jestem projektantem. Mam dyplom z informatyki i nie mam nic przeciwko komiksom. (Wygląda wesoło. Idź dalej.
ale mimo, że jestem programistą, chcę, aby moje strony wyglądały atrakcyjnie. Częściowo wynika to z próżności, a częściowo z realizmu. Próżność, ponieważ chcę, aby ludzie myśleli, że moja praca jest dobra, a realizm, ponieważ badania pokazują, że ludzie nie będą myśleć, że strona jest wiarygodna, chyba że wygląda atrakcyjnie.
bardzo długo po tym, jak zostałem programistą, bałem się projektowania. Design zdawał się składać ze skomplikowanych zasad, które nigdzie nie zostały zapisane, plus niezachwiane poczucie smaku, posiadane tylko przez odzianą w czerń elitę.
ale jakiś czas temu postanowiłem zrobić wszystko, co w mojej mocy, aby moje własne projekty wyglądały nieco atrakcyjnie. I chociaż nie jest to zbliżone do efektu, jaki może osiągnąć profesjonalny projektant, gromadzenie tych zasobów w celu poprawy wyglądu witryny było naprawdę pomocne.
gdybym nie rozgryzł kilku podstawowych skrótów projektowych, jest mało prawdopodobne, że mój weekendowy hack wylądowałby na trzeciej stronie Daily Mail. I zbyt często widzę doskonałe projekty programistyczne, które nie docierają do odbiorców, na których zasługują, po prostu dlatego, że ich projekt nie pasuje do ich wykonania.
więc jeśli jesteś programistą, mój świąteczny prezent dla ciebie to: moja własna kolekcja hacków, które, słusznie używane, mogą sprawić, że Twoje osobiste projekty programistyczne będą wyglądać profesjonalnie, szybko. Żaden z nich nie jest trudny do nauczenia, większość jest darmowa i pozwala skupić się na pisaniu kodu.
warto jednak zwrócić uwagę na te wskazówki. Są osobistą, pragmatyczną kompilacją. Są to sugestie, a nie ostateczny przewodnik. Na pewno uzyskasz lepsze wyniki, pracując z profesjonalnym projektantem i głębiej studiując design.
jeśli jesteś projektantem, chciałbym usłyszeć Twoje sugestie dotyczące najlepszych narzędzi, których mi brakowało, i chciałbym wiedzieć, jak my programiści możemy robić rzeczy lepiej.
dzięki temu przejdź do narzędzi …
użyj Bootstrap
jeśli jeszcze nie używasz Bootstrap, Zacznij teraz. Naprawdę uważam, że Bootstrap jest jednym z najważniejszych osiągnięć technicznych ostatnich kilku lat: demokratyzuje cały proces projektowania stron internetowych.
zasadniczo Bootstrap jest systemem siatkowym, z kilkoma wspólnymi elementami. Możesz więc ułożyć swoją witrynę tak, jak chcesz, dodawać proste elementy, takie jak formularze i tabele, i uzyskać ładny, spójny wynik, bez spędzania godzin na manipulowaniu CSS. Potrzebujesz tylko HTML.
kolejną ogromną zaletą jest to, że ułatwia reagowanie na każdą witrynę, więc nie musisz się martwić o pisanie zapytań o media. Idź, weź Bootstrap i sprawdź przykłady. Aby Twoja witryna była lekka, możesz dostosować pobieranie tak, aby zawierało tylko te elementy, które chcesz.
jeśli masz więcej czasu, warto przeczytać artykuł Marka Otto o tym, dlaczego i jak powstał Bootstrap na Twitterze.
Pimp Bootstrap
używanie Bootstrap jest już znaczącym postępem w nieużywaniu Bootstrap i znacznie zmniejsza nudę tworzenia front-endu. Ale ryzykujesz również utworzenie kolejnej strony Bootstrap lub Hack Day Design, Jak to jest znane.
jeśli jesteś naprawdę naciskany na czas, możesz kupić motyw z Wrap Bootstrap. Są one zwykle tworzone przez profesjonalnych projektantów i dają lakier, którego sami nie możemy osiągnąć. Twoja strona nie będzie wyjątkowa, ale szybko będzie dobrze wyglądać.
na szczęście łatwo jest sprawić, by Bootstrap nie wyglądał zbyt podobnie do Bootstrap – używając czcionek, efektów CSS, obrazów tła, schematów kolorów i tak dalej. Większość reszty tego artykułu obejmuje różne sposoby osiągnięcia tego celu.
zamierzamy dostosować tę stronę przykładowego Bootstrap.
to już ma trochę niestandardowego CSS w <head>. Wyciągniemy to wszystko i utworzymy nowy plik CSS, custom.css. Następnie dodajemy odniesienie do niego w nagłówku. Teraz jesteśmy gotowi zacząć dostosowywać rzeczy.
czcionki
czcionki internetowe to jeden z najszybszych sposobów na to, aby Twoja strona wyglądała wyróżniająco, nowocześnie i mniej Bootstrappy, więc zaczniemy od tego.
po pierwsze, możemy dodać kilka słodkich czcionek, z Google Web Fonts. Zastraszający bit to wybór czcionek, które ładnie wyglądają razem. Na szczęście w sieci jest wiele sugestii:użyjemy jednej z proponowanych przez DesignShack darmowych par Google Fonts. Nasze czcionki to Corben (nagłówki) i Nobile (body copy).
następnie dodajemy te pliki do naszego <head>.
<link href="http://fonts.googleapis.com/css?family=Corben:bold" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=Nobile" rel="stylesheet" type="text/css">…a to do custom.css:
h1, h2, h3, h4, h5, h6 { font-family: 'Corben', Georgia, Times, serif;}p, div { font-family: 'Nobile', Helvetica, Arial, sans-serif;}nasz przykład wygląda tak. Nie zdobędzie żadnej nagrody za wzornictwo, ale od razu lepiej:
polecam również serwisy czcionek internetowych Fontdeck, czyli Typekit – te mają szerszy wybór czcionek i są warte inwestycji, jeśli regularnie trzeba sprawić, by strony wyglądały dobrze. Aby uzyskać więcej kombinacji czcionek, tylko mój typ sugeruje atrakcyjne pary z Typekit. Na koniec możesz eksperymentować z pomysłami parowania typów w połączeniu typu. Na tle projektu parowania czcionek, wpis Typekit jest wart przeczytania.
Tekstury
natychmiastowym sposobem, aby strona wyglądała Z klasą, jest użycie tekstur. Znasz szare, pasiaste, eleganckie tło na 24ways.org to.
gdyby tylko był znakomity zasób z atrakcyjnymi, darmowymi, gotowymi do użycia teksturami … Och czekaj, są subtelne wzory Atle Mo.
użyjemy kremowego pyłu, aby uzyskać efekt, który można określić jako subtelny. Pobieramy plik do nowego katalogu /img/, następnie dodajemy go do pliku CSS:
body { background: url(/img/cream_dust.png) repeat 0 0;}Bang:
aby zapoznać się z tłem projektowym na temat wzorów, polecam zapoznanie się z wytycznymi Smashing Magazine dotyczącymi tekstur. (Wersja TL; DR: użyj tekstur, aby poprawić piękno i wyjaśnić architekturę informacji witryny; ale nie przesadzaj lub nieumyślnie zasłaniaj tekstu.)
jeszcze więcej do zrobienia. Dalej.
ikony
zeszłoroczne 24 sposoby nauczyły nas używać czcionek ikon dla naszych ikon witryny.
to jest Świetne dla czasowego kodera, ponieważ czcionki ikon nie ograniczają tylko żądań HTTP-są znacznie szybsze w konfiguracji niż ikony oparte na obrazach.
Bootstrap posiada rozbudowany, darmowy do użytku komercyjnego zestaw ikon w kształcie czcionki Awesome. Jego ikony są bezpieczne dla czytników ekranu, a w razie potrzeby mogą być nawet przystosowane do pracy w IE7 (nie będziemy się tutaj przejmować).
aby zacząć korzystać z tych ikon, po prostu pobierz Font Awesome i Dodaj katalog /fonts/ do swojej witryny, a plik font-awesome.css do katalogu /css/. Następnie dodaj odniesienie do pliku CSS w nagłówku:
<link rel="stylesheet" href="/css/font-awesome.css">na koniec dodamy ikonę ciężarówki do głównego przycisku akcji w następujący sposób. Dlaczego ciężarówka? Dlaczego nie?
<a class="btn btn-large btn-success" href="#"><i class="icon-truck"></i> Sign up today</a>dostosujemy również nasz plik CSS, aby zapobiec przesuwaniu ikony o tekst przycisku:
.jumbotron .btn i { margin-right: 8px; }i tak to wygląda:
nie jest to najbardziej ekscytująca zmiana w historii, ale trochę ożywia stronę. Licencja to CC-BY-3.0, więc w kodzie źródłowym zamieściliśmy również wzmiankę o Font Awesome i jej adresie URL.
jeśli chcesz czegoś bardziej charakterystycznego, Shifticons pozwala zapłacić kilka centów za poszczególne ikony, z bonusem, że musisz tylko obsługiwać ikony, których faktycznie używasz, co jest bardziej wydajne. Jego ikony są również przyjazne dla czytników ekranu, ale nie działają w IE7.
CSS3
następną rzeczą, którą możesz zrobić, to dodać trochę dobroci CSS3. To naprawdę może pomóc wyróżnić kluczowe elementy witryny.
jeśli jesteś wciśnięty na czas, wystarczy dodać box-shadow I text-shadow, aby podkreślić nagłówki i wyróżniki:
h1 { text-shadow: 1px 1px 1px #ccc;}.div-that-you want-to-stand-out { box-shadow: 0 0 1em 1em #ccc;}mamy jednak trochę więcej czasu, więc zrobimy coś bardziej subtelnego. Dodamy gradient promieniowy za głównym nagłówkiem, używając edytora gradientów online.
wyjście jest duże, ale widać to w CSS. Zauważ, że musimy również dodać następujące elementy do naszego HTML, dla obsługi IE9:
<!--> <style type="text/css"> .gradient { filter: none; } </style><!-->i efekt-Nie wiem, co by pomyślał projektant, ale podoba mi się sposób, w jaki sprawia, że nagłówek pop.
aby uzyskać crash course w zakresie przydatnych nowoczesnych efektów CSS, Gorąco polecam internetowy kurs CodeSchool w zakresie funkcjonalnych HTM5 i CSS3. To kosztuje ($25 miesięcznie do subskrypcji), ale warto na czas, który zaoszczędzisz. Jako bonus otrzymujesz również dostęp do doskonałych kursów JavaScript, Ruby i GitHub.
(nawiasem mówiąc, jeśli walczysz z podstawowymi atrybutami float i display w CSS – i nie ma w tym wstydu, układ CSS nie jest intuicyjny-polecam kurs CSS Cross-Country w CodeSchool.)
Dodaj twist
możemy go tam zostawić, ale dodamy obraz tła i nadamy witrynie trochę osobowości.
jest to obszar projektowania, który moim zdaniem wielu programistów uważa za najbardziej onieśmielający. W jaki sposób tworzymy grafikę i fotografie, z których korzystałby projektant? Odpowiedź jest i jej konkurenci-biblioteki obrazów online, gdzie można znaleźć i zapłacić za zdjęcia. Nie będą unikalne, ale dla naszych celów, w porządku.
Dla odmiany użyjemy Backstretch, aby był responsywny.
musimy zapłacić za obraz, a następnie pobrać go do naszego /img/ katalogu. Następnie ustawiamy go jako nasz <body>’s background-image, dołączając plik JavaScript z następującą linią:
$.backstretch("/img/winter.jpg");zresetujemy również subtelny wzór, aby stać się tłem dla naszego obrazu kontenera. Wyglądałoby to znacznie lepiej przezroczyste, więc możemy użyć tej techniki w Gimpie, aby było przezroczyste:
.container-narrow { background: url(/img/cream_dust_transparent.png) repeat 0 0;}bawimy się również wyściółką na body i .container-narrow trochę, a to jest wynik:
(na marginesie: gdyby to była prawdziwa strona, chciałbym kupić obrazy w wielu rozmiarach i upewnić się, że Backstretch wybrał najbardziej odpowiedni rozmiar obrazu dla naszego ekranu, być może przy użyciu responsywnych obrazów.
jak znaleźć efekty, które czynią stronę interesującą? Trzymam zestaw zakładek dla ciekawych efektów JavaScript i CSS, których może kiedyś będę chciał użyć, od realistycznych cieni PO animowane siatki. Cotygodniowy newsletter JavaScript jest doskonałym źródłem pomysłów.
Schematy kolorystyczne
właśnie się zbliżamy-choć pewnie już minęło pół godziny – ale ten przycisk i to menu nadal wyglądają strasznie Bootstrappy.
prawdziwe witryny, z prawdziwymi projektantami, mają paletę kolorów, starannie dobraną, aby zharmonizować i dopasować profil marki. Dla naszych celów pożyczymy tylko kilka kolorów z obrazu. Używamy narzędzia Gimp colour picker do identyfikacji wartości sześciokątnych niebieskiego śniegu. Następnie możemy użyć Color Scheme Designer, aby znaleźć kontrastujące, ale uzupełniające się kolory.
wreszcie używamy tych kolorów do naszego centralnego przycisku. Istnieje wiele narzędzi, które pomogą nam to zrobić, takich jak przyciski Bootstrap. Nowy HTML jest dość długi, więc nie będę wklejał wszystkiego tutaj, ale możesz go znaleźć w pliku CSS.
resetujemy również kolor tabletek w menu nawigacyjnym, co jest nieco łatwiejsze:
.nav-pills > .active > a, .nav-pills > .active > a:hover { background-color: #FF9473;}nie jestem pewien, czy wynik jest świetny, szczerze mówiąc, ale przynajmniej straciliśmy te Bootstrap-niebieskie przyciski:
innym sposobem, aby to zrobić, jeśli nie masz obrazu do dopasowania, byłoby wypożyczenie atrakcyjnego schematu kolorów. Colorlovers to społeczność, w której ludzie tworzą i dzielą się gotowymi paletami kolorów.
najważniejsze jest znalezienie palety z otwartą licencją, abyś mógł z niej legalnie korzystać . Niestety nie można wyszukiwać palet według typu licencji, ale wiele z nich ma otwarte licencje. Oto popularna paleta z licencją CC-BY-SA, która pozwala na ponowne użycie z przypisaniem.
jak wyżej, możesz użyć wartości szesnastkowych z palety w niestandardowym CSS i wygrzewać się w nowo kolorowych wynikach.
Czytaj dalej
dzięki powyższym technikom możesz zrobić stronę, która zaczyna wyglądać nieco bardziej profesjonalnie, dość szybko.
jeśli masz czas na inwestycje, warto nauczyć się kilku zasad projektowania, choćby po to, aby design wydawał się mniej onieśmielający i bardziej przypominał zabawę. W ramach mojej nauki projektowania przeczytałem kilka książek wprowadzających do projektowania skierowanych do programistów. Najlepsze, co znalazłem, to projekt Davida Kadavy ’ ego dla hakerów: Reverse-Engineering Beauty, który wyjaśnia podstawowe zasady doboru kolorów, czcionek, krojów pisma i układu.
we wstępie do swojej książki Dawid pisze:
żadna grupa nie czerpie więcej z umiejętności projektowania niż hakerzy … jedynym tematem, który jest niezwykle frustrujący dla hakerów, aby spróbować się nauczyć, jest projektowanie. Hakerzy wiedzą, że aby konkurować z korporacyjnymi behemotami za pomocą zaledwie kilku linii kodu, muszą mieć dobry, przejrzysty design, ale zasoby, z którymi można się nauczyć projektowania, są po prostu trudne do znalezienia.
dobrze powiedziane. Jeśli masz pół dnia na zainwestowanie, a nie pół godziny, polecam zdobycie książki Davida.