10 przydatnych narzędzi dla web designera

1. Darmowe szablony stron

Templateshock.com dostarcza nam 150 darmowych templatek, które możemy wykorzystać w naszych projektach.

Jeśli okaże się to za mało lub nie znajdziemy tego czego szukamy, możemy zakupić większy zestaw szablonów (obecnie 39$ za 500 templatek).

Dla osób bardzo wymagających dostępna jest usługa subskrypcji, w ramach której co miesiąc będziemy otrzymywać 10-12 nowych szablonów, a także będziemy posiadać wsparcie dla aktualizacji poszczególnych templatek.

Przejdź na stronę templateshock

---

Kurs UX & UI - sztuka użytecznego projektowania

UX Design - klucz do sukcesu każdej aplikacji i strony internetowej... Dowiedz się więcej

---

2. Pomysły na menu

Nawigacja na stronie to jeden z najważniejszych o ile nie najważniejszy aspekt tworzenia stron. Użytkownik powinien intuicyjnie wiedzieć, gdzie może znaleźć określone informacje.

Jednak strony powinny być zauważalnie różne od siebie aby zaciekawić użytkowników.

Tutaj znajdziecie różne pomysły na menu, które możecie zastosować na swoich stronach aby pogodzić indywidualność z intuicyjnością.

Przykład 1

Jeszcze jedno animowane menu znajdziesz tu.

Przykład 2

3. Ikony Codepen

Ładne i proste ikony do zastosowania na stronie.

Jednak te animowane ikony moim zdaniem nie są zbyt dobre. Dlaczego? Już śpieszę z wyjaśnieniem.

Otóż jest to trochę zabawa w ciuciubabkę z użytkownikiem. Nie widać co kryje się pod daną ikoną, dopóki na nią nie najedziesz myszką.

Taki zabieg może i jest ciekawy ale też nieco irytujący. Owszem po kilku minutach można zapamiętać gdzie co jest jednak na początku czeka nas trochę „błądzenia”, a przecież liczy się pierwsze wrażenie.

Przejdź na stronę Codepen

4. Efekt scroll Codyhouse>

Ciekawy, lecz nie oszałamiający efekt przewijania strony. Z pewnością wniesie coś świeżego do projektu, jednak na efekt „WOW” nie liczyłbym.

Stosując go musisz koniecznie wziąć pod uwagę treść, jaka będzie gościć na Twojej stronie.

Ten efekt dobrze wygląda ze zdjęciami, krótkimi hasłami itp.

Nie polecam stosować go do dłuższych wypowiedzi, gdyż może to irytować czytelnika.

Przejdź na stronę Codyhouse

5. Ciekawe zastosowanie gradientów

Wiele animowanych, ciekawych stron głównych, którymi można się zainspirować.

Mi najbardziej przypadła go gustu http://robin-noguier.com/

Jest ciekawa, spokojna, ma interesujący efekt podążający za kursorem (przypomina mi falowanie wody), a jednocześnie nie jest nachalna. Oby więcej takich stron 😉

Przejdź na strone Onextrapixel

6. Film jako tło – Coverr

Dobrym pomysłem jest też umieszczenie filmu jako tło na stronie. Umiejętne dobranie filmu może sprawić, że użytkownik polubi twoją stronę i chętnie do niej wróci.

Musisz jednak zadbać o odpowiednie dopasowanie wszystkich elementów. Po umieszczeniu na stronie filmu pamiętaj o dokładnym sprawdzeniu czy w żadnym momencie napis/element umieszczony przed materiałem wideo nie staje się słabo widoczny.

Często zapominamy o tym że tło jest np. zbyt jasne dla białego napisu przez co jest on trudny do odczytania.

Aby zachować estetykę warto wypróbować różne odcienie zastosowanego koloru lub pomyśleć nad literami z delikatną obramówką, która znacząco ułatwi czytanie tekstu.

Przejdź na stronę Coverr

7. Rozpoznawanie fontów użytych w obrazkach

http://www.whatfontis.com/

http://www.fontspring.com/matcherator

Powyższe strony oferują możliwość rozpoznania czcionek użytych w obrazkach.

Przydatna, a na pewno ciekawa funkcja, która może ułatwić nam życie 😉

8. Firmowe ikony

Warto umieszczać na stronach ikony programów czy firm o którym mówimy.

Kolorowe obrazki zachęcą do dalszego czytania, a czytelnikowi łatwiej będzie zapamiętać i skojarzyć informacje zdobyte na twojej stronie.

Na poniższych stronach masz możliwość pobrania darmowych grafik przedstawiające właśnie loga firm i produktów:

http://lunarpixel.deviantart.com/art/Free-Vector-Polygon-Social-Media-Icons-372669540

http://svgporn.com/

9. Ściąga z HTML

Zwłaszcza na początku ciężko jest zapamiętać nowe komendy/polecenia używane w danym języku czy programie. Z tego powodu przedstawiamy wam ściągę z HTML zawierającą wiele przydatnych komend, których być może nie znacie 😉

Jest to strona w języku angielskim, lecz bez obaw, mamy też przygotowaną ściągę w języku polskim, a do tego w formacie PDF!

Oznacza to że możecie łatwo wydrukować sobie taką ściągę. Jest to bardzo praktyczne rozwiązanie w przypadku gdy brakuje ci miejsca na monitorze.

Przejdź na stronę makeawebsitehub

10. „Upiększacze” kodu

Chyba nie ma wśród nas osoby, która nie pragnęłaby, żeby jej kod był piękny 😉

Nie chodzi oczywiście jedynie o względy estetyczne, lecz o zachowanie pewnych nawyków, które ułatwią odnalezienie się w kodzie.

Nie jest łatwo wypracować sobie taki nawyk. Dodatkowym problemem jest to, że utrzymanie kodu w porządku jest czasochłonne.

Z ratunkiem przychodzą nam upiększacze kodu, które same ułożą kod tak, że praktycznie nikt nie będzie mieć problemu z odnalezieniem konkretnego miejsca.

Jest to darmowy, prosty w obsłudze program, który działa bez pobierania na dysk – wszystko dzieje się na stronie.

Przejdź na stronę codebeautify

Tekst ma na cely=u zestawienie ciekawostek i porad, dzięki którym można zaprojektować przyjazne dla użytkowników witryny. Mamy nadzieję, że dowiedzieliście się czegoś nowego, zainspirowaliście się lub znaleźliście coś ciekawego co chętnie zastosujecie we własnych projektach.