Webbrelaterat - Design och resurser f�r webbdesigners

25 unika och smarta logos

Anton — Sun, 29 Aug 2010 11:07:46 +0000

Logos �r n�got som �r v�ldigt viktigt f�r ett f�retag, d� loggan ska representera just ditt f�retag �r det bra att ha en kreativ och unik logga.
Jag har samlat ihop 25 logos som mer �n v�l lever upp till den standarden.

Veckans Freebies

Anton — Sun, 22 Aug 2010 11:22:20 +0000

Veckans freebies �r en samling av alla freebies som har publicerats p� n�tet. Fr�n m�ndag fram till s�ndag. Sammanlagt �r det 7 gratis saker som du kan ladda ner.

Veckans Freebies

M�ndag erbj�d:
Ladda ner h�r: Amplifier Musik spelare.

Tisdag erbj�d:
Ladda ner h�r: Milan WordPress tema.

Onsdag erbj�d:
Ladda ner h�r:Texturer.

Torsdag erbj�d:
Ladda ner h�r: Gratis Photoshop Brushes Hi-Res.

Fredag erbj�d:
Ladda ner h�r: Gratis iPhone ikoner.

L�rdag erbj�d:
Ladda ner h�r: Fotografi Ikoner.

S�ndag erbjuder:
Ladda ner h�r: Isometrica Social Media.

Varje dag publiceras det en gratis freebie p� Ranestam Studio Blogg, sedan skrivs ett sammanfattande inl�gg med alla freebies som publicerats under veckan.

Veckans Freebies

Anton — Sun, 08 Aug 2010 14:46:19 +0000

Veckans freebies �r en samling av alla freebies som har publicerats p� n�tet. Fr�n m�ndag fram till s�ndag. Sammanlagt �r det 7 gratis saker som du kan ladda ner.

Veckans Freebies

M�ndag erbj�d:
Ladda ner h�r: Orizon – Portfolio template.

Tisdag erbj�d:
Ladda ner h�r: 20+ Ipad design resurser.

Onsdag erbj�d:
Ladda ner h�r:25 vektor kartor.

Torsdag erbj�d:
Ladda ner h�r: Professionell PSD Hemsida template.

Fredag erbj�d:
Ladda ner h�r: 27 handritade fonter.

L�rdag erbj�d:
Ladda ner h�r: 10 Free Web UI kit.

S�ndag erbjuder:
Ladda ner h�r: Mnml ikon set.

Varje dag publiceras det en gratis freebie p� Ranestam Studio Blogg, sedan skrivs ett sammanfattande inl�gg med alla freebies som publicerats under veckan.

Den ultimata posten f�r ikoner – mer �n 2000 ikoner

Anton — Tue, 03 Aug 2010 13:28:01 +0000

Veckans freebies!

Anton — Sun, 01 Aug 2010 12:48:23 +0000

Veckans freebies �r en samling av alla freebies som har publicerats p� n�tet. Fr�n m�ndag (tisdag i detta fall) fram till s�ndag. Sammanlagt �r det 7 (6 i detta fall) gratis saker som du kan ladda ner.

Veckans Freebies

Tisdag erbj�d:
Ladda ner h�r: 10 gratis e-b�cker.

Onsdag erbj�d:
Ladda ner h�r: The Columnist

Torsdag erbj�d:
Ladda ner h�r: Grunge texturer.

Fredag erbj�d:
Ladda ner h�r: Subscribe formul�r.

L�rdag erbj�d:
Ladda ner h�r: 20 eleganta fonter.

S�ndag erbjuder:
Ladda ner h�r: FreelanceSwitch visitkort template.

Varje dag publiceras det en gratis freebie p� Ranestam Studio Blogg, sedan skrivs ett sammanfattande inl�gg med alla freebies som publicerats under veckan.

Kultur�verskridande webbdesign

Johan — Mon, 19 Jul 2010 09:36:00 +0000

Tack vare det demokratiserande inflytandet fr�n Internet h�ller v�rlden p� att bli mindre. Detta betyder d�remot inte att v�rlden h�ller p� att bli en mer homogen plats � tv�rtemot. Ju fler m�nniskor som surfar p� n�tet, desto mer blir webben en smakrik soppa med flerspr�kiga webbsidor. I sj�lva verket �r andelen engelska modersm�lstalare mindre �n en tredjedel av alla webbsurfare, och denna andel kommer att krympa ytterligare med tiden.

