Projekt: koda och formgiva en webbsida

Svenska

Det känns så spännande att visa er webbsidan jag kodade i förra kursen eftersom den innehöll så mycket oro för mig, att helt enkelt inte lyckas. Sen klarade jag det efter en hel del hårt slit trots allt.

Kursen hette Formgivning av webbsidor och innebar 1. att koda en responsiv (= anpassningsbar till olika skärmstorlekar) hemsida i HTML och CSS, JavaScripten var valfri. 2. Skriva en rapport med motiveringar till alla designval, bakgrund till fiktiv uppdragsgivare, målgrupp, persona, med mera. Webbsidan skulle främst vara anpassad för mobilanvändning men även fungera för större skärmar.

För er som inte är bekanta med denna typ av termer ska jag försöka förklara. HTML är språket man skriver webbsidor i; här finns allt innehåll, från rubriker till text och bilder. CSS är ett annat typ av språk som används tillsammans med HTML men är bara till för att designa webbsidan. Med CSS bestämmer du färg, typsnitt, vart saker ska placera sig, storlekar, och så vidare. JavaScripten är min stora fiende och handlar om interaktivitet; när du exempelvis glömmer fylla i en ruta i ett formulär och försöker gå vidare ändå men det poppar upp en felruta? Det är exempelvis JavaScript. Det har jag inte använt mig av här.

Om den fiktiva fotografen:

Nora Sigurdson fotograferar bröllop och porträtt. Hon har i dagsläget en studio där hon erbjuder porträttfotograferingar men arbetar helst i naturligt ljus. Som fotograf arbetar hon för att fånga detaljer i spontana stunder och helst i naturmiljöer eller där det finns en rustik känsla. Retuscheringen ska aldrig upplevas som överarbetad och hon accepterar inte önskemål om att redigera kroppsform, endast småsaker som enstaka finnar. 

Här nedanför kommer några skärmdumpar på hur webbsidan ser ut i olika storlekar. 

English

I am so excited about showing you the website I coded during my last module the work worried me so much, about failing. In the end I did succeed after a lot of hard work.

The module was called Designing websites and meant 1. coding a responsive (= scalable to different screen sizes) website in HTML and CSS, the JavaScript was optional. 2. Write a report with motivations about all the design choices, background about the fictitious employer, target group, persona, etc. The website was mainly designed for mobile use but had to work for bigger screens too.

For you who don't know this type of language I'll try to explain. HTML is the language you write websites in; this is where all the content is, from heading to text and pictures. CSS is a different language that is used with HTML but designs the website. With CSS you decice the colour, fonts, where to place things, sizes and so on. The JavaScript is my big enemy and is about interaction; when you for instance forget to fill in a box in a form and try to get to the next page and a box pops up saying you're doing something wrong? That's an example of JavaScript. I've not used it.

About the fictitious photographer:

Nora Sigurdson photographs weddings and portraits. She has a studio where she offers portrait shoots but prefers working in natural light. As a photographer she works to capture details in spontaneous moments and preferably in nature surroundings or where there is a rustic feel. The retouching of images should never feel overworked and she does not accept requests to edit body shape, only small things like pimples.

Here are a few printscreens to show what the website looks like in different sizes.


Webbsidan på datorskärm (3 bilder)

Startsidan innehåller (mina) bilder för att representera Nora som fotograf. Logotypen är gjord i Illustrator. Typsnittet i menyn är hämtad från Google Fonts och heter Amatic SC. Ikonerna till de olika sociala medierna i sidfoten är hämtade gratis och är fria att använda för kommersiellt bruk. 

Website for computer screens (3 pics)

The start page contains (my) picture to represent Nora as a photographer. The logotype is made in Illustrator. The font in the menu is fetched from Google Fonts and is called Amatic SC. The icons to the different social media in the footer are downloaded and are free to use for commercial use.





Webbsidan på surfplatta (3 bilder)

Under fliken Om Nora finns en presentation om fotografen (där min underbara vän Chrissy får lajva Nora). Menyraden lite mindre i storlek. I sidfoten har de olika blocken lagt sig under varandra istället. På förstasidan har bilderna som finns där också lagts under varandra.

Website for tablets (3 pics)

Under the button Om Nora (About Nora) there's a presentation of the photographer (where my lovely friend Chrissy is the face for Nora). The menu row is slightly smaller. In the footer the different blocks have placed themselves under each other, so have the pictures on the first page.




Skärmavbild 2017-01-20 kl. 09.47.37.png

Webbsidan på mobil (2 bilder) 

Här lägger sig menyflikarna under varandra, likaså bilderna och all information i sidfoten. Allt är fortsatt centrerat och menyn innehåller samma funktioner, det vill säga att den aktiva sidan är understruken för att visa besökaren var hen är samt att fliken understryks när besökaren håller musen över.

Website for mobiles (2 pics)

Here the menu buttons place themselves under each other, so do the pictures and all the information in the footer. Everything is still centered and the menu has the same functions, this being that the active side is underlined to show the visitor where they are. When hovering over the menu the options are underlined too. 



Frågor och funderingar

Om ni har några frågor kring plugget, mina kurser, vad jag egentligen sysslar med, vad en behöver tänka på inför högskoleplugg osv - skriv en kommentar så kan jag sammanställa allt i ett inlägg om ni vill! Har ni några synpunkter på webbsidan eller bara vill säga vad ni tycker så är det också bara att skriva eller trycka på det lilla gilla-hjärtat till höger nedanför inlägget.

Questions and thoughts

If you have any questions about my education, my modules, what I'm actually doing, what you need to think about before going to uni etc - write a comment and I can put together a post about it if you like! If you have any other thoughts about the website or just want to give your opinion, write a comment or press the little like heart to the right beneath the post.