-
Tutorial na prosty szablon biznesowy
dodano 13.01.2008 / komentarzy: 1 / autor: Siostra Nocy
Rozpoczynając pracę nad tworzeniem szablonu dla firmy, warto zastanowić się nad układem. Powinien być oryginalny i nieoklepany - w końcu chcemy, żeby użytkownik po wejściu na stronę pomyślał: O, świetna strona, oryginalne rozwiązanie tutaj, to znaczy, że i firma na wysokim poziomie, a nie: O nie, jaki słaby układ… Takich stron są setki… Mogli się wysilić i zainwestować w coś porządnego, a nie w taką kichę. Dlatego też nie bójcie się odważnych rozwiązań, nowych układów, niekonwencjonalnych metod - oczywiście we wszystkim należy zachować umiar i rozsądek. Tak czy inaczej, tym, co odradzam przy tworzeniu tego typu szablonów to prosty, kolumnowy układ - typu na górze menu, w środku dwie kolumny, albo top, menu, kolumna. Takie rozwiązanie dobre jest przy tworzeniu sklepu internetowego, a nie strony firmowej, która w głównej mierze ma być wizytówką z niewielką ilością informacji, a nie chociażby miejscem do robienia zakupów.Top i menu
Menu zostało zrobione bardzo prostą metodą. Tworzymy prosty kształt (w zależności od tego, czy design jest okrągły czy kanciasty narzędziem Rectangle Tool bądź też Rounded Rectangle Tool). Następnie zaznaczamy warstwę klikając w jej obraz w zakładkach warstw, idziemy do select -> modify -> contract 2px. Kolejnym krokiem jest stworzenie nowej warstwy, wylanie na nią białej farby, po czym ustawienie jej na odpowiednim kryciu (po uprzednim odznaczeniu - deselect). Następnie zaznaczamy połowę, wybieramy biały gradient (Foreground to Transparent) i cieniujemy od dołu. Wystające bo bokach miałe cienie wymazujemy miękką gumką. Następnie tworzymy linię o grubości 1 px, rysujemy ją na mniej więcej 3/5 naszego menu. Wchodzimy do Filter -> Motion Blur (40), zmieniamy krycie na nam pasujące.
Napis na górze został wykonany czcionką Futura. Do projektowania tego miejsca polecam proste, “szczupłe” czcionki, oczywiście z wygładzaniem - bo to może być jak najbardziej element graficzny.
Fotka
Przyznam się szczerze, że w tym przypadku dałam ciała - wybrałam prostą fotkę, spotkaną już wielokrotnie na stronach biznesowych. Trzeba się więc pilnować i dobrać odpowiednie zdjęcie - w końcu skoro mamy już mieć w miarę oryginalny układ, tak samo powinno być z fotką, prawda? Dlatego też naprawdę warto pogrzebać i poświęcić trochę czasu na znalezienie odpowiedniego elementu, skupiającego uwagę.
Myślę, że świetnie wyglądałby również efekt animacji, ze zmieniającymi się zdjęciami. Kilka zdjęć z delikatnymi napisami, zmieniające się co kilka sekund - przykuwa uwagę.
Treść
Aktualności umieszczamy pod zdjęciem. Oczywiście, można je wcisnąć gdzie nam się podoba, a w tamtym miejscu umieścić formularz kontaktowy - to jest już jedynie uzależnione od Waszej wyobraźni. Osobiście jednak wolałam zastosować takie rozwiązanie dla strony głównej, a formularz pojawiłby się w podstronie “kontakt”. Jeśli jednak miałaby to być BARDZO okrojona wizytówka tamto miejsce dla wspomnianego elementu jest jak najbardziej wskazane.
Wracając jednak do aktualności - cały test został napisany czcionką Verdana, rozmiar w granicach 10-11 px. Mniejszą będzie już trudno rozczytać, a większa po prostu nie będzie pasowała. I tu warto pobawić się formatowaniem tekstu (przynajmniej do graficznej prezentacji szablonu) - pogrubić tytuł, kluczowe słowa i odnośnik do dalszej treści, pochylić datę - oczywiście, jak wszystko, w granicach rozsądku. Nie chcielibyśmy przecież, żeby potencjalny klient dostał oczopląsu przez czytanie raz takiego, a raz znowuż innego tekstu.
Samą treść piszemy czcionką szarą bądź czarną. Nagłówek “Aktualności” (czy też wszystko inne, co chcielibyśmy tam wstawić) dodajemy w kolorze pasującym do całego szablonu - więc kiedy menu jest niebieskie, zdjęcie ma odcienie niebieskiego, to i napis może być w takim kolorze. Oczywistym jest, że nie będzie tu pasował kolor bordowy czy zielony.
Aby wszystko nam się nie zlewało, warto dodać delikatny cień, odznaczymy daną kategorię (w tym przypadku Aktualności).
Treść po prawej stronie również została napisana czcionką Verdana o rozmiarze - jak zresztą widać - mniejszym niż newsy. Ta miałaby na celu krótki wstęp i opis firmy - czyli informacje, które widzimy wchodząc na stronę główną jakiejś firmy. Kolorystyka nie ulega zmianie - stosujemy wszystko tak samo jak w przypadku strony lewej.
Poniżej można dodać elementy we flashu czy jakiekolwiek inne animacje - zachęcające do odwiedzenia danego działu czy przejścia na inną stronę.
Stopka
Nie trzeba chyba nikomu mówić, że w tej prostocie dodanie jakiegoś wymyślnego kształtu czy zbyt “brutalne” odznaczenie gryzłoby się z wyglądem szablonu. Dlatego też dodajemy prosty, delikatny tekst, bez cieniowania. Dolne, powtórzone menu (o ile chcemy, aby takowe się znajdowało), dodajemy ponad linię stworzoną z kropek bądź też - jak kto woli - myślników. Trzeba pamiętać, aby poszczególne odnośniki były od siebie oddzielone - menu ma być wyraźne, a nie zlane.
Komentarze / dodaj komentarz
autor: MekoT
dodano: 12.10.2008
Super, bardzo fajnie opisane
mogłabyś mi udostępnić .psd tego lay’a w celu nauki? 
Napisz komentarz