6 sposobów na ulepszenie projektu Twojego bloga
Blogi często można pominąć w chłodzie, jeśli chodzi o projektowanie. Wielu z nas rezygnuje z intensywnego projektowania, jeśli chodzi o nasze blogi - zarówno dla naszych firm, jak i dla nas samych.
Ważne jest jednak, abyśmy zdali sobie sprawę z tego, że każdy aspekt naszej tożsamości online powinien być zaprojektowany w czysty i intuicyjny sposób w dowolnym stylu. Ten nieuchwytny aspekt pracy w sieci jest czymś, do czego powinniśmy stale dążyć. I tak, to obejmuje czas spędzany na pracy z blogami.
Wiele razy blogi gubią się w tasowaniu, ponieważ uważamy je za masowe "zrzuty tekstu", jeśli chodzi o architekturę informacji, a to z pewnością jest jednym aspektem ich tożsamości, ale mają one większy potencjał.
Niektóre blogi, gdy są właściwie zaprojektowane, są świetne do wyświetlania naszego strumienia myśli, a także niektórych informacji o portfolio, podczas gdy inne są świetne do wyświetlania zarówno wiadomości, jak i fotografii.
Chodzi o to, że blog może być świetnym zbiornikiem na różne tematy, a jego wyświetlanie sprowadza się do konkretnych wyborów projektowych, jakie podejmujesz. W ciągu ostatnich pięciu lat pojawiło się wiele rzeczy, które sprawiły, że blogowanie stało się łatwiejsze niż kiedyś. Na przykład WordPress jest świetny, a motywy wykonują dla nas wiele prac projektowych, ale jeśli chcesz je urozmaicić, musisz pamiętać o kilku rzeczach.
Podobnie, jeśli chcesz edytować nawigację lub układ motywu, musisz także pamiętać o kilku rzeczach. Dotyczy to niemal każdego silnika blogów lub pracy na własną rękę. Oto kilka moich przemyśleń na temat tego, co myślę, że te ważne elementy są.
Praca z efektami tekstowymi opartymi na cieniu
Efekty tekstowe to świetne sposoby na prezentowanie tytułów nagłówków, pasków nawigacyjnych lub prezentacji treści na blogu, pod warunkiem, że są one używane oszczędnie. Przeanalizujmy kilka z bardziej powszechnych efektów, które widzimy nadużywane w Internecie i jak prawidłowo je wykorzystywać.
Retro tekst
Praca z nimi często sprawia ból, ale mimo to wydaje się, że runda trwała półtora roku. Wraz z nadejściem CSS3 łatwiej jest manipulować i znaleźć idealne cieniowanie. Mam tutaj przykład, który pomoże nam zrozumieć, jak prawidłowo utworzyć ten efekt, a następnie przejdę do niego, kiedy i kiedy go nie używać. Nazwa gry z efektami retro to nie promień rozmycia i podwójne cienie. Powiedzmy, że pracujemy z czcionką w ciemnym kolorze (# 707070I), chcemy to osiągnąć za pomocą podwójnego cienia tekstowego. Wyglądałoby to mniej więcej tak:
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;
To powinno dać miły efekt podwójnej granicy, z bardzo 70-tym wyglądem. Oczywiście, aby uzyskać prawdziwą atmosferę lat 70-tych, konieczne może być dodanie wszelkiego rodzaju manipulacji kolorami, ale przynajmniej mamy obniżony efekt bazy. Pamiętaj jednak, nie szalej z kolorowaniem - i zdecydowanie nie szalej z przesunięciem x i y dla cieni tekstu (ponieważ może okazać się bardzo nieczytelne). Jeśli chodzi o użycie efektu retro, najlepiej używać tytułów nagłówka. Nie jest to efekt, który dobrze by działał z tekstem o małych rozmiarach lub informacjami opisowymi. Najlepiej niech pozostanie na szczycie bloga i zostaw go w spokoju.
Typografia i wstawka tekstu
Inną popularną funkcją, która oferuje CSS3 shadow, jest insetowy styl stylizacji, zwany inaczej "typem prasowym". Jest to zdecydowanie gorący temat w świecie efektów tekstowych CSS3, więc przyjrzyjmy się, jak je właściwie wykonać. Wstawka stylizacji jest zwykle uzyskiwana poprzez niewielkie przesunięcie osi Y, aby uzyskać wrażenie subtelnego podkreślenia w bezpośrednim tle tekstu. Często zdarza się, że jest używany jako przeciwieństwo kontrastu tła (jasne lub ciemne), aby efekt miał większy wpływ na czytelnika. Zjedzmy przykład.
Jasne tło, ciemny tekst:
body { background-color: #888; text-shadow: 0px 2px 3px #666;}
Ciemne tło, jasny tekst
body {background-color: #666; text-shadow: 0px 2px 3px #888;}
To da naprawdę fajny efekt warstwowy / wstawka, który może być użyty do nagłówków lub tytułów blogów. Używaj go oszczędnie w całej witrynie, ponieważ nic nie jest gorsze niż ktoś nadużywający efektów tekstowych. W takim przypadku można używać różnych nagłówków podrzędnych lub różnych pasków bocznych lub stopek, ale upewnij się, że nie używasz tego do opisowych informacji. Ponownie, żadne efekty tekstowe w cieniu nie powinny być wykorzystywane do takich rzeczy.
Praca z obrazami na Twoim blogu
Spójrzmy prawdzie w oczy, jako projektanci stron internetowych lubimy pochwalić się naszą pracą. Uwielbiamy to tak bardzo, że nawet nasze osobiste blogi mogą zostać podziurawione obrazami portfolio, a napisy są porozrzucane. Dlaczego więc nie skonsolidować tych dwóch? Najlepszym sposobem na pracę z informacjami o napisach jest umieszczenie odpowiednich informacji w samym obrazie, a najlepszym sposobem na to jest zaimplementowanie efektu CSS3 bezpośrednio na obrazie.
Jeśli jesteś ciekawy, dlaczego uważam, że jest to tak ważny aspekt pracy z obrazami, po prostu przejdź do sklepu internetowego Google Chrome (dodatki). Są w stanie wyświetlać tysiące obrazów bez żadnego otaczającego tekstu, a mimo to dają nam wystarczającą ilość informacji na temat tego obrazu, aby wiedzieć, czy chcemy go kliknąć, czy nie. To jest genialne i wielu z nas powinno stosować taką technikę, aby nie tylko usuwać niepotrzebny tekst napisów, ale także zwiększać komfort użytkowników.
Odtworzmy to dla twojego osobistego bloga, ale z własnym dotykiem, abyś mógł wyświetlać informacje o kliencie dla obrazów stron internetowych, nad którymi pracowałeś:
Najpierw musimy utworzyć kontener dla obrazu, a następnie wewnątrz niego musimy utworzyć kolejny kontener dla tekstu, który chcemy wykorzystać. W tym przypadku użyjemy pod-nagłówka, fragmentu tekstu i linku. następnie wewnątrz tego, tworząc kontener dla tekstu i linki do strony klienta, którą wyświetlamy.
W tej sekcji, robimy to, aby rzeczywisty obraz był wyprowadzany i przygotowywany do przejścia tekstu. Wykrywamy również, że chcemy, aby obraz pozostawał wzdłuż osi X, a nie osi Y, co oznacza, że będziemy mieli efekt drzwi przesuwnych.
Teraz ustawimy efekt myszy najechania i otrzymamy przejście, które rozpocznie się po tym wydarzeniu.
.image_container:hover .text_container { transform: translateX(0px);}.image_container:hover img { transform: translateX(300px);transition-delay: 0.1s;}.image_container:hover p { opacity: 1; transition-delay: 0.4s; }Jak widać, to, co zrobiliśmy, było podobne do tego, co zrobiliśmy powyżej dla obrazu. Po zdjęciu tekstu po prostu wprowadziliśmy tekst i nadaliśmy mu + 0,1 s opóźnienia, aby upewnić się, że wszystko idzie gładko. I o to chodzi.
Istnieje wiele innych sposobów na dostosowanie tego, a także wiele innych efektów przejścia, których możesz użyć. Pamiętaj jednak, że jeśli pracujesz z bardziej zaawansowanymi przejściami, nie używaj ich w tak powtarzalny sposób, jak w przypadku czegoś tak prostego, jak to. Są najlepiej używane oszczędnie, aby podkreślić kluczowe obrazy.
Praca z układami kreacji
Często, jako projektanci stron internetowych, zobaczymy nadużyte trendy, które były nadużywane rok po roku i chcemy być głosem, aby je zmienić. Ale postępowanie przeciwko ziarnu może być ryzykowną praktyką, szczególnie jeśli nie robisz tego właściwie (jako uwaga - nie mówię, że musisz być kreatywny "we właściwy sposób", ponieważ nie ma "właściwej drogi" do bądź kreatywny). Wspomniałem o tym, ponieważ uważam, że bycie kreatywnym jest z samej definicji pozbawieniem nas ograniczeń lub normami twórczymi, i faktycznie to zachęcam, ale uważam również, że powinniśmy uważać na powody, dla których takie normy zostały zakorzenione w naszej sieci. projektowania motywów i tego, co możemy zrobić, aby być innowacyjnym z nimi, mając to na uwadze.
Unikalne wyrównanie tekstu
Podczas pracy z tekstem w sposób kreatywny lub unikatowy (tj. Nie 12-punktowy Arial wyrównany do środka), naprawdę ważne jest, aby pamiętać, że tekst nie jest już główną treścią na stronie. Został zdegradowany do elementu wspierającego, aczkolwiek istotnego.
Jedno pytanie, które należy zadać sobie przy pracy z tekstem, brzmi: "Czy to się dobrze zgadza z resztą strony?" Może to być związane z niektórymi pracami z portfolio, niektórymi przypadkowymi obrazami, lub może z różnymi kolumnami tekstu po obu stronach. Strona.
Ale niezależnie od tego, co sąsiaduje lub jest prostopadła, musisz spróbować zrównoważyć to najlepiej jak potrafisz. Pomyśl o liniach siatki i zbadaj systemy gridowe tam, gdzie musisz ( 960 system kratek jest to, co polecam). Zbadaj, gdzie umieścili układ siatki na stronie, a następnie zadaj sobie pytanie, dlaczego - a następnie sprawdź, czy twój jest tak zrównoważony jak ten. Wyobraź sobie, że układasz zawartość wzdłuż samego układu siatki i spróbuj wymyślić, jak będzie wyglądać w tym przypadku - a następnie powiel ją w CSS.
Twórcze stopki
Twórcze stopki mogą naprawdę dodać wiele osobowości do bloga lub strony internetowej i wydaje się, że jest to raczej sprzeczne z intuicją. Niezależnie od tego, czy mówimy o przewijaniu jQuery, które umieszcza nas w pięknej stopce w stylu "pod ziemią", czy tylko na dole strony internetowej firmy lub bloga firmy, jest to bardzo mała część strony internetowej, ale taka, która może mieć bardzo silny wpływ. Opinie są podzielone na temat tego, w jakim stopniu tak jest i dlaczego może być. Mam swoją własną teorię: kiedy czytamy stronę, zaczynamy od początku i poruszamy się na samym dole, a na samym dole strony wyciągamy wnioski na temat tego, co przeczytaliśmy.
Podczas pracy z twórczą stopką należy pamiętać o kilku rzeczach, a kilka najlepszych praktyk, które zauważyłem, jest używanych w stopkach, które kocham najbardziej. Dla mnie najważniejszą częścią używania stopki w ten sposób jest użycie tego samego schematu kolorów co witryna, ale z innym kontrastem. Jest to niesłychanie ważne i oczywiście można pompować kontrast w górę lub w dół w kolorze czcionki w odniesieniu do kontrastu, z którym pracujesz, do ogólnego motywu w stopce.
Ważną rzeczą do zapamiętania jest to, że chcesz mieć ładny, głęboki styl dla tej sekcji. Daje miłe poczucie ukończenia witryny. Korzystając z tej techniki, możesz ustawić stopkę tak wysoką, jak chcesz, w granicach rozsądku, ponieważ w przypadku kontrastowego schematu kolorów jest oczywiste, że jest to rzeczywiście sekcja stopki.
Jeśli chodzi o treść, w świecie nowych stopek może być właściwe dodanie ilustracji logo i nazwy bloga, obrazów sieci społecznościowych lub linków, najnowszego tweeta, a nawet przyjemnego uproszczonego formularza kontaktowego. Może się to oczywiście różnić w zależności od osobistych preferencji, ale moim celem pokazującym wszystkie te opcje jest zilustrowanie ewolucji od przeszłości do teraźniejszości w tym, co jest właściwe do wyświetlenia na dole strony internetowej lub bloga.
przewijanie jQuery
Jest to jeden z moich ulubionych sposobów nawigacji w witrynie internetowej i uważam, że jest on odpowiedni do nawigowania na blogach. Jest kilka różnych sposobów pracy z jQuery, więc tutaj przejdę do tego, co jest jednym z moich ulubionych (i najłatwiejszych) sposobów na płynne przewijanie, a następnie omówię to, co się dzieje i jak go wdrożyć.
Jest to kod do przewijania w pionie, ponieważ poziome przewijanie nie jest tak pożądane.
$(function() {$('ul.nav a').bind('click',function(event){var $anchor = $(this);$('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top} , 1000); event.preventDefault ();});});To, co się tu dzieje, może wyglądać skomplikowanie, ale w rzeczywistości jest całkiem proste. Otwieramy funkcję na ".class" elementu nawigacyjnego, który będziemy klikać (nazywamy to zdarzeniem kliknięcia). Najważniejszą częścią jest tutaj tytuł klasy listy (ul) do "nav". Lub zastąp "nav" w kodzie tym, co nazwałeś tą klasą. I to jest właściwie to, że działa zwój jQuery, po prostu wrzuć to do swojej strony i link do minified jQuery (najlepiej) i jesteś gotowy do pracy.
Jeśli chodzi o użycie z pionowym przewijaniem w ten sposób, jest to dość nieograniczone. Wiele osób nie lubi przewijać ręcznie, naprawdę lubią to robiąc dla nich stronę, a także jest świetnym sposobem na przejście z postu do posta na stronie internetowej, zwłaszcza jeśli te posty są duże. Często używam go, aby przejść do różnych podsekcji portfolio w obrębie moich blogów lub kategorii na stronach internetowych. Jest to również doskonała technika, jeśli motywujesz swoją witrynę, na przykład temat dnia na dzień lub motywy dla kategorii lub blogów.
Mam nadzieję, że niektóre z tych technik były pomocne dla wszystkich, próbując zastosować różne estetyki projektu na swoim blogu. Pamiętaj, używaj ich oszczędnie i staraj się, abyś działał z najlepszą oceną, kiedy używasz efektownych efektów. Mamy obowiązek stworzyć internet, który nie jest tak brzydki jak niektóre aspekty świata zewnętrznego. Chociaż jest to duże i przytłaczające zadanie, możemy je zrealizować, jeśli po prostu wykonamy jeden projekt na raz i jeden dzień na raz. Utrzymuj to w prostocie, zachowaj uczciwość, utrzymuj to w rzeczywistości i zawsze umieszczaj pasje w tym, co robisz - tak jak zawsze będzie świecić.
Jakie są twoje najlepsze porady dotyczące projektowania bloga? Co sprawia, że naprawdę świetny projekt blogu? Daj nam znać w komentarzach!
