Wykonywanie stron internetowych
zgodnie z projektem
Witryny Internetowe Paulina Kucharczyk
Zasady projektowania (1/3)
1.
2.
3.
4.
5.
Temat przewodni (cel strony i informacja, którą ma przekazać) Przejrzystość i minimalizm (łatwość w obsłudze)
Hierarchiczność struktury (priorytetyzacja informacji i sekcji) Responsywność (dostosowanie się do wielu urządzeń)
Czytelność (unikanie zlewania się, małych fontów szeryfowych)
Zasady projektowania (2/3)
6.
7.
8.
9.
10.
Szybkość ładowania (optymalizacja rozmiarów plików i skryptów) Dobór palety barw (kolor i szata graficzna ma znaczenie)
Dopasowanie do przeglądarek (testy na wielu silnikach, WYSIWYG ) Pozycjonowanie (przygotowanie do pracy z wyszukiwarkami)
Dostępność (dostosowanie do wieku, niepełnosprawności, sprzętu)
Zasady projektowania (3/3)
11.
12.
13.
14.
15.
Zgodność standardów W3C (pamiętanie o walidacji i testach) Jakość multimediów (stosunek jakości do rozmiaru pliku)
Poprawność językowa (unikanie błędów ort, int i merytorycznych) Interakcja z użytkownikiem (wyróżnianie aktywnych elementów) Logiczne menu (spójna, niezmienna nawigacja w całym serwsie)
Etapy projektowania
1.
Czynności początkowe:
- Analiza wymagań klienta, przeznaczenia witryny oraz możliwości technicznych i finansowych (Brief)
- Wstępna analiza biznesowa (kosztorys i SWOT)
- Dobór hostingu (serwery, domenu, subdomeny) oraz technologii i narzędzi do wykonania witryny
- Określenie polityki pozycjonowania i bezpieczeństwa
Etapy projektowania
2.
Wykonanie:
- Stworzenie struktury logicznej - topologii poszczególnych podstron tzw. mapy strony z flow ich przejścia
- Stworzenie struktury graficznej - szczegółowego layoutu podstron z projektami elementów graficznych i paletą barw
- Stworzenie struktury fizycznej - drzewo katalogów z plikami strony - * Ewentualne projektowanie baz danych i innych narzędzi
Etapy projektowania
3.
Czynności końcowe:
- Walidacja - sprawdzenie poprawności, zgodności danych i narzędzi - Weryfikacja - sprawdzenie zgodności z założeniami początkowymi - Testowanie - sprawdzenie funkcjonalności, flow, ui, ux
- Publikacja - zaimportowania i opublikowanie strony - Konserwacja - podtrzymanie strony, wsparcie
Etapy projektowania
Brief
+ inne analizy, założenia techniczne, wymagania użytkowników, wyliczenia finansowe.
Pamiętaj, aby spisać wszystko za co klient płaci czarno na białym, aby po skończonej pracy nie było niezgodności i roszczeń ;)
Szablon strony
Makieta strony
Narzędzia online:
- Moqups - Figma
- Marvelapp - Canva - Draw.io
Dobór palety barw
(Adobe Color CC) Znaczenia kolorów:
- czarny: elegancja, luksus, szyk - biały: pokój, czystość
- brązowy: powaga, ciepło, neutralność, niezawodność - czerwony: przygoda, energia,
pasja, niebezpieczeństwo - żółty: radość, ciepło, słońce
- zielony: natura, życie, harmonia, nadzieja, wolność, zdrowie
- niebieski: spokój, stabilność,
sukces, bezpieczeństwo, pewność
Dobór czcionek Rodzaje fontów:
- szeryfowe - pasują do eleganckich i poważnych treści
- bezszeryfowe - bardziej nowoczesne, czytelniejsze - pisane i ozdobne - służą do
urozmaicania stron
* Pamiętaj, aby do stron po polsku szukać czcionek z alfabetem Latin i weryfikować znaki: ŻÓŁĆ JAŹŃ Źródła fontów:
- Dafont
- Omnibus-type - Google Fonts - WhatTheFont
Architektura informacji (diagram flow)
Menu nawigacyjne (diagram poziomów)
Realizacja projektu
Klasa A - sklep internetowy
Referencja -> Allegro
Klasa B - usługi transportowe
Referencja -> BlaBlaCar
Klasa C - usługi hotelarskie
Referencja -> Camping
Projekt strony biblioteki (strona index)
Projekt strony biblioteki (strona z listą wpisów)
Projekt strony biblioteki (strona z dodawaniem)
Projekt strony biblioteki
(strona z logowaniem / rejestracją)
Projekt strony biblioteki (strona z edycją użytkownika)
Projekt strony biblioteki (strona podglądu wpisu)
