O doborze kolorów

 
Kuler Adobe'a

Kuler Adobe'a - wybór kolorów

Dostajemy do rąk gotową specyfikację. Tworzymy układ strony głównej, podstron. Gotowe. Rzucamy się do Photoshopa. Chwila zastanowienia nad wyborem narzędzia. Teraz kolor. Damn! Jaki kolor?

Warto wtedy wspomóc się odpowiednim narzędziem, które podpowie nam jakie kolory mamy dobrać by nasza strona wyglądała przejrzyście, a przy tym niesztampowo. Ile w końcu można patrzeć na mdły błękit morski, w którym rzeźbi się co drugą stronę? Paleta kolorów jest znacznie szersza.

Po pierwsze kuler Adobe’a. Kuler pozwala na tworzenie i wybór 5-kolorowych zestawów, gotowych do użycia na stronie. Możemy wybierać spośród zestawów zapisanych przez innych użytkowników, ale najciekawsze jest oczywiście tworzenie własnych kompozycji.

W tym celu mamy do dyspozycji szereg predefiniowanych ustawień, które po wybraniu jednego koloru nadrzędnego, dobiorą nam automatycznie pozostałe cztery. Te można dalej modyfikować, szukając złotego środka. I to wszystko wystarcza w zupełności by otrzymać paletę kolorów do naszego projektu.

A jak to nam nie wystarczy, można nawet wczytać plik graficzny, na podstawie którego kuler sam dobierze odpowiednie pięć barw.

 
 

Totalnie rozwijane menu w jQuery

 
Rozwiajane menu jQuery by Artur Polkowski

Rozwiajane menu jQuery. Kliknij, aby zobaczyć je w akcji lub pobrać.

Źle ułożone menu rozwijane może błyskawicznie zniechęcić użytkownika do aplikacji. Czuje się wtedy jak poszukiwacz złota z lichym wykrywaczem metali, co rusz natykający się na złom i niewypały. Co w takim razie zrobić by menu było user-friendly?

Po pierwsze uporządkować kategorie według klucza czynność – obiekt, co intuicyjnie stawia użytkownika jako osobę wydającą rozkazy. Osobę, która ma władzę nad aplikacją, a nie odwrotnie. Po drugie należy ukrywać opcje w danej chwili niepotrzebne, wprowadzające zamęt. W ten sposób naturalnym wydaje się być zastosowanie typowego rozwijanego menu:

Rozwijane menu w przeglądarce Firefox

Z reguły przy pierwszym zetknięciu z nowym menu nie wiemy jak zdefiniować ścieżkę przejść między kolejnymi krokami. Szukamy, przesuwając kursor ponad kolejnymi pozycjami. A co gdyby oddać całą strukturę menu w ręce użytkownika od razu? I pamiętać przy tym  o zasadzie chowania opcji nieadekwatnych do wybranej drogi poszukiwań.

Tak powstało menu będące kompromisem między tradycyjnym statycznym i rozwijanym. Czy to dobry pomysł? Należałoby sprawdzić, wykorzystując testy użyteczności. Na razie pozostawiam ocenę Wam. Oto i wynik mojej pracy: totalnie rozwijane menu z użyciem jQuery.

Testowany pod Firefoxem, Chrome.

 
 

Zaokrąglone rogi – jak to zrobić?

 

Web 2.0 przyniosło portale społecznościowe, a tłumy dostały narzędzia by wyrazić siebie w Internecie. Z mojego punktu widzenia web 2.0 przyniosło te cholerne zaokrąglone rogi ;-) Oto jeden ze sposobów jak się z nimi uporać.

Tworzymy w Photoshopie piękną ramkę, korzystając z wektorowego prostokąta i opcji mieszania (obrys, ewentualnie cień). Gotowy obraz musimy pociąć, tak żeby otrzymać osiem maleńkich obrazów – 4 rogi ramki i 4 przekroje boków.

Ramka z zaokrąglonymi rogami wykonana w Photoshopie

Gdy mamy gotowy zbiór, pozostaje nam skorzystać z kodu:

HTML


<div id="frame">
		<div class="top-left">
			<div class="top-right">
				<div class="bottom-left">
					<div class="bottom-right">
						<div class="top">&nbsp;</div>
						<div class="left">
							<div class="right">
								<div class="inner" style="font-size: 130%;">
								Zawartosc jaka tylko zechcesz.<br /><br />Automatycznie dopasowuje się do zawartości.
								</div>
							</div>
						</div>
						<div class="bottom">&nbsp;</div>
					</div>
				</div>
			</div>
		</div>
	</div>

CSS:


/* lewy gorny rog */
div#frame div.top-left{
	background: url(images/img/top_left.png) top left no-repeat;
}

/* prawy gorny rog */
div#frame div.top-right{
	background: url(images/img/top_right.png) top right no-repeat;
}

/* lewy dolny rog */
div#frame div.bottom-left{
	background: url(images/img/bottom_left.png) bottom left no-repeat;
}

/* prawy dolny rog */
div#frame div.bottom-right{
	background: url(images/img/bottom_right.png) bottom right no-repeat;
}

div#frame div.top{
	height: 7px; /* wysokosc gornej krawedzi */
	margin-right: 14px; /* szerokosc prawej krawedzi */
	margin-left: 8px; /* szerokosc lewej krawedzi */
	background: url(images/img/top.png) top left repeat-x;
}

div#frame div.left{
	padding-left: 8px; /* szerokosc lewej krawedzi */
	background: url(images/img/left.png) top left repeat-y;
}

div#frame div.right{
	padding-right: 14px; /* szerokosc prawej krawedzi */
	background: url(images/img/right.png) top right repeat-y;
}

div#frame div.inner{
	background: #F4FF98;
	padding: 1em;
}

div#frame div.bottom{
	height: 15px; /* wysokosc dolnej krawedzi */
	margin-right: 14px; /* szerokosc prawej krawedzi */
	margin-left: 8px; /* szerokosc lewej krawedzi */
	background: url(images/img/bottom.png) bottom left repeat-x;
}

Oto i wynik:

Zawartosc jaka tylko zechcesz.

Dostosowuje swoją wysokość do zawartości.

Szerokość ograniczona elementem #frame

 
 

Efektowna przezroczystość

 

Ciekawy efekt można uzyskać umieszczając na stronie dużą, dobrej jakości fotografię z pasem przezroczystości w okolicach 50%. Mając pod obrazem jednolite tło, obraz PNG wymiesza się z nim, dając stonowany, ale jednocześnie interesujący podkład dla podpisu.

Jako, że jeden obraz wystarcza za tysiąc słów… Sam zobacz!

Dzięki temu na obrazie możemy wykorzystać zwykły tekst. SEO zachowane, a design króluje.

Parę wskazówek – warto uzupełnić obraz o ramkę (css się kłania) w kolorze głównego tekstu. Można poeksperymentować z kontrastowymi napisami na obrazie (bliskimi czerni i bieli). Pasek półprzezroczysty najlepiej prezentuje się w odległości definiowanej przez złoty podział. Korzystaj z wiedzy starszych, a starożytnych już szczególnie ;]

 
 
« poprzednie wpisynastępne wpisy »