Wordpress

Jak przyspieszyć stronę internetową? – Optymalizacja obrazów

Szybkość działania strony internetowej jest problemem dla wielu developerów. Wyniki prezentowane w Page Speed Insights od Google często nie są zadowalające. Wolne strony internetowe nie tylko negatywnie wpływają na odbiór strony przez użytkowników ale także na jej pozycję w wyszukiwarkach.

W tym artykule omówię jeden z czynników, który wpływa na prędkość ładowania stron internetowych, czyli obrazy. Potrafią one w sposób druzgocący obniżyć nasze wyniki dlatego bardzo ważne jest aby były dobrze zoptymalizowane.

Jeśli Twoja strona oparta jest o system cms WordPress to możesz skorzystać z poniższych wtyczek.

WP Smush.it

Jest to bardzo prosta w obsłudze wtyczka, której zadaniem jest kompresja zdjęć. Zdjęcia możemy kompresować pojedynczo lub wszystkie naraz poprzez panel admistracyjny WordPressa. Wystarczy w bibliotece mediów wybrać zdjęcia przeznaczone do kompresji a następnie wybrać opcję bulk.

Flat Design – czy jest nadal modny?

Nie nadużywaj wtyczek

Marzymy czasem o nowych na naszej stronie internetowej, ale zastanówmy się najpierw czy są one faktycznie niezbędne.

Nowa wtyczka to dodatkowy JavaScript na naszej stronie, który często zmniejsza jej wydajność. Zanim zaczniesz instalować nowe pluginy, przeczytaj opinie na ich temat. Darmowe pluginy często napisane są w nieodpowiedni sposób, co może mieć wpływ na prędkość ładowania witryny.

Read More...

Wordpress

20 najbardziej kreatywnych szablonów WordPress w 2015 roku

Artykuł ten to zbiór najciekawszych szablonów do WordPressa, czyli niestandardowych, które wyróżniają się na tle innych. Jak widać mamy dziś 18 stycznia, więc biorę pod uwagę szablony, które powstały w ciągu ostatnich 18 dni, ale będę dodawać nowe szablony przez cały rok. Będą brane pod uwagę szablony do Wordrpessa zarówno płatne i darmowe, a kryterium oceny będzie ich unikalność.

 1. OSMOSIS

najlepsze-szablony-wordpress

Osmosis to szablon uniwersalny z świetnym layoutem. Podoba mi się lekkość szablonu, dużo przestrzeni i dobór kolorów.

Doskonale dobrana jest także typografia, nagłówki wyglądają bardzo przyzwoicie, okraszone są dodatkowo ciekawymi animacjami.

Szablon zawiera popularny plugin Visual Composer, dzięki czemu mniej doświadczeni użytkownicy z łatwością zbudują własne układy.

Demo: http://greatives.eu/themeforest/themeswitcher/?product=osmosis

2. ESPRESSO

szablony wordpress

szablony wordpress

Szablon dla WordPressa, który przykuł moją uwagę za sprawą ilości funkcji jakie posiada. Dzięki temu szablonowi możemy utworzyć stronę www prezentującą naszą działalność bądź firmę, ale jednocześnie zadbać w odpowiedni sposób o content marketing. Szablon ma charakter magazynu, ale właśnie dzięki mnogości opcji może spokojnie posłużyć jako strona firmowa. Wygląd można łatwo dostosować do własnych potrzeb.

Dobrze współgra z BBPress, BuddyPress oraz Woocommerce

Demo: http://bit.ly/1yEyrks

Read More...

Ux design, Web design

Dlaczego developerzy powinni uczestniczyć w projektowaniu graficznym

Odwiecznym pytaniem, które zadaje sobie wielu grafików jest czy powinni oni umieć programować? Nie ma jednoznacznej odpowiedzi na to pytanie, jednak uważam, że projektanci Ux jak najbardziej powinni mieć choćby podstawową umiejętność programowania. Z jednej strony nie jest to konieczne jeśli nie oni to kodują i ta umiejętność w wielu firmach nie będzie wykorzystywana, a z drugiej strony daje ona projektantowi możliwość wyobrażenia sobie co dalej z jego projektem będzie się działo i jak zaprojektować pewne elementy aby w odpowiedni sposób je później wdrożyć w życie.

Mniej popularnym tematem jest to czy programista powinien znać się na designie i czy powinien uczestniczyć przy jego tworzeniu.
Tu ponownie mogę odpowiedzieć, że tak, jest to sytuacja idealna gdy obie strony wspólnie pracują od samego początku i wzajemnie się uzupełniają. Rzeczywistość w wielu firmach jest jednak często zupełnie inna.

