-
data publikacji: 13.01.2008
Tutorial na prosty szablon biznesowy
kategoria: Tutoriale, Webdesign, Webmaster 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.
-
5 Responses to “Tutorial na prosty szablon biznesowy”
Leave a Reply
Komentarze
Kategorie
Top 10
bal intermobil: Jak stworzyć stronę za pomocą xhtml oraz css
alan27pbll: Query_posts, czyli jak ujarzmić loopa część 1.
alan27pbll: Query_posts, czyli jak ujarzmić loopa część 1.
Michał: Inspirujące strony www: wrzesień 2010
czi: Gravatar, czyli jak mieć globalnego avatara
learn italian online: Query_posts, czyli jak ujarzmić loopa część 1.
hotelpalermo: Jak poprawnie osadzić Flasha w kodzie (X)HTML strony?
Michał: jQuery Cycle
Windscreen: Inspirujące strony www: wrzesień 2010
EMAAR MGF GURGAON: Query_posts, czyli jak ujarzmić loopa część 1.
- CMSy Artykuły dotyczące różnego rodzaju systemów zarządzania treścią CMS.
- Flash Podstawowe informacje pomocne przy tworzeniu animacji w Adobe Flash.
- Fotografia Samouczki dotyczące nie tylko robienia zdjęć ale też ich cyfrowej obróbki.
- Grafika Ogólnie pojęta grafika komputerowa, od inspiracji, po tworzenie layoutów oraz mniejszych form graficznych.
- Inne tutoriale wordpressowe Wszystkie inne zagadnienia dotyczące WordPressa.
- Inspiracje Inspirujące materiały graficzne z dziedziny projektowania stron www, projektów DTP, digital painting, itp.
- Obróbka zdjęć Techniki retuszu fotografii cyfrowych.
- Rysunek Tworzenie rysowanych ilustracji w Adobe Photoshop.
- Skóry do Wordpressa Darmowe oraz płatne – najlepsze skóry do WordPressa.
- Skrypty client-side
- Skrypty server-side
- Tutoriale
- Webdesign Tutoriale z zakresu projektowania stron www i grafiki użytkowej na rzecz internetu.
- Wieczór z Open Source
- Wordpress Ulubieniec naszej publiczności CMS WordPress: nowości, tricki, wtyczki, skóry i wszystko to co może przydać się przy korzystaniu z tego systemu.
- Wtyczki do Wordpressa Recenzje oraz instrukcje najbardziej popularnych i najbardziej niezbędnych pluginów do WordPressa.
- XHTML/CSS Ciekawostki z dziedziny kodowania stron www: XHTML, CSS, jQuery.
Najnowsze newsy
Wieczór z Open Source 2010
Jak co roku WSINF organizuje konferencję Wieczór z Open Source.
Chciałbym zaprosić was na tegoroczna konferencję Wieczór z Open Source 2010! Czytaj dalej
Grafart.org i WACOM zapraszają na konkursy!
Witam!
Myślę, że czas najwyższy nadmienić, że za niedługi czas zostanie zorganizowany pierwszy z trzech konkursów, w których główną nagrodą będą tablety firmy WACOM!
Za miejsca drugie oraz trzecie nagrodami będą kubki i koszulki firmy WACOM oraz magazyny graficzne PSD PHOTOSHOP oraz COMPUTERARTS.
Czytaj dalej
Zapraszamy na forum graficzne Graffika.pl
Każda osoba interesująca się grafiką komputerową ma czasami ochotę porozmawiać o swoich pracach, posłuchać rad, krytyki i pochwał innych osób. Idealnym miejscem na realizowanie takich potrzeb jest forum graficzne Graffika.pl.
Czytaj dalej
Polecane strony
- No bookmarks avaliable.




























Super, bardzo fajnie opisane
mogłabyś mi udostępnić .psd tego lay’a w celu nauki?
masakra….
strona jak tysiące innych firmowych gniotów…
Brak słów na tego typu, wysokiej jakości, komentarze…
Uważam takie wypowiedzi za czystą złośliwość, którą można by było oznaczyć jako spam.
@Up.
Ale takich szablonów jednak trochę jest… Szczególnie na templatemonster
Strona jak wiele innych. Co nie zmienia faktu, że nie każda strona musi być wybajerzona. Strona ma mówić o firmie. Często chodząc po necie trafiam na super hiper duper strony. I co? Trafiają do zakładek i tak samo jak reszta są zapominane. Jeżeli dana firma jest konkretna, to strona wcale nie musi być super next-genowa, ale wystarczy by była przystępna i prosta. Ogólnie – powyższy przykład jest ok i nie ma się co czepiać bo to tylko przykład.
A nie – jest się czego czepić. To użyte zdjęcie kobitki jest zbyt popularne