Detta inneb�r att n�r man bygger webbplatser m�ste man som designer nu ta med mer i ber�kningarna �n att bara f�lja r�dande trender inom design och s�kmotoroptimering � man m�ste ocks� ta med i ber�kningarna den breda skaran m�nniskor som kommer att bes�ka webbplatsen.

Design f�r olika kulturer

Studier har visat p� att kulturer faktiskt p�verkar hur olika m�nniskor tar in och bearbetar information, och detta har en fullf�ljande effekt f�r hur webbplatser b�r designas f�r att tilltala publik med olika kulturella bakgrunder. Ta till exempel en titt p� skillnaderna mellan McDonalds webbplats f�r Storbritannien och f�r Indien.

Den indiska webbplatsen anv�nder mycket fler flashanimationer och bilder ist�llet f�r text f�r l�nkar samt ser �verlag mer �interaktiv� ut. Den brittiska webbplatsen �r f�rgglad men mer statisk eftersom detta i en v�sterl�nnings �gon ser mer �professionellt� ut. Det �r uppenbart att McDonalds har gjort en grundlig marknadsunders�kning och uppt�ckt att detta �r vad deras indiska respektive brittiska m�lgrupper h�ller utkik efter p� en webbplats.

Detta pekar ocks� p� en allm�n designregel som b�r anv�ndas n�r man designar webbplatser f�r en kultur antingen med h�g kontext eller l�g kontext, till exempel Kina och Indien j�mf�rt med USA eller Skandinavien. Kulturer med �l�g kontext� f�redrar information presenterad p� ett minimalistiskt och r�ttframt s�tt, medan kulturer med �h�g kontext� f�redrar information som presenteras med mer f�rger, bilder, interaktivitet och p� ett f�rklarande s�tt.

F�rg

F�rg �r ett annat element inom design som man b�r �gna extra uppm�rksamhet n�r man riktar sig till olika kulturer, eftersom f�rgers kulturella konnotationer kan variera mycket, n�got som detta diagram visar. Till exempel associerar de flesta v�sterl�ndska kulturer f�rgen r�d med fara, passion och lust, medan man i Indien associerar den med renhet och i Kina med festligheter och god tur. P� liknande s�tt anses orange ofta vara en kreativ f�rg i v�st, men i Egypten symboliserar den sorg. Om du vill ha en trygg medelv�g har f�rgen bl� visat sig vara den mest universellt acceptabla f�rgen.

CSS och Unicode

Bortom estetiken inom design och f�rgscheman finns det dock n�gra konkreta saker som varje designer kan g�ra f�r att bygga en webbplats som kan f�rdas smidigt genom olika kulturer. F�rst och fr�mst �r det viktigt att anv�nda r�tt verktyg, till exempel genom att anv�nda CSS som formateringsverktyg blir det l�ttare att �ndra bilder och textspr�k mellan olika sidor, eftersom man med CSS s�rskiljer design och inneh�ll och p� s� s�tt slipper man g�ra om designen fr�n grunden om man vill �ndra spr�k p� en sida.

P� samma s�tt �r Unicode UTF-8 en gudas�nd g�va f�r webbdesign p� m�nga olika spr�k eftersom teckenkodaren f�r varje tecken innefattar skrift p� �ver 90 spr�k. Om du designar en webbplats p� ett spr�k som inte innefattas av Unicode UTF-8 b�r du kanske ta ett steg tillbaka och fr�ga dig sj�lv om det faktiskt finns n�gon onlinepublik f�r detta spr�k.

Navigation

N�r det r�r grundl�ggande navigation p� en sida kan det vara en god id� att ta med i ber�kningarna vad som h�nder om man byter fr�n ett v�nster-till-h�ger-spr�k som t.ex. engelska till ett h�ger-till-v�nster-spr�k som t.ex. arabiska eller hebreiska.

Att h�lla navigationen horisontell ist�llet f�r vertikal g�r att det blir mycket enklare att byta riktning och h�lla sin design symetrisk s� att man slipper flytta bilder och textrutor fr�n en sida till en annan. D�rtill ser horisontell navigation innovativ och kreativ ut, n�got som bestyrks av att m�nga designf�retag anv�nder detta p� sina webbplatser, som t.ex. Section Seven. Alternativt kan man passa in allt p� en sida och h�lla sin navigation enkel, som t.ex. p� denna smakrika webbplats som designf�retaget Hive Creative i Melbourne.