DLACZEGO WSPÓŁPRACA DEVELOPERA I GRAFIKA JEST TAK WAŻNA?

Developer na samym początku może grafikowi dawać sugestie w jaki sposób powinien wyglądać projekt pod kątem technicznym. Np jak powinna wyglądać strona responsywna. I tu pojawia się pytanie czy grafik sam nie powinien wiedzieć jak ta strona responsywna powinna wyglądać? Jak najbardziej powinien, a żeby zrozumieć jak będzie się ona składać musi mieć choćby ogólną wiedzę o html i css.

Flat design – Dowiedz się w jakim kierunku zmierza

 

Read More...

Ux design, Web design

Flat design – geneza i dalszy kierunek

Może temat flat design’u na stronach internetowych jest już tematem wyświechtanym, bo omawiany był wielokrotnie w innych publikacjach, jednak trend ten jest wciąż aktualny i warto przyjrzeć się w jakim kierunku zmierza i czemu powstał. Zjawisko to właściwie ciężko nazwać trendem, bo jest to po prostu sposób projektowania stron internetowych, który ma wiele różnych odmian i stale się zmienia.

Jak doszło do tego, że uwielbiane prze web designerów upiększania tj. gradienty, cienie, zaokrąglenia, błyski, wymyślne czcionki i inne tego typu dodatki, które sprawiały, że strona wydawała się „taka ładna” nagle odeszły do lamusa a graficy pokochali flat design?

Przesyt treści

Jesteśmy na etapie bycia stale podłączonym do internetu, nie rozstajemy się z nim nawet przez chwilę. Dzięki coraz lepszym ofertom abonamentowym, już prawie każdy ma internet w telefonie. To samo tyczy się smartfonów, stale tanieją dzięki czemu są dostępne dla każdego.

Przeglądając tak ogromne ilości stron i czytając każdego dnia od kilku do kilkuset artykułów nietrudno o zmęczenie i uczucie przesytu. Flat design ma być czymś w rodzaju zen. Nie potrzebujemy zbędnych bodźców, co nie znaczy, że strony internetowe mają być zaniedbane wizualnie. Właśnie najtrudniej jest zrobić stronę z minimalistycznym designem, która jednocześnie będzie eye catchy. Dlatego wiele powstaje narzędzi, które proces projektowania mają ułatwiać.

Reasumując najważniejsze są treści a design ma ułatwiać ich konsumpcję.

Mniej funkcji – lepszy efekt

Minimalistyczne podejście nie ogranicza się jedynie do designu. Możemy zauważyć, że dostępne na rynku aplikacje mają co raz mniej funkcji – zbędnych funkcji.
Wcześniej widzieliśmy tendencję do ładowania wielu funkcjonalności, które miały pokazać użytkownikowi jak bogata jest aplikacja. Programiści zdali sobie jednak sprawę, że lepiej stworzyć narzędzie z ograniczonymi możliwościami, które będzie łatwe w obsłudze.

Nie podążaj ślepo za trendami

To, że flat design jest modny nie oznacza, że ślepo należy kierować się wszystkimi trendami, bo trendy zmieniają się bardzo szybko.

Przykładem mogą być ikony, które wpasowują się w trend flat design’u. Swego czasu modne były ikony całkiem płaskie z wypełnieniem. Po tym okresie weszły w życie tzw ghost buttons czyli ikony i przyciski bez wypełnienia a jedynie z samym obrysem. Nagle na większości designerskich stron internetowych mogliśmy zobaczyć tego typu ikony.

Obecnie modne są ikony z długim cieniem tzw long shadow icons, które prezentuję na zdjęciu poniżej. Jest to trend, który tak samo jak szybko się pojawił tak samo szybko zniknie.

Skąd ten wniosek? Ikony tego rodzaju są zbyt nietypowe, wyróżniają się gdy używamy takich ikon na stronach internetowych. Do tego dochodzą kolory tła, bo taka ikona nie może istnieć bez kwadratu bądź kółka w tle. Są one zatem niepraktyczne i na tyle inne, że szybko się znudzą. Ja już nie mogę na nie patrzeć.

 

Long shadow icons - Designmodo

Long shadow icons – Designmodo

Jeden kolor

