Pliki graficzne do stron www

 
Depositphotos

W dzisiejszych czasach coraz to więcej osób chciałoby posiadać swoją własną stronę internetową, czy to do opisywania swoich własnych pasji, czy też po prostu z potrzeby uzyskania dochodu.

Dobra strona internetowa to obecnie klucz do sukcesu, ale żeby stworzyć stronę, musimy posiadać odpowiednią grafikę. Wydaje się to stosunkowo proste, ponieważ w Internecie możemy znaleźć mnóstwo różnego rodzaju grafik, które w żaden sposób nie są zabezpieczone przed pobieraniem. Oczywiście pobierając takie grafiki łamiemy prawo, ponieważ są one czyjąś własnością i nie mamy prawa wykorzystywać ich do własnych celów.

Banki zdjęć

Skąd w takim razie wziąć grafikę do tworzenia i rozwoju naszej strony internetowej? Przede wszystkim różnego rodzaju tła stockowe, czy inne elementy graficzne, które okażą się przydatne już w momencie przygotowania szablonu naszej strony, znajdziemy w odpowiednich bankach zdjęć.

Krótko o Depositphotos

Depositphotos

Jednym z takich banków, w którym znajdziemy różnorodne pliki jest Depositphotos. Jest to stosunkowo nowy, ale szybko rozwijający się bank zdjęć stockowych, w którego bazie możemy znaleźć ponad 7 i pół miliona plików. Jeśli tworzymy strony internetowe na co dzień i mamy większe zapotrzebowanie na zdjęcia stockowe, czy też obrazy wektorowe możemy wykupić sobie odpowiedni abonament, dzięki któremu pobieranie zdjęć w większych ilościach okaże się dla nas tańsze.

Abonament

Poza tym w większości banków zdjęć, tak jak i w Depositphotos możemy skorzystać z darmowego abonamentu na próbę. W przypadku Depositphotos możemy uzyskać coś takiego na 7 dni, podczas których mamy możliwość pobierać 5 plików dziennie (naturalnie z całej bazy serwisu). Może to być ciekawa opcja, jeśli potrzebujemy zdjęć jednorazowo.

Wyszukiwanie

Powstaje jeszcze pytanie jak dobrać odpowiednie zdjęcia stockowe, czy inne pliki graficzne z tak ogromnej bazy? Przede wszystkim możemy skorzystać z wyszukiwarki znajdującej się w naszym banku zdjęć. W takim wypadku przeważnie dopasowujemy pliki graficzne do tematyki naszej witryny, więc jeśli jest to strona firmowa do wyszukiwarki wpisujemy zdjęcia stockowe biznesowe, a jeśli tematyką naszej strony jest coś związanego z nauką przykładowo obrazy stockowe edukacji.

Jeśli chodzi o płatne banki zdjęć wybór jest naprawdę szeroki, tak że mamy w czym wybierać i dzięki odpowiednim plikom graficznym nasza strona będzie z pewnością bardzo atrakcyjna.

Wpis sponsorowany.

 
 

Ślepota bannerowa (banner blindness)

 
Banner blindness - rozmieszczenie i kolorystyka

Ślepota bannerowa (banner blindness) to termin opisujący wyuczone zachowanie internautów do unikania wzrokiem reklam, w szczególności tych w formie bannerów. Innymi słowy, zysk z umieszczenia na stronie bannera może być odwrotnie proporcjonalny do tego, jak bardzo przypomina typową reklamę.

To gdzie te reklamy?

Jak w takim razie umieszczać reklamy na stronie? Po pierwsze unikaj typowych formatów bannerów i typowych pozycji dla reklam na stronie. Po drugie warto wykorzystać paletę kolorów dopełniających layout strony zamiast użycia kolorów kontrastujących. Po trzecie animacja – jeżeli to możliwe, zrezygnuj z niej.

Zauważyłeś na swoich stronach skutki banner blindness? Udało Ci się je zminimalizować? Podziel się swoim doświadczeniem w komentarzu.

 
 

Przyciśnij CSS-a przyciskiem

 

