Forum Mjukvara Programmering och digitalt skapande Tråd

Designtips till skoluppgift (webbutveckling)

1
Skriv svar
Permalänk
Medlem
●

Designtips till skoluppgift (webbutveckling)

Hej!

Går 2an i gymnasiet och har fått en uppgift som lyder såhär:

Designövning

Du ska designa startsidan samt en valfri undersida för en av nedanstående kunder.

Resultatet ska vara två bilder i Photoshop där du har tänkt igenom färger, bilder och former.

Förutom din bild ska du också skriva en kort text som förklarar hur du har tänkt när du skapat din sida. Förklara layout, färger, bilder etc. Texten behöver inte vara längre än en halv A4.

Skapa bilden med olika lager för att lättare kunna arbeta med layouten och för att någon lättare ska kunna plocka ut delar av bilden för att omvandla till en riktig hemsida.

Företag: Insane Travels
En resebyrå som specialiserar sig på äventyrsresor. Forsränning, Safari, Isbjörnsexpedition, Valsafari, Grottdykning etc.
Sidan ska väcka äventyrslust.
Man anordnar även fallskärmshoppning, bungyjump och Ballongflygning.
På sidan ska man kunna söka och bläddra bland resor.
Nu är det sistaminuten pris på Forsränning som startar om en vecka.
Man ska kunna boka resor från sidan.
Man vill ha med en FAQ (vanliga frågor) om resorna på sidan.
Man är stolt över sina färdledare som har stor erfarenhet.
Man visar gärna upp berättelser och videosnuttar som tidigare deltagare delat med sig av.
Det ska gå att läsa tips inför resan om vaccination, packning, pass m.m.
Man håller även kurser i dykning och klättring.
Det går att köpa presentkort för resor eller kurser.

Dold text

Fanns en del andra "företag" att välja på, men fastnade för Insane Travels. Har börjat lite smått, och ser ut såhär just nu:

Högerklick, "öppna bild i ny flik" för större bild

Har fastnat lite, vet inte riktigt hur jag ska gå vidare på ett bra sätt. Tänkte att jag kunde ha med lite lite inbäddade youtubefilmer, länkar till sistaminutenresan och kanske någon liten story på första sidan. Frågan är då hur jag får in allt detta på ett bra sätt? Har ni några ideér och allmänna tips? Uppgiften måste fortfarande vara gjord av mig, så ni får inte ge allt för konkreta tips

Tack på förhand!

Visa signatur

Intel Core i7 7700K | Asus Strix 1080TI | MSI Z270 Gaming Pro Carbon | Corsair Vengeance 16GB 3000Mhz | EVGA G2 650W | WD 640GB Caviar Black | Samsung M.2 1TB SSD + Samsung SATA 500GB SSD

Redigera
Citera flera Citera
Permalänk
Inaktiv
●
Skrivet av Fyren:

Hej!

Går 2an i gymnasiet och har fått en uppgift som lyder såhär:

Designövning

Du ska designa startsidan samt en valfri undersida för en av nedanstående kunder.

Resultatet ska vara två bilder i Photoshop där du har tänkt igenom färger, bilder och former.

Förutom din bild ska du också skriva en kort text som förklarar hur du har tänkt när du skapat din sida. Förklara layout, färger, bilder etc. Texten behöver inte vara längre än en halv A4.

Skapa bilden med olika lager för att lättare kunna arbeta med layouten och för att någon lättare ska kunna plocka ut delar av bilden för att omvandla till en riktig hemsida.

Företag: Insane Travels
En resebyrå som specialiserar sig på äventyrsresor. Forsränning, Safari, Isbjörnsexpedition, Valsafari, Grottdykning etc.
Sidan ska väcka äventyrslust.
Man anordnar även fallskärmshoppning, bungyjump och Ballongflygning.
På sidan ska man kunna söka och bläddra bland resor.
Nu är det sistaminuten pris på Forsränning som startar om en vecka.
Man ska kunna boka resor från sidan.
Man vill ha med en FAQ (vanliga frågor) om resorna på sidan.
Man är stolt över sina färdledare som har stor erfarenhet.
Man visar gärna upp berättelser och videosnuttar som tidigare deltagare delat med sig av.
Det ska gå att läsa tips inför resan om vaccination, packning, pass m.m.
Man håller även kurser i dykning och klättring.
Det går att köpa presentkort för resor eller kurser.

Dold text

Fanns en del andra "företag" att välja på, men fastnade för Insane Travels. Har börjat lite smått, och ser ut såhär just nu:
http://i46.tinypic.com/abtvlu.png

Högerklick, "öppna bild i ny flik" för större bild

Har fastnat lite, vet inte riktigt hur jag ska gå vidare på ett bra sätt. Tänkte att jag kunde ha med lite lite inbäddade youtubefilmer, länkar till sistaminutenresan och kanske någon liten story på första sidan. Frågan är då hur jag får in allt detta på ett bra sätt? Har ni några ideér och allmänna tips? Uppgiften måste fortfarande vara gjord av mig, så ni får inte ge allt för konkreta tips

Tack på förhand!

Gå till inlägget

Din layout känns lite 2007, idag är det vanligare med s.k. responsiv design alltså mycket på bredden när du surfar med datorn/Ipad och en skild design för små skärmar. Det kan bli lite trångt i din lilla ruta.