Trend, który powoli wchodzi w życie to dominacja jednego koloru na stronie. W roku 2014 mieliśmy zalew kolorowych stron, co dawało infantylny efekt i zmniejszało przejrzystość przekazu. Strony lub aplikacje, które mają dominujący kolor są korzystne ze względu na to, że łatwo zapadają w pamięć. Można to przyrównać do kolorystyki produktów, na przykładzie Milki i jej fioletowych czekolad, które wyróżniają się na półkach sklepowych.

strony-jednokolorowe

Nietypowa nawigacja

Wielu developerów odchodzi już od standardowego menu. Sticky i floating menu już nie są niczym nowym i nikogo nie zaskakują, dlatego w roku 2015 zobaczymy więcej nietypowych rozwiązań. Będziemy częściej spotykać też hamburger menu, czyli menu, które rozwija się po kliknięciu w odpowiednią ikonkę. To rozwiązanie jest już powszechne za granicą, polscy developerzy są jak zawsze nieco bardziej konserwatywni.
nietypowa-nawigacja

Video w tle

Ten trend wciąż będzie aktualny, koresponduje on bowiem doskonale z flat designem. Przy prostym layoucie jest idealnym uzupełnieniem. Będziemy częściej obserwować filmy na stronach, które będą zastępowały dotychczasowe slidery. Będą to jednak przeważnie filmy ‚amatorskie’, które mają sprawiać wrażenie luźno nakręconej sytuacji. Przykład poniżej doskonale ilustruje to chcę powiedzieć.
video-background

Duża typografia i pozornie niepasujące elementy

To co przykuwa moją uwagę ostatnio to element zaskoczenia na stronach. Wielokrotnie przeglądając strony internetowe widziałam niekonsekwencję w jej układzie, co dawało doskonały efekt i zdecydowanie jest to trend, który będzie rozwijał. Tak samo jak duża, wyraźna typografia. Poszczególne elementy będą zajmowały co raz więcej powierzchni na stronie. Tworząc strony z dużą typografią należy jednak pamiętać o umiarze w treści. Czyli musimy ograniczyć się do najważniejszych, kluczowych elementów, które chcemy przekazać użytkownikowi.
Poniżej przykład bardzo interesującej strony.
big-typo
Podsumowując Flat Design wciąż będzie dominującym trendem w roku 2015, będzie jednak znacznie ewoluował. Przy tworzeniu swoich stron pamiętajcie o tym aby na pierwszym miejscu zawsze stawiać doświadczenie użytkownika a dopiero później zaskakiwać go niebagatelnym wyglądem, bo strony nadal muszą być przede wszystkim funkcjonalne.

450x75-tekstROKU

Read More...

Strony internetowe

Strony internetowe – najlepsze w 2015

Najlepsze strony internetowe

Strony internetowe o ciekawym designie zawsze przykuwały moją uwagę. Poniżej lista najlepszych stron internetowych. Nie ma tu żadnych kryteriów oceny, wybieram strony internetowe, które mi się podobają.

HUGE

Najlepsze strony internetowe

Strona internetowa agencji Huge zachwyciła mnie prostotą a zarazem doskonałym, odważnym doborem kolorów. Podoba mi się użycie bardzo dużych czcionek w nagłówkach oraz kontrast na stronie. Układ i sposób przewijania strony jest dość typowy dla obecnych czasów, jednak pomimo to strona zaskakuje designem gdy zjeżdżamy niżej i to jest to co uwielbiam w web designie.

Mamy tu także bardzo efektowne, drobne animacje. Zwróćcie uwagę choćby na to jak reaguje hamburger menu gdy na niego klikamy.
Strona ta pokazuje, że pracownicy agencji są odważni i kreatywni o czym świadczy przykładowo nagłówek w zakładce ‚Kariera’ – ‚Get paid for giving shit‚.

Strona nie jest przeładowana trendami, więc będzie jeszcze długo na czasie. Wywarła na mnie mega pozytywne wrażenie.

Zobaczcie sami: www.hugeinc.com

 

Reebok: Be More Human Experience

Najlepsze strony internetowe

Najlepsze strony internetowe

W przypadku tej strony internetowej nie można mówić o prostocie. Strona jest bardzo rozbudowana, ale wykonana doskonale. Pomimo wielu efektów, nie ładuje się ciężko. Bardzo szczegółowa i świetnie wykonana strona internetowa. Przy ocenie skupiam się głównie na aspekcie wizualnym i technicznym, bo przyznam, że wartość merytoryczna tego typu stron wydaje mi się znikoma. Pokazują one jednak kunszt developerów, którzy nad takimi stronami pracują.

Link do strony: http://bit.ly/1JT5dPU

Read More...