Om f�rfattaren: Ioana Mihailas, Lingo24

Snabba och passiva inkomster som en webbdesigner

Anton — Thu, 08 Jul 2010 18:02:00 +0000

Alla designers letar alltid efter lite extra inkomster, vare sig det �r via affiliate p� din hemsida, eller stock grafik.
Dessa 6 s�tt nedan kommer garanterat genera lite extra pengar till just dig.

1. Att installera en blogg

Alla vill blogga i dagens l�ge, vare sig det �r webbdesigners, unga tjejer eller politiker.
Bloggar �r ett perfekt medium f�r dig att n� ut till just din publik. M�nga som vill blogga s�tter oftast upp sin blogg p� Blogger eller s�tter upp ett gratis konto p� WordPress. Detta �r just din chans att tj�na lite extra pengar.

M�nga av dem s�tter upp sin blogg p� Blogger eller WordPress vet inte hur man installerar WordPress p� deras server � oftast har de ett gratis tema som de vill anv�nda till sin blogg ocks�.
Att d� erbjuda sig att installera WordPress, klistra in ev bilder och �vers�tta temat till r�tt spr�k �r b�de enkelt och g�r hyfsat snabbt.
Ett perfekt tillf�lle att tj�na lite pengar.

2. Att g�ra reklam i form av flash, gifs och banners

M�nga f�retag letar alltid nya kunder, d�rf�r l�gger de pengar p� reklam. B�de i det offentliga rummet och p� n�tet. Att d�rf�r erbjuda en billig l�sning g�llande reklam f�r dessa f�retag �r ett utm�rkt tillf�lle att tj�na lite extra pengar.

3. Att erbjuda webbhotell

Det finns m�ngder med webbhotell som erbjuder s� kallade: �Virtuella servers�, vilket betyder att du inte beh�ver ha en stor server hemma utan att det �r n�gon annan som har det. Dock �r det fortfarande du som st�r f�r sj�lva Webbhotellet.

Detta �r en mycket bra inkomst k�lla � eftersom m�nga webbdesigners inte erbjuder detta s� m�ste din kund hitta ett webbhotell p� egen hand. N�r kunden vill ha n�got nytt till sitt f�retag s� �r det l�tt h�nt att kunden g�r till n�gon annan. Om du erbjuder webbhotellet och design arbetet s� �r chansen �verh�gnade att kunden kommer tillbaka och att du f�r en m�natligt avgift av kunden f�r webbhotellet.

4. Att bygga till Templates

M�nga underskattar att bygga templates till diverse marknadsplatser.
Det finns otaliga marknadsplatser som �r specialiserade � vare sig du bygger i wordpress, joomla, magento eller kodar i php eller ruby. Det finns alltid en plats d�r du kan s�lja det det du har byggt.
M�nga som f�r h�ra detta t�nker: �Men jag s�ljer ju det jag har byggt till ett underpris, och det vill jag ju inte�.
Detta �r oerh�rt fel.

P� sidan Themeforest finns det folk som tj�nar in en m�nadsl�n p� att inte g�ra n�got alls.
En sida s�ljs f�r 25$ st, l�t oss s�ga att 1200 personer k�per din template.

25$ x 1200=30 000 $
30 000$ – 40% (den procent sats som sj�lva sidan tar f�r att du f�r s�lja p� deras marknadsplats) =
18 000$ = 144 083 SEK, som du har tj�nat p� att bara bygga en snygg hemsida!

5. S�kmotoroptimering

M�nga webbdesigner brukar l�gga till detta n�r de jobbar. Dock kan du tj�na lite extra pengar om du inte erbjuder detta fr�n grunden, utan att kunden m�ste best�lla detta som ett extra till�gg.

6. Arbeta med en annan webbdesigner

M�nga webbdesigner har mycket att g�ra. Att erbjuda sig som en hj�lpande hand �r aldrig en dum id�, och det brukar genera lite extra pengar.

Slutord

Hoppas du har f�tt lite nya ide�r om hur du ska tj�na lite extra pengar. Begr�nsa dig inte till dessa 6 s�tt, det finns hur m�nga som helst. Det g�ller bara att hitta dem.

4 Praktiska tutorials med hur du bygger hemsidor i HTML5 och CSS3

Anton — Wed, 30 Jun 2010 23:16:12 +0000

Anton h�r!
Johan har v�ldigt mycket att g�ra med sitt nya jobb, d�rf�r erbj�d jag mig att uppdatera lite tills Johan kommer tillbaka och skriva sin suver�na blogginl�gg.

Nu n�r HTML5 och CSS3 b�rjar bli allt vanligare kan det vara bra att �va sig genom lite praktiska tutorials, d�rf�r har jag samlat ihop 4st tutorials som �r oerh�rt bra dig som vill l�ra dig mer om HTML5 och CSS3.

One page portfolio hemsida

Hur man bygger en one-page portfolio hemsida. Mycket anv�ndbart f�r dig som letar efter inspiration till din nya portfolio hemsida – finns mycket att l�ra h�r.

Iphone App hemsida

Hur man bygger en Iphone App hemsida, mycket anv�ndbar tutorial. Anv�nder en glow effekt, som �r riktigt cool!

HTML5 Portfolio med jquery

En till HTML5 och CSS3 tutorial som ber�r one page hemsidor. Anv�nder sig av m�nga nya tekniker som tillkommit med CSS3.

Bygg en elegant hemsida i HTML5 och CSS3

Min favorit tutorial, den �r oerh�rt bra. Det ges lite fakta, och tutorialen �r v�ldigt enkel att f�lja.

Hoppas dessa tutorials var l�rorika, l�mna g�rna en kommentar om vad du tyckte, eller vad du vill se mer av f�r inl�gg.

20 nya sp�nnande CSS/jQuery plugins, tricks och skript

Johan — Thu, 22 Apr 2010 20:58:07 +0000

T�nkte egentligen inte posta fler inl�gg innan mitt design byte som kommer snart men det drog lite p� tiden s� har kommer ett under tiden.

Okej, alla �r inte super nya men vissa l�nkar �r verkligen v�rt att n�mna och �r plugins/tricks som man anv�nda i m�nga vardagliga projekt. Dom senaste tv� �ren har det dykt upp massor av h�rliga Javaskript, jQuery plugins och avancerade CSS tekniker som utg�r coola eller interaktiva effekter. Det �r verkligen inte fel att spara en massor av tekniker i din toolbox f�r att underl�tta och minimera din tids�tg�ng f�r dina projekt. Kan �ven tipsa om att m�nga sidor som n�mns nedanf�r har fler tips/plugins s� st�ng inte ner sidan direkt utan g�r g�rna en scan innan.

CSS3 support for Internet Explorer 6, 7, and 8

M�nga CSS tekniker som runda h�rn, box skugga funkar ju inte sj�lvklart i Internet Explorer 6, 7, and 8 men med detta fix s� l�ser du det. Du vill ju inte g�ra din kund besviken?

Ladda ner Bes�k tutorial

Pure CSS Vignette

En cool bildgalleri som �r gjort med avancerad CSS. Kul att l�ra sig nya tricks.

Demo Bes�k tutorial

Sponsor Flip Wall With jQuery & CSS

M�nga av er har s�kert sett annonsplatser i sidobaren p� m�nga sidor. Varf�r inte g�ra den mer intressant och sp�nnande med denna plugin.

Demo Bes�k tutorial

CSS3-Spotlight

Detta kanske �r sv�rt att anv�nda i vanligt projekt men det �r en cool teknik som absolut �r v�rt att titta p�.

Demo Bes�k tutorial

Facebook-style navigation menu with jQuery

Vill du ha en dropdown meny som facebook har? D� �r detta l�sningen f�r dig. Snygg liten funktion som k�nns lite mer sp�nnande �n en vanlig tr�kig variant av dropdown menyer.

Demo Bes�k tutorial

Mega Drop Down Menus w/ CSS & jQuery

Denna j�tte dropdown menyn �r bara ett m�ste i din toolbox.

Demo Bes�k tutorial

CSS3 Glow Tabs with Box Shadow

Visar hur du kan g�ra kombinera olika snygga effekter med CSS3.

Demo Bes�k tutorial

Create a Button with Hover and Active States using CSS Sprites

Med CSS3 kan man g�ra s� snygga knappar utan att designa upp dom och l�gga in dom som bilder. Se hur du kan g�ra h�r.

Bes�k original tutorial

Feature List

En effektiv bildkarusell som �r bra f�r f�retag som vill beskriva lite om produkten.

Bes�k k�lla Demo

Contactable A jQuery Plugin

Det �r inte n�dv�ndigt att anv�nda formul�ren som beskrivs i denna plugin. du kanske bara vill ha “slide” effekten med annat inneh�ll i.

Bes�k k�lla Demo

Switch Display Options

En sk�n display switch som kan vara anv�ndbar n�r man har mycket inneh�ll i en lista och g�ra den mindre och beh�ndigare.

Bes�k k�lla Demo

Micro Image Gallery

Har �r samma effekt som ovan men med andra egenskaper. Se vilken som passar ditt projekt.

Bes�k k�lla Demo

Fly-To-Basket Effect With jQuery

Bygger du en webbshop kan denna effekt vara bra. Kunderna ser att dom har lagt sin produkt i varukorgen.

Bes�k k�lla Demo

Digital Clock (HTC Hero inspired)

Denna effekt kan vara bra f�r bloggar, resesajter, v�der sajter osv. Snygg dessutom.

Bes�k k�lla

Fixed Fade Out Menu: A CSS and jQuery Tutorial

Denna meny sitter fixerad i toppen och n�r du b�rjar skrolla s� tonar menyn ner sig och f�ljer med n�r man skrollar.

Bes�k tutorial Demo

Ketchup Plugin

Anv�ndbarhet �r nummer 1 f�r mig i webbdesign. Varna dina bes�kare n�r dom g�r fel eller har missat n�t med denna plugin.

Bes�k tutorial

TipTip jQuery Plugin

Det finns massor av Tooltip skript men denna �r lite extra snygg och l�tt att anv�nda.

Bes�k tutorial

Understanding CSS3 Gradients

Toningar funkar inte s� j�ttebra i alla webbl�sare i dagens l�ge men l�r dig innan det blir standard f�r denna effekt kommer med all s�kerhet bli riktigt popul�r.

Bes�k tutorial

Quicksand

Detta �r ocks� en form av anv�ndbar effekt. Ist�llet f�r att g�r olika sidor f�r uppgiften s� l�t det h�r skriptet g�ra det �t dig.

Bes�k tutorial Demo

How to: CSS Large Background

Har du n�gon g�ng velat haft en bild som bakgrund men sv�rt och f� den att passa med h�ga och mindre h�ga uppl�sningar.

Bes�k tutorial

25 kreativa och utstickande Curriculum Vitae (CV)

Johan — Tue, 16 Mar 2010 23:07:16 +0000

Detta funkar till alla som beh�ver skriva ett snyggt CV. Och det hj�lper att sticka ut fr�n m�ngden bland alla hundra ans�kan. Men som designer kan det vara bra att st� ut lite extra och visa att du �r en designer n�r du s�ker jobb. G�r den inte i Word eller annat skrivprogram. Skicka den digitalt som pdf. Det ser b�st ut.

Kort med det du b�r ta med i CV’en skulle jag rekommendera att du skriver med namn och hur gammal du �r, anv�nd dina personkontakter som mejl, telefonnummer och l�nk till portf�lj – som extra kan du ge med ditt Twitter, LinkedIn och Facebook konto. Skriv en liten och kort introduktion om vem du �r och vad du gillar. S�lla ut och lista dina b�sta arbeten, det �r ingen bra id� att ta med halvf�rdiga projekt eller liknande. Lista dina dator, design och programmeringskunskaper, utbildning och dina arbetslivserfarenheter, b�rja med senaste jobbet f�rst.

Webbrelaterat - Design och resurser f�r webbdesigners

25 unika och smarta logos

Veckans Freebies

Veckans Freebies

Veckans Freebies

Veckans Freebies

Den ultimata posten f�r ikoner – mer �n 2000 ikoner

Bright

Finance and Applications

On-Stage

Primo

Hand Drawn icon sets

12 CMS icons

Token icon set

Pictoico icons

Web icon set

200 Web buttons

Project icons

Icon Set for Developers

Copenhagen

Letter Pressed Icons

High quality

Social Media icons

Veckans freebies!

Veckans Freebies

Kultur�verskridande webbdesign

Design f�r olika kulturer

F�rg

CSS och Unicode

Navigation

Snabba och passiva inkomster som en webbdesigner

1. Att installera en blogg

2. Att g�ra reklam i form av flash, gifs och banners

3. Att erbjuda webbhotell

4. Att bygga till Templates

5. S�kmotoroptimering

6. Arbeta med en annan webbdesigner

Slutord

4 Praktiska tutorials med hur du bygger hemsidor i HTML5 och CSS3

20 nya sp�nnande CSS/jQuery plugins, tricks och skript

25 kreativa och utstickande Curriculum Vitae (CV)