Drupal Design

de, eller bruge forskellige farver afhængigt af afsnittet. Standardisere dem så meget som muligt. Themers sætter pris på at kunne bande små, gentagelig elementer på en Sprite og genbruge dem, når det er nødvendigt. Hvis et element vises på en række forskellige baggrunde, så sørg for elementet er på et separat lag, så den kan bruges på en sprite med gennemsigtighed. Tjek Jack indlæg sprites for mere information om, hvorfor de er nyttige for faldende hjemmeside indlæsningstid.
MÅ IKKE bruge Photoshop tricks, der ikke vil arbejde på nettet. Bare fordi Adobe kan gøre det, betyder det ikke, du kan gøre det på nettet. For eksempel kan dynamisk farve overlejringer med særlige filtre (formere, farve brænde, etc.) ikke gengives korrekt på nettet - man kan kun finde anvendelse opacitet med en gennemsigtig PNG eller - i visse browsere - med en procent i CSS .
Der er nogle ting, du kan gøre i Photoshop, der er helt sikkert muligt med CSS, men det kan tage en masse tid til at gennemføre korrekt. Hvis du bruger en fancy menu med baggrundsbilleder og svæve stater, overveje, hvad der kunne skabe problemer, når menuen er skåret i skiver.
For eksempel, i eksemplet nedenfor længden af ​​menupunktet navne er ikke fleksible (det er muligt. - Men det ville kræve nogle specielle teknikker med flere baggrundsbilleder og ekstra divs) Også den Hover staten er problematisk på grund af overlap på top og bund på de tilstødende knappen. Samme princip: det kan altid lade sig gøre, men det vil tage nogen tid.

DO overveje at bruge et gitter. Af hensyn til fuld offentliggørelse, jeg har ikke altid bruge et gitter til at designe. Nogle gange er det ikke nødvendigt på en lille site. Men ved hjælp af et standard gitter ses i sammenhæng pænt med principperne i Drupal: genbrugelighed, fleksibilitet og standardisering. Valg af et gitter og stikning med det kan hjælpe med at gøre dit websted visuelt tiltrækkende for brugerne og give en ensartethed i layout, der kan spare tid. Det betyder, at skabelonen kan sættes op hurtigt, og vil ikke være nødvendigt at fussed med senere - ikke behov for masser af variationer.