För att fylla ut med innehåll hade jag satt någon form av slideshow (med Previous/forward knappar för bilderna) ganska stort till vänster "i lådan", för att visa aktuella erbjudanden etc. Hur skulle det vara med ett taggmoln eller liknande till höger, som en smalare sidebar? Där man kan klicka på typ isbjörnssafari för att få upp allt som handlar om det? Och fylla ut resten med foton/"lådor" och prisuppgifter...

Det kom upp en resesida på webcreme.com nyligen du kanske kan inspireras av; http://combadi.com/

Jag skulle också gärna se en sökfunktion någonstans tydligt placerat. Lycka till

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av anon181280:

Din layout känns lite 2007, idag är det vanligare med s.k. responsiv design alltså mycket på bredden när du surfar med datorn/Ipad och en skild design för små skärmar. Det kan bli lite trångt i din lilla ruta.

För att fylla ut med innehåll hade jag satt någon form av slideshow (med Previous/forward knappar för bilderna) ganska stort till vänster "i lådan", för att visa aktuella erbjudanden etc. Hur skulle det vara med ett taggmoln eller liknande till höger, som en smalare sidebar? Där man kan klicka på typ isbjörnssafari för att få upp allt som handlar om det? Och fylla ut resten med foton/"lådor" och prisuppgifter...

Det kom upp en resesida på webcreme.com nyligen du kanske kan inspireras av; http://combadi.com/

Jag skulle också gärna se en sökfunktion någonstans tydligt placerat. Lycka till

Gå till inlägget

Tack så mycket, mycket bra svar! Ledsen att jag inte svarat tidigare, fick mycket annat i skolan att tänka på

Har gjort om sida från början i princip, och här är resultatet:

Förstasidan:

Tanken är att när man för muspekaren över någon av de små bilderna där nere, så dyker lite information upp (såsom på Färdledare). Klickar man kommer man vidare och kan läsa ännu mer.

En undersida:

När man för muspekaren över en av resorna så blir det som på skidåkningen, lite allmän information och klicka för mer.

Dold text

Uppskattar kritik på denna version också!

Visa signatur

Intel Core i7 7700K | Asus Strix 1080TI | MSI Z270 Gaming Pro Carbon | Corsair Vengeance 16GB 3000Mhz | EVGA G2 650W | WD 640GB Caviar Black | Samsung M.2 1TB SSD + Samsung SATA 500GB SSD

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Fyren:

Tack så mycket, mycket bra svar! Ledsen att jag inte svarat tidigare, fick mycket annat i skolan att tänka på

Har gjort om sida från början i princip, och här är resultatet:

Förstasidan:
http://s15.postimage.org/60kvu7otn/hem_f_rsta.png

Tanken är att när man för muspekaren över någon av de små bilderna där nere, så dyker lite information upp (såsom på Färdledare). Klickar man kommer man vidare och kan läsa ännu mer.

En undersida:
http://s15.postimage.org/a7abnadt7/adventures.png

När man för muspekaren över en av resorna så blir det som på skidåkningen, lite allmän information och klicka för mer.

Dold text

Uppskattar kritik på denna version också!

Gå till inlägget

Snyggt!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Fyren:

Tack så mycket, mycket bra svar! Ledsen att jag inte svarat tidigare, fick mycket annat i skolan att tänka på

Har gjort om sida från början i princip, och här är resultatet:

Förstasidan:
http://s15.postimage.org/60kvu7otn/hem_f_rsta.png

Tanken är att när man för muspekaren över någon av de små bilderna där nere, så dyker lite information upp (såsom på Färdledare). Klickar man kommer man vidare och kan läsa ännu mer.

En undersida:
http://s15.postimage.org/a7abnadt7/adventures.png

När man för muspekaren över en av resorna så blir det som på skidåkningen, lite allmän information och klicka för mer.

Dold text

Uppskattar kritik på denna version också!

Gå till inlägget

Okej start.

Protip: Gå in på http://www.awwwards.com/ och kolla in hemsidorna där, ta inspiration, studera hur det gör, försök göra som de.

Några saker:
1. Dra ner på storleken på texterna och menyn.
2. Använd max 1-3px skugga/glow/etc, gärna med 50% opacity. Blir fult med så extremt stora skuggor som du gör.
3. Centrera inte menyn och loggan
4. Gör slideshowen lika bred som boxen under
5. Lägg sök knappen i linje med boxen under, inte allra längt till höger.

Blev lite snabbt skrivet, men men,

Visa signatur

Programmerare -> PHP | HTML | CSS | JS | Java.

> Sweclockers Marknads Referenser <

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Försök att arbeta med raka linjer. Alltså få samma bredd och höjd på element som ligger i linje.

Till exempel på din bild ovan, längst ned har du de tre rutorna. Försök att få dem lika stora så får du ett mer "städat" uttryck. Du kan också prova göra texten marginal justerad på den första rutan för att forstätta i det raka och inrutade temat!

Visa signatur

~. Citera så jag hittar tillbaka .~

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Ladda ner 960gs och använd som mall i photoshop.

Din första version kan bli väldigt bra med lite modifiering, betydligt bättre än din andra.

Redigera
Citera flera Citera
Permalänk
Inaktiv
●

Här kommer lite kritik, då det är lätt:
Tycker att bannern i toppen skiljer sig lite väl mycket från resten av designen. Det ser mer vilt, insane ut i toppen, därefter skulle det kunna vara events med smoking och martini.

Jag kan tycka att det är lite väl många typsnitt.

Gemensamt för alla andra sidor med samma målgrupp verkar vara att det är lätt att söka resor från förstasidan

Väldigt stora bokstäver i navbaren

Ha gärna en footer med någon bra information i.

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara