Please see the blog for recent work as I don’t have time to update this portfolio anymore.
This page shows some of the designs I made when myspace allowed more styling – before the 3.0 launch. For 3.0 layouts, please refer to the blog.
MySpace layout: The Mommyheads
The Mommyheads is a cult indie band from the US playing progressive, quirky, melodic, groovy pop. I made a design based on paper and scissors. I came up with the idea of making things visible by cutting through the paper, exposing what’s lying underneath it, and It was a fun challenge that resulted in a nice layout.
Some of the features:
- Paper cutting mouse hover effects.
- Detailed store area.
- Fully expandable layout. The headings in the holes etc is positioned automatically depending on the content
Tecniques: HTML, CSS.
Apps: Adobe Photoshop, Adobe Dreamweaver, Adobe Illustrator, Notepad.
>> Open The Mommyheads MySpace in a new window
MySpace layout: Stereo Generator
Heavy, pink & blue – I really like the way Stereo Generator’s MySpace turned out. I was given some nice artwork and ornaments from their new EP, 12 Gauges And Cocktails, and built the design around that just in time for their release party. While designing and coding I listened non stop to their song Berg & Dahlbana (Rollercoaster) on repeat, but now I’m starting to move on to the other songs as well. They just uploaded all of the new recordings so go on and have a listen, they’ve really nailed a sound that fits them perfectly.
Features:
- News section with the option of including pictures.
- All the text section editing and changing the video is easily managed by the band.
How it’s made? The original MySpace structure is kept, but the music player have been moved and the left side of the profile is hidden and covered by an absolute positioned black box which is containing the newsbox and the merch section. All the regular myspace headings such as “friends” and “comments” has been hidden and replaced with large pictures acting as headings. Hover effects on buttons are achieved by placing a picture over another and letting the one on top disappear when the mouse hovers, thus exposing the one in the background. Artwork like the top image, the music player ornaments, the dirt over the video etc are all absolute positioned divs with a high z-index and background images.
Tecniques: HTML, CSS.
Apps: Adobe Photoshop, Adobe Illustrator, Adobe Dreamweaver, Notepad.
>> Open Stereo Generator’s MySpace in a new window
MySpace layout: The Kendolls
The Kendolls is an explosive rock/punk-band fron Gothenburg! They needed a myspace to promote their new album.
Tecniques: HTML, CSS.
Apps: Adobe Photoshop, Adobe Dreamweaver, Adobe Illustrator, Notepad.
Open The Kendolls MySpace in a new window.
MySpacelayout: Alex Face
“Vi eftersträvar enkelhet och estetisk perfektion” stod det i det första mailet från rock/bluesbandet Alex Face och därmed var ribban satt. Under första mötet kom vi överens om vilket innehåll sidan skulle ha och vilka riktlinjer som gällde för layouten. Svartvitt var ett självklart val för alla.
När det sedan var dags att göra förslag på layout så tog bandet kommandot och gjorde ett gäng utkast som det röstades vilt om och när en vinnare hade utsetts var det min tur göra en färdig layout av förslaget. Den klara sidan är resultatet av ett fint samarbete.
Utbytbar topbild: Bandet hade svårt att bestämma sig för vilken bild de villa ha i toppen av sidan och därför föddes idén att ha en utbytbar topbild. Sagt och gjort. Bandet kan nu, när de vill, logga in på ett ftp-konto och byta bild. Bilden lägger sig automatiskt bakom logotypen, skivorna och menyn och smälter in i designen. Detta gör att de kan fräscha upp sidan när de vill med en ny bild eller t.ex. låta en banner eller liknande synas när något är på gång.
Trevliga detaljer:
- Muskänsliga knappar: menyn, köp-delen och fotona under musikspelaren.
- News-rutan där man kan läsa vad som är på gång utan att behöva klicka sig vidare.
Hur är sidan gjord? (nördfakta): MySpacestrukturen är kvar, men vänster kolumn och höger kolumn har fått byta plats, musikspelarens position har justerats, grundinnehållet har flyttats ned, överflödigt MySpaceinnehåll har gömts med CSS eller genom att placera en bild över de delar som inte ska synas (med ett högt z-index). Träskivan inklusive lite pappersbitar osv är bakgrund och resterande bildmaterial har lagts dit med absolut positionering och ligger i lager genom olika z-index. Hovereffekterna kan göras på följande sätt: man skapar ett div-utrymme och placerar där bilden som ska synas uppåt. Bakgrund i diven är hover-effekt-bilden. Sedan CSS-kod som gömmer uppåtbilden då muspekaren förs över den: “display:none” eller “visibility:hidden” t.ex. Kvar är då endast bakgrundsbilden i div-utrymmet. När man för bort muspekaren dyker bilden i div-utrymmet upp igen.
Tekniker: HTML, CSS.
Program: Adobe Photoshop, Textredigerare.
>> Öppna Alex Face MySpacesida i nytt fönster
MySpacelayout: Steget
Popbandet Steget släpper sitt debutalbum i vår och behövde en design som passar det visuella konceptet på den kommande skivan.
Efter att ha pratat igenom känslan de ville ha på sidan och vad som var viktigt att presentera så fick jag allt bildmaterial och artwork som hade använts för skivkonvolutet att arbeta med. Massor av snygga teckningar!
Slutresultatet blev en luftig och vacker sida med ett lugnt färgtema. En tillfällig banner lades till i sidans huvud för att informera om det kommande albumet.
Som vanligt uppdaterar bandet smidigt själva innehållet när något ska ändras.
Trevliga detaljer:
- Fågeln i nedre hörnet som följer med vid sidscrollning
- Pressrutan där man kan ladda hem presentation och högupplöst foto
Hur är sidan gjord? (nördfakta): En enda stor bild utgör sidans layout. Innehållet (text, videos, spelningar osv) är absolut positionerat med CSS. Tråkiga standarddelar som t.ex. MySpacemenyn i sidans topp och vissa rubriker är gömda med CSS – exempelvis genom att applicera “visibility: hidden” eller genom att positionera objektet i fråga väldigt långt bort: “position: absolute; top:-3000px”. Fågeln i sidans nedre vänstra hörn är fixerad i relation till webbläsarens fönster med CSS (“position:fixed; left: -1px; bottom: -1px;”).
Tekniker: HTML, CSS.
Program: Adobe Photoshop, Textredigerare.
>> Öppna Stegets MySpacesida i nytt fönster
MySpacelayout: Honey Mustard
Alternativrockbandet Honey Mustard behövde en ny MySpacesida i samband med släppet av deras nyinspelade EP.
Innehåller bland annat: sjukhustema, EKG-animation med dödsknapp, tecknade detaljer och smidig fotovisning.
Sidan är byggd för framtida ändringar och bandet kan när som helst lägga till text, bild, flyers eller annan information i den expanderbara layouten. Fotona som reagerar på muspekaren byter bandet ut när som helst via FTP.
Byggstenar: CSS styr layout, transparenta PNG-bilder i lager utgör grafik och en flash-animation ligger bakom EKG-diagrammet. Vätskebehållarna är tecknade, inscannade och bearbetade i Adobe Illustrator.
Tekniker: HTML, CSS, Flash.
Program: Adobe Photoshop, Adobe Illustrator, Adobe Flash.
>> Öppna MySpacesidan i nytt fönster
MySpacelayout: Tony Clifton
Indiebandet Tony Clifton ville ha en ren, tydlig och symmetrisk layout.
Efter några telefonsamtal kom vi fram till en, i MySpace-sammanhang, unik design där innehållet ryms i kvadrater med samma mått i rader om tre. Vanliga MySpace-delar som musikspelaren, kommande gig (shows) och bloggen (news) lyftes från sina ordinarie platser och placerades på sina nya positioner i boxarna. Musikspelaren förminskades för att passa till sin lådas mått. I videorutan ryms en YouTube-spellista där Tony Cliftons videos presenteras.
Byggstenar: layouten utgörs av en enda stor bild som innehållet har placerats in i.
Tekniker: HTML, CSS.
Program: Adobe Illustrator, Adobe Photoshop.
>> Öppna Tony Cliftons MySpace i nytt fönster
MySpacelayout: The Self-Destructives
The Self-Destructives är ett musikprojekt från Göteborg som gör fantastisk alternativ / experimentell / industri.
Grundidén från bandet var att ha en sparsmakad, svartvit och kladdig sida med musikspelaren i fokus och en booklet med bilder – så man kan lyssna på musiken samtidigt som man bläddrar i bookleten (som det var på den gamla goda tiden!). Det fanns också önskemål om att saker och ting skulle röra på sig.
I stort sätt allt vanligt MySpaceinnehåll utom musikspelaren togs bort med CSS-kod och layouten gjordes med olika penslar i Photoshop och Illustrator. Den interaktiva bildboken gjordes i Flash och låter lyssnaren byta bild på ett klick. Även andra rörliga element, som t.ex. droppande bläck och logotypanimationen är gjorda i Flash och inbäddade i sidan. Bandet kan själva lägga till och ta bort bilder från bookleten.
Tekniker: CSS, HTML, Flash.
Program: Adobe Photoshop, Adobe Flash, Adobe Illustrator.
>> Öppna The Self-Destructives MySpace i nytt fönster
Du är så grym!