Grid eksempel fra kapitel tre er Fireworks Drupal designskabelon
Hvis du har et gitter som det nederste lag af din PSD, AI-eller PNG-fil, kan du skifte den til og fra efter behov og derefter give det videre til dit tema udvikler, der kan bruge dimensionerne til at bygge ud af temaet, måske ved hjælp af et gitter basen tema, ligesom Zen nineSixty eller Blueprint.
MÅ IKKE glemmer at konfigurere dine farveindstillinger ordentligt i Photoshop eller Illustrator. Nogle gange når du gemmer ud skiver til nettet, vil der være en lille - eller dramatisk - farveskift, hvis dine indstillinger ikke er korrekte. Photoshop og Illustrator er "farvestyrede" software, hvilket betyder at du kan indstille anvende forskellige indstilling til forskellige formål: til print, til fotos, til internettet, osv. Der er nogle få skoler til at tænke på, at farverne ikke skifte når du gemmer til web, men ellers, mit foretrukne valg er simpelthen at bygge comps med ikke-farve lykkedes software: Fyrværkeri.
DO fortrolig med Drupal former. Ud af boksen, kommer Drupal med flere former, en designer kan være fristet til at redesigne: log-in form, node tilføje formularer, kontakt formular, kommentarer formularer, etc. Selv om det kan lade sig gøre, til tider altoverskyggende hvordan en Drupal form er strukturerede kan være trættende og tidskrævende. For tiden følsomme projekter, begrænse designmæssige ændringer til Drupal formularer til CSS alene. Overvej at holde sproget, rækkefølgen af ​​felterne, og markup behov. Selvfølgelig kan det være svært at forudse, men sætte dig ind i, hvordan man former er struktureret kan hjælpe.
Desuden kan nogle former elementer notorisk svært at manipulere. Ofte er det billede upload feltet og dropdown vælger kræver bruger javascript til stil. Mens der er nogle gode muligheder derude (som Uniform), vælger at forlade dem som-er vil spare tid og penge. Se min blog indlæg om 10 tips til Theming Drupal 6 Forms.
Ignorer ikke elementer, som altid har brug for theming i Drupal. Nogle gange er det nemt at designe for, hvad du har brug for, men ignorere, hvad Drupal automatisk giver dig. Her er en dejlig checkliste, der blev udarbejdet af kapitel tre elementer, der er til stede i 90% af Drupal sites:
• Sidehoved
• Sidefod
• H1 - H5
• Krop
• Link
• Unummereret liste
• Blokcitat
• Kode
• Admin Tabs (sekundær faner)
• Collapsable Field Indstiller
• Bloker Headers
• Bloker Typografi
• Mere knap
• knappen Send eller generelle knap stil
• Input Field
• Tags
• sideinddeling
• Grundlæggende Node Style
• Tabel Style
• Fejlmeddelelse
• Status Besked
• Advarsel Besked
• Hjælp Besked
• Standard Profile Layout
• Blog titel og Byline
• Breadcrumbs
• Fejlmeddelelse
• Status Besked
• Advarsel Besked
• Hjælp Besked
• Sekundær faner
Denne liste er fra en utrolig nyttig blog-indlæg for at bruge deres tilpassede Drupal skabeloner til at begynde designprocessen. Dette kan hjælpe dig med at huske alle out-of-the-box elementer. Det er værd at downloade skabeloner og gennemgå dem, før dine motiver er mejslet i sten.
DO tænke på, hvordan indhold vises som standard i Drupal. Der er visse ting, der er sværere at gøre med indhold end andre. For eksempel er én ting, der kan være svært at opdele en node indhold i forskellige regioner - som at sætte forfatterens navn i indholdsoversigten, f.eks. Selvfølgelig kan det gøres - men det kræver noget arbejde.
MÅ IKKE bruge stilarter, der varierer vildt side til side. Dette er en lignende idé til nogle andre punkter ovenfor. Men det kan hjælpe (hvis dit projekt er på et budget) til at huske på, at Drupal er bygget med en række skabeloner, og jo mere kontinuitet du bygger ind til sideelementer, jo hurtigere kan det være tema. For eksempel, hvis du opretter en flok indholdsoversigten blokke, der alle ser helt unikke hver især kunne man tage en time eller mere at style. Men hvis de alle har fælles stilarter, vil udviklingen tid drastisk reduceres.
Et dejligt Drupal værktøj til at tillade indholdsskabere vælge fra et sæt udvalg af stilarter for blokke, noder og andet indhold områder er Skinr modul. Check ud hvad det gør og tænke over, hvordan det kunne bruges sammen med dit design.
MÅ se på jQuery. Selv hvis du er på et budget, der er nogle temmelig tricks, der nemt kan føjes til en Drupal websted. For eksempel er en Visninger lysbilledshow eller jCarousel anmodet om mange hjemmeside forsiderne - og det er ikke særlig svært at implementere og stil (usually!) Accordions, faner og skydere er andre ting, der kan tilføje noget særligt uden alt for meget tid og penge brugt. Tjek jQuery UI eller jQuery plugin side for flere ideer.

Ikke afskedige Adobe Fireworks! Jeg har antydet dette i andre tips, men ofte overset Fyrværkeri er det bedste værktøj jeg har fundet for at skabe web-design comps. Fyrværkeri skaber vektor baseret, flersidede dokumenter perfekt til opbevaring og overlappe elementer og skabeloner. Ikke alene kan du få et dokument, der indeholder alle dine comps, men et panel for "hedder det" på hver side (i stedet for den frygtede skjulte lag) er meget nyttigt, som det er bibliotek for genbruges elementer og symboler. (Du kan gemme et element som et symbol, og når du redigerer symbol, vil det ændre, uanset hvor det bruges, ligesom i Flash.) Det er klart, kan du vælge et andet program for at gøre et logo eller anden grafik til webstedet, eller forbereder fotos. Mastersider (meget elskede i udskriftslayout programmer som InDesign) er også en enorm tidsbesparelse.