Web Design Critique # 66 Matthew Coughlin

Varje vecka tittar vi på en ny webbplats och analyserar designen. Vi pekar på båda områdena som görs bra förutom de som kan använda lite arbete. Slutligen avslutar vi genom att be dig att ge din egen feedback.

Dagens webbplats är portföljen av fotograf Matthew Coughlin.

Om du vill skicka din webbplats till en framtida designkritik tar det bara några minuter. Vi tar ut $ 49 för att kritisera din design - betydligt mindre än du skulle betala för en konsult för att kolla på din webbplats! Du kan läsa mer här.

Om Matthew Coughlin

Matthew Coughlin är en kreativ porträttfotograf från Pensacola, Florida. Hans arbete gör tung och ganska underbar användning av studiobelysning i naturliga miljöer. Resultatet är en mycket distinkt stil som vanligtvis har ett imponerande dynamiskt intervall och ett mycket dramatiskt utseende. Jag gillar särskilt hans förmåga att verkligen fånga personligheten i hans ämne. Varje foto berättar en mycket definierad historia på ett mycket engagerande sätt.

Här är en skärmdump av hemsidan:

Titta Ma, ingen blixt

Vi höll nyligen en liten giveaway för en kritik som krävde deltagare att helt enkelt skjuta oss till en tweet med deras webbplatsadress. Efter att ha tittat genom deltagarna blev jag omedelbart dragit till Matteus webbplats personligen både som fotograf och som webbutvecklare.

Det första som jag tyckte var verkligen uppfriskande var bristen på Flash. Jag vill inte göra detta till en Flash-bashing session men jag tror verkligen att det finns ett kritiskt över-beroende av Flash i fotografibranschen. Nästan varje fotograf webbplats du kan hitta är byggd nästan helt på Flash.

För att vara rättvis finns det både för och nackdelar med denna tendens. På uppsidan tenderar fotografens webbplatser att vara otroligt dynamiska och interaktiva, vilket kan vara ett mycket intressant sätt att visa bilder. Detta är ett element som definitivt saknas från Matthews webbplats eftersom det är en ganska statisk sida. Det finns en del interaktivitet, som vi ses senare, men för det mesta är det bara ett vanligt CSS-bildgalleri.

På den negativa sidan har Flash mycket bagage. Det är processorns intensiv, kan definitivt påpekas som orsaken till ett stort antal webbläsaren kraschar, men viktigast är det inte särskilt mobilvänligt. iOS blockerar helt enkelt Flash helt, men även de mobila plattformar som stöder det är ganska viktiga av enorma 100% Flash fotograf webbplatser.

Allt som sägs, jag älskar att se den enstaka fotografen som bestämmer sig för att klara sig mot vad som definitivt är industristandarden och använda en mer allmänt kompatibel webbplatsinriktning.

responsiv layout

En annan sak som jag uppskattade omedelbart om den här sidan är att layouten är ganska mottaglig. Så vi ser att den här webbplatsen inte bara är mobilvänlig i den meningen att den inte använder Flash men också väger mycket bra till mindre skärmstorlekar. Granted, designen är enkel nog att detta inte var en stor prestation men det är definitivt inte en dålig sak!

Den responsiva / felxible layouten uppnås helt enkelt, med bara en enda mediefråga och massor av procentuella värden. Ingenting förändras verkligen när layouten ändras, sidan reflekterar bara. Jag tror att lite hänsyn till vätskebilder skulle kunna göra mobilvisningen snyggare.

Inte alla Responsive

En sak som förvirrar mig lite är att den lyhörda designen stannar väsentligt på hemsidan. Blogglayouten, som är ett mycket liknande rutnät till det på hemsidan, passar perfekt för samma teknik och ändå är det definitivt inte lika solid.

Intressant nog ser bloggsidan faktiskt ut bättre på min iPhone än vad den gör på skrivbordet, vilket tyder på att designern tar en mobil-första strategi. Men som du kan se i bilden ovan är layouten ganska besvärlig på ett skrivbord, eftersom det finns en stor mängd tomt utrymme på höger sida.

Interaktion

Hoppa tillbaka till hemsidan, låt oss ta en titt på vad som händer när du klickar på en bild. Här ser du att du får den här snygga, stora jQuery-reglaget som visar bilderna i en mer fokuserad inställning.

Jag gillar det här mycket och jag tror att webbplatsen definitivt behöver det, men jag har några förslag på att göra det bättre. Till att börja med är framåt / bakåt kontrollerna lite borta, och det är kanske ett dåligt sätt att uttrycka det för att jag gillar dem var de är, men jag tror att det skulle vara mycket mer användbart om, utöver vad som redan finns i plats, klicka på den stora bilden avancerade bildspelet. Denna funktion är intuitiv, jag förväntar mig att få en ny bild när jag klickar på huvudbildområdet, men det gör jag inte.

Dessutom tycker jag att det kan vara trevligt att kasta i lite? Spela? knappen som automatiskt cyklar genom bilderna. Du kan helt enkelt inte komma runt om att folk brukar se på bildspel på fotograferingssidor, det är ett bra sätt att ta in en grupp bilder och kräver inget arbete från användarens sida. Jag tror att kasta i denna funktionalitet här medan du bor i riken av JavaScript / jQuery kommer att öka intrycket av den övergripande upplevelsen.

Slutsats

Sammanfattningsvis gillar jag den grundläggande, fotocentriska utformningen av webbplatsen. Jag älskar att webbplatsen inte är Flash-baserad eftersom så många fotoportföljer är och jag uppskattar det extra arbete som har gjorts för att göra hemsidan lite responsiv.

Som jag nämnde skulle jag definitivt ompröva layouten på bloggsidan och lägga till lite funktionalitet till reglaget på hemsidan. Som ett sista förslag kan det vara trevligt att ha en bild eller bildspel på hemsidan. Nätet är perfekt attraktivt men kan uppfattas som lite tråkigt och enhetligt. Att bryta upp designen lite med en bild som är större än resten kommer att lägga till variation och minska redundansen i layouten.

Din tur!

Nu när du har läst mina kommentarer lägger du in och hjälper till med att ge designern ytterligare råd. Låt oss veta vad du tycker är bra om designen och vad du tycker kan vara starkare. Som alltid ber vi att du också respekterar webbplatsens designer och erbjuder tydliga konstruktiva råd, utan att det blir några svåra förolämpningar.