Jak zrobić w prosty sposób własne przyciski na stronę? CSS w czystej postaci. Wystarczą nam cztery reguły CSS i dwa pliki graficzne:

Przycisk w cssPrzyciski css - obraz buttona

Dłuższy plik ma maksymalną szerokość przyszłego przycisku. Dlaczego obrazy są zduplikowane? Dla efektu naciśnięcia – powyżej jest wersja wklęsła, poniżej – wypukła.

Kod HTML przycisków

<a href="http://kissdesign.pl" class="button"><span>Kliknij na mnie :)</span></a>

Kod CSS przycisku

a.button{
	background: url(btn0.png) right -31px no-repeat;
	padding: 0 21px 0 0;
	height: 31px;
	display: block;
	float: left;
	text-decoration: none;
	line-height: 31px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bolder;
	outline: none;
} 
a.button:active{
	background-position: right 0;
} 
a.button span{
	background: url(btn1.png) 0 -31px no-repeat;
	padding-left: 21px;
	height: 31px;
	display: block;
	font-size: 12px;
	color: #fff;
} 
a.button:active span{
	background-position: 0 0;
}

Ściągnij gotowca

Pobierz gotowe reguły przycisków CSS wraz z grafikami.

Podoba Ci się ten wpis? Interesuje Cię tematyka związana z zastosowaniem CSS? Podziel się wrażeniami w komentarzu!

 
 

Kompozycja strony w czterech słodkich punktach

 

Prostokąt o proporcjach 1.6 x 1.0 - nasze "płótno"

Dwu- czy trzykolumnowy layout? Menu górne czy boczne? Stopka? Tak, Poproszę. Voila! Mamy gotową stronę.

Ten blog nie zostałby nazwany KISSdesign, gdyby traktował o stronach wyciętych z szablonu. Sieć to prawdopodobnie najbardziej konkurencyjne środowisko z jakim mamy do czynienia. Użytkownik naszej strony ma w zasięgu jednego kliknięcia miliony innych. Co zrobić by zatrzymać go choć na chwilę dłużej? Z pewnością treść.

A design? Może tylko pomóc. Weźmy na warsztat kompozycję strony. Choć w sieci, nasze płótno nie ma ściśle określonych wymiarów (różne rozdzielczości monitorów, proporcje ekranu itp.), warto  samemu zadbać o jego odpowiedni rozmiar. Z różnych przyczyn kultura przyniosła nam magiczne proporcje, które wydają się nam piękne. Weźmy na przykład kartki formatu A4. Albo format flag państwowych (powyżej).

Co prawda wysokość strony jest zwykle większa niż jej szerokość, ale zasada pozostaje ta sama. Resztę możemy odseparować wizualnie – linią poziomą, odstępem, odrębną kolorystyką itd.

Na rysunku powyżej, zaznaczyłem tzw. sweet spots, czyli punkty, w których krzyżują się linie pomocnicze. Wyznaczają one centrum zainteresowania czytelnika. Zobacz jak można je wykorzystać!

Symetryczna kompozycja strony internetowej

Symetryczna kompozycja strony internetowej

Wieje nudą? Strona jest pozbawiona dynamizmu. Uwaga czytelnika koncentruje się wyłącznie wokół grafiki. Słodkie punkty są zmarnowane. Pora na drugi przykład.

Dynamiczny layout strony internetowej

Dynamiczny layout strony internetowej

Każdy element strony zawiera sweet spot. Poza tym wykorzystanie pustego miejsca (white space) jest bardziej efektywne. Separuje treść od reszty. Zwróć uwagę, że ta kompozycja strony przypomina drukowane publikacje. Margines górny i lewy kierują skupienie czytelnika do centrum. Ostatecznie jego uwaga koncentruje się na tekście, leżącym w prawym, dolnym rogu. Dokładnie w ten sam sposób wędruje nasz wzrok, gdy czytamy książkę.

Słyszałeś o sweet spotach? Korzystasz z nich, czy ufasz swojemu wyczuciu? Napisz o tym w komentarzu!

 
 
następne wpisy »