Posts tagged layout
Cum sa-ti faci saitul sa iasa in evidenta
Jan 27th
Dupa cum bine stim, majoritatea designerilor doresc ca proiectele lor sa iasa in evidenta. Datorita milioanelor de saituri aflate pe web, precum si a celor adaugate in fiecare zi, posibilitatea de a creat ceva unic este din ce in ce mai mica. Fiecare designer are o abordare diferita. In lista de mai jos vei gasi 6 lucruri pe care trebuie sa le contina saitul, pentru a iesi in evidenta:
- Poze mari ca background
O modalitate sigura pentru ati scoate saitul in evidenta este de a folosi imagini mari ca background. Imaginea poate fi de dimensiunea layoutului, pentru a-l face mai atragator vizual. Cu ajutorul CSS-ului, imaginile de background sunt usor de adaugat si pot schimba radical aspectul unui sait obisnuit.
http://www.webdesignerwall.com/
- Layouturi unice
Majoritatea saiturilor folosesc un layout obisnuit. Gandind in perspectiva si creand ceva unic, cu siguranta vei iesi in evidenta. Layoutul unui sait reprezinta un factor important pentru eficienta si utilitatea lui, dar ai grija ca orice invetie a ta, sa fie utila pentru tine si pentru vizitatorii tai.
http://vandelaydesign.com/blog/design/unique-website-layouts/
- Navigatie creativa
Bara de navigatie joaca un rol important in aspectul si utilitatea unui sait. Din punctul de vedere al asptectului, bara de navigatie ii ofera designerului o mare oportunitate de a fi creativ si de a introduce multiple elemente,precum „rollovers” in design. Totusi aspectul nu trebuie niciodata sa afecteaza utilitatea saitului.
http://www.benhulse.com/index.php
- Minimalismul
Folosing o grafica minimalista iesi in evidenta tocmai prin faptul ca nu incerci sa epatezi. Un design minimalist da o nota de echilibru si atractivitate, fara sa abuzeze de elemente de design.
- Logourile si marcile de calitate
Aspectul unui sait poate fi imbunatatit sau defavorizat de calitatea si eficienta logoului. Un logo eficient poate produce ameliorari semnificative la aspectul site-ului, facandu-l sa iasa in evidenta.
http://www.logodesignlove.com/15-wonderfully-simple-logo-designs
- Layout orizontal
Daca cu adevarat vrei sa iesi in evidenta, o modalitate sigura pentru a atinge acest obiectiv este de a folosi un layout orizontal. Evident, vizitatorii sunt obisnuiti sa deruleze paginile, asa ca layout-urile orizontale sunt realizate pe principiul „fie iti plac, fie iti displac”.
5 tendinte de design-ului in anul 2010
Jan 20th
Cum este si normal, anul 2010 vine cu noi tendinte in ceea ce priveste designul web. Tendintele ne ajuta sa evoluam ca designeri, sa imbinam esteticul cu utilitatea, impingand mereu standardele catre un nou nivel.
In continuare voi prezenta o lista a tendintelor de web design din 2010:
- Logouri si antete(header) supradimensionate:
In 2010, designerii isi vor impresiona vizitatorii prin logouri si antete(header) supradimensionate. Acest tip de antent poate ocupa intreg ecranul. Vizitatorii nu vor trebui sa dea click pe nimic, doar sa deruleze pagina. Studiile arata ca vizitatorii au tendinta de a iesi de pe un sait pe care trebuie sa efectueze multe clickuri, de aceea solutia antetului supradimensionat pare a fi solutia optima pentru aceasta problema.
- Schite/ Desene de mana in design
Designul „facut de mana” nu este tocmai noutate, dar stim cu totii ca este inca apreciat si considerat ca o inovatie in webdesign. Multi designeri apreciaza stilul, dar le este frica sa-si creeze propriile schite, datorita atitudinii „nu stiu sa desenez”. Daca ne uitam cu atentie la cele mai populare sait-uri de acest fel, vom observa ca majoritatea tovarasilor nostri designeri nu pot desena. Aceste designuri nu trebuie sa fie opere pentru muzeu, ele ajuta oamenii sa interactioneze mult mai bine cu paginile web.
Ele iasa in evidenta prin abaterea de la stilul conventional si dau saitului un aspect unic si personalizat.
http://www.biola.edu/undergrad/
- Caracterele rotunjite si boldate
Caracterele rotunjite si boldate sunt relativ noi in web design, desi au fost prezente de aproape 200 de ani, in media traditionala.Ca sa obtii o imagine mentala a modului in care arata aceste caractere, aminteste-ti posterele din Vestul Salbatic. Acele fonturi mari si ingrosate sunt caracterele despre care vorbim aici. Multi designeri au renuntat sa foloseasca aceste tipuri de fonturi datorita faptului ca, in trecut, logourile si antetele erau foarte mici si subapreciate.
http://www.edgepointchurch.com/
- Layout-urile de o pagina
Layout-urile de o pagina te provoaca sa te axezi pe esential. Ganditi-va la aceste sait-uri ca la niste carti de vizita. Acestea vor fi un fel de centre de informatii, care iti vor spune unde sa gasesti sait-urile de care ai nevoie, blogurile si retele sociale.
- Imagini uriase
In mod asemanator cu logo-urile si antetele, imaginile uriase au acelasi rol. Ele creeaza un impact vizual pe care vizitatorul nu il va uita curand. Spre deosebire de antetele de mai sus, imaginile uriase nu fac parte din brand-ul saitului. Aceste imagini atrag atentia vizitatorului catre saitul tau, daca nu pentru continut, macar pentru dimensiunea impresionanta. In 2010, designerii web vor folosi acest tip de imagini pentru a se impune.
Ideea principala: Imaginile vor fi utilizate pentru a invita vizitatorii.
5 motive pentru care trebuie utilizate div-urile in Web Design
Jun 20th
Desi acest lucru e gresit, tabelele sunt inca folosite pentru a creea layout-ul in cazul unor site-uri cu structura simpla si un numar foarte mic de pagini.Motivul ? Aparent sunt usor de folosit. Scopul lor ramane de a afisa informatiile care sunt in format tabular dar si de ordonare mai usoara in pagina a componentelor unui formular.
In schimb, un div este ca un “box” plutitor care poate fi amplasat oriunde. Acest lucru inseamna ca puteti schimba aspectul paginilor dvs. doar modificand CSS-ul.
Web Design-ul specifica clar separarea continutului de prezentare – cu alte cuvinte separarea textulului propriu-zis al site-ul de design, fiind astfel mai usor de modificat orice detaliu de design-ul.
Tabelele au multe probleme, in primul rand este mult mai dificil de a obtine layout-ul dorit folosind un tabel, dar cel mai important, tabelul face mult mai dificil gasirea informatiilor relevante de catre motoarele de cautare. Folosirea DIV-urilor in creerea site-ului permite buna preluare a content-ului de catre Google si de alte crawlerele deoarece site-ul este “semantic” relevant.
HTML varianta cu tabele
<table> <tr> <td>Web Design</td> <td>Aplicatii Custom</td> <td>Website eCommerce (magazin online)</td> <td>Optimizare motoare de cautare (optimizare SEO)</td> </tr> </table>
HTML varianta cu DIV-uri
<div class='thumb'>Web Design</div> <div class='thumb'>Aplicatii Custom</div> <div class='thumb'>Website eCommerce (magazin online)</div> <div class='thumb'>Optimizare motoare de cautare (optimizare SEO)</div> <br class='clear'>
CSS varianta cu DIV-uri
.thumb
{
float: left;
width: 90px;
border: 1px solid #000;
margin: 0 5px 5px 0;
padding: 10px 5px;
}
.clear
{
clear:both;
}
1. Layout & Content
1.Daca utilizati tabele pentru layout atunci prezentarea va fi amestecata cu continutul, astfel utilizarea latimii de banda este mai mare decat este necesar.
2. Redesign
2.Redesign-ul este mult mai greu de realizat. Folosind DIV-uri, toate modificarile se fac din CSS, procesul de redesign fiind mai putin costisitor.
3. Accesibilitate
3.Tabele nu ajuta persoanele cu dezabilitati. Desi aparent informatiile sunt afisate corect pe ecran, in ordinea corecta, modul in care un software gen “Windows Narrator” il va citi poate fi total diferit. Multe tari au acum legi, care prevad faptul ca site-urile trebuie sa fie accesibile tuturor.
4. Diversitate
4.De asemenea, persoane care viziteaza site-ul dvs. folosind PDA-uri, telefoane mobile, si care nu dispun de spatiu pe ecran pentru afisarea intregului tabel, nu vor obtine o afisare corecta a layout-ului.Site-ul realizat cu ajutorul DIV-urilor va arata bine chiar si la scara mai mica sau mai mare.
5. SEO
5.Tabele pot afecta rating-ul paginii: spre exemplu pentru un site realizat cu ajutorul unui tabel avand meniul in stanga, in momentul preluarii continutului de catre un motor de cautare, acesta va prelua mai intai informatiile incepand de sus jos si de la stanga la dreapta, considerand importante informatiile ce sunt mai aproape de inceputul paginii, continutul fiind in mare ignorat in ceea ce priveste importanta.
Toate site-urile realizate de LigaWeb au structuri realizate cu ajutorul DIV-urilor, fiind compatibile cu majoritatea browsere-lor, cat si un design placut fiindca incercam ca fiecare site sa fie unic.
