My Reflective Journal

Beisfjord Website Design

Design a 5-page website or blog to promote your hometown (or any other place if you so choose). Present your design along with a strategy that explains the decisions you’ve made during the design process (keep the six steps mentioned in the lesson Web Design Process: Designing for Web (part 2) in mind). Remember, it’s important for us to see how you think, so explain why you decided to do things the way you did.

In this design I wanted to focus on having a clean and user-friendly website. It was important that the information being processed was easy to understand and quick to access. The main purpose of this website was to spread more awareness of my hometown as well as telling the history of the little fjord for the tourist and curious people reading.

Here you can read the strategy I had in mind before beginning the process of making the design for Beisfjord.

beisfjord-website-strategyLast ned

I chose a dark blue/grey for the main color of the website. I felt like the calm feeling of the color matched the scenery and ambience of the fjord. I focused on big, clear images and clean text thats easy to read for everyone. All the paragraphs have a «more» button that will lead the reader to another page with more information about the subject. This was to make it more clean on the main sites and easier to navigate for the viewer.

All the pages have different main subject like, home, attractions, history, events and contact to make it easier to navigate between certain information. I made slide arrows on the first page where there would be more highlight stories and information with quick access to the reader.

I tried mixing up the layout of the images to create some contrast between the different pages. This way it’s easier telling the different information apart and knowing where you’ve been before. I added a change of color in the navbar depending on which page you’re on at the website. In the end I put a contact page with booking and contact information if someone is interested in the things they have read about on the website.

Here you can see the finished website design for my hometown!

beisfjord-website-designLast ned

Homepage Redesign

Copy the exact content from a homepage of a website of your choice. Now redesign this homepage in three different ways. Each design should evoke a different emotional response from viewers. You can choose what you would like these emotional responses to be.

I chose to redesign the homepage of everpress.com. I tried creating three different emotions present in the different designs for the website.

In the first design I tried creating the feeling of interest. I kept the design bright and positive, with some pops of colour as well.

everpress-hompage-interest Last ned

For the second design I wanted to capture the feeling of softness and natural elements. This to capture the websites goals for sustainability and make that clear for the viewer.

everpress-homepage-nature-based Last ned

For the last design I tried creating the feeling of calmness with soft lines and soft colors as well.

everpress-hompage-waves Last ned

Hosting Service & Wireframing

I would like you to now fill in the briefing form with your ultimate questions from last week, take the answers and create a wireframe for the site.This wireframe do not have to be a wireframe for your current Mandatory Assignment (Product Website) it’s purely for you to practice your skills.You can choose if you want it to be a lo-tech or hi-tech architecture.

Since this is the first time i’m working on web design and wireframing I decided to make a lo-tech wireframe for the website. A lo-tech wireframe is made with a pen and paper and can be messy and show the beggining stages of the website layout ideas.

The purpose for making a lo-tech wireframe was to work in a minimal way to organize all the information elements, as well as figuring out the flow of the website. I created this type of wireframe because I didn’t have to worry about details like fonts, colours and making everything perfect, which made it easier generating ideas quickly.

Answering brief questions

What kind of visitors are you expecting on your website?

I’m expecting a majority of young adults, but also different ages of creative people visiting the website. There will be creative and curious people looking for inspiration.

2. Who are your main competitors?

My main competitors are other bloggers and artists, escpecially those who focus on creative work and showing designs in their blogs and website. The biggest thing is managing to stand out in the crowd.

3. What are your goals for this project?

My biggest goal is to manage to create a website that draws people in and makes them intruiged to read more about my work and projects. I also hope to create a good and fun atmosphere for the readers.

4. What is your deadline and budget for this project?

The deadline is in a month and I have a budget up to 5000kr

5. Describe your business in a few short sentences.

My business is a place for inspiration and creative freedom. It is a place that should inspire readers to get creative themselves. It’s fun and creative.

6. What specific features do you want on the website?

I want a clean design with a pop of bright colours. I also want to include: header, menu, social links, popular section and videos as well as a search engine.

7. What do you NOT want featured on your website?

I do not want: too many colours, a lot of different elements, clutter, fonts that are hard to understand.

8. Who is your target audience?

My target audience is all ages but for the most part young adults and teens.

9. Do you have a website already?

Yes, I have a website currently that i want to update the home page on.

10. What words would be associated with your website/business?

Fun, inspiring, creative, clean

The Wireframe

After answering the brief questions I started the process of making the lo-tech wireframe for the website. I started by taking a A3 paper and folding it in 8 to create some borders on the paper. That way I could create several layout ideas quicly and letting the ideas flow easily. This was a great way to see what elements i liked and what i didn’t like for the finished wireframe. I also made a little list of elements that would be good to have as a little list to remember.

After this I looked around the sketches and found the elements I wanted to use and started creating the finished wireframe. This time i was more neat when making the sketch to make the design more understandable and professional. There’s notes around the wireframe explaining the thought behind the different elements. Here is the finished lo-tech wireframe for the website.

Creating a Hosting Service

This learning activity is to acquire your own hosting service. This hosting service will be needed throughout the rest of your studies, and this Learning Activity is therefore mandatory.

I did not have a hosting service before this so I decided to create one at one.com, which the school recommended to us. It was an easy process and it went quickly. I haven’t creating anything on it yet, but here is a picture of the home page in my account so the school knows i have it.

That was all the learning assignments for this week, new ones coming tomorrow. Cheers!

Getting the Basics for Web

Explain the following terms in your own words:
– The Internet
– HTML
– Browser
– Search engine
Please research and add another 10 questions to the briefing process.(See the lesson.)
From this list of 20 questions (your 10 added to my 10), please create the ultimate list of 10 questions that you would use for clients.
Please upload this activity to your WordPress blog.

The Internet

The internet is a worldwide metric of millions of computers. Within this metric you’ll find all types of devices that share information like a computer. This includes devices like the personal computer, tablets, main frames and cellphones. (Anything that has internet available)

Today we’ve come so far with the technology that we now have the possibility to connect the different smart devices. You can connect your coffee machinge, fridge, computers and tablets together to the internet. This is to be able to share information across all the devices. One of the most important parts to understand about the internet is that it’s all about sharing information. This is the main focus on every website and every part of the internet when the consumer is using it.

Html & Browsers

Html is a universal language that is used to retrieve, present and send info through the internet. It can be described as buildingblocks that tell something about the way the text and images should be, as well as the structure to everything. To do this you need a browser as well. Browsers get updated all the time so there’s different versions of the same browsers. This is an important part to consider when designing a website, because you’ll have to code the website so it works for every browser possible.

The most popular browsers are firefox, chrome, safari and explorer. Without html or browsers the internet wouldn’t function like it does when we use it today.

Search Engine

The search engine is used so much these days for every question possible, so it can be nice to understand how it works. The search engine is bombarded with info and is a program that looks for key words in documents that exist on the internet and then gives you the best results it could find. The most popular search engines are of course Google and Bing.

Website Brief Questions

10 New questions

What are your goals for this project?
Describe your business in a few sentences
Do you have a style guide?
What makes your company stand out?
What words should be associated with the website/business?
What is your target audience?
What sepcific features do you want on the website?
Who are your main competitors?
What does your business actually do?
Do you have a website already?

Ultimate brief questions

What kind of visitors are you expecting on your website?
Who are your main competitors?
What are your goals for this project?
What is your deadline and budget?
Describe your business in a few sentences
What specific features do you want on the website?
What do you NOT want on the website when it comes to text, content, colour and graphic design?
Who is your target audience?
Do you have a website already?
What words should be associated with the website/business?

Surf the web and find 10 sites you would consider to be great websites. Simultaneously, make a list of 10 sites you consider bad web sites. Remember to describe why you would define them as such. Upload your lists on your blog.

Good Websites

Zalando.no – Clean design, good structure
Gmail.com – User-friendly, simple design
Spotify.com – Easy, many options available
Amazon.com – Good use of space, not to cramped
Duolingo.com – Fun colours & elements, easy to use
Everpress.com – Clean design, simple & aesthetic
Netflix.com – Simple & easy to use
Instagram.com – user-friendly, good design
Youtube.com – Lot of options, easy to navigate
theconversation.com/uk – Not to cluttered (good for being a news site)

Bad Websites

Goodreads.com – overcrowded, a lot of info in one place
art.yale.edu – really bad, too many elements, really messy
headhunterhairstyling.com – basic, slow process
mednat.org – small font, bad structure
etzy.com – confusing to navigate
wish.com – overwhelming, chaos
Pinterest.com – Lot of links that doesn’t work
weheartit.com – bad interactions on the site
Lanekassen.no – a little confusing when navigating through
itslearning.com – confusing to navigate, a little boring design

Recipe Booklet

Here is a main assignments we had to complete a few weeks ago. The assignment was to create a recipe booklet about eggs for a company. We got a finished text that had to be included exactly as it was written in the booklet. We also got specific pages that had to be included in the booklet as well.

Making this recipe booklet was quite the learning process when finding the design I was most happy with. It was a creative process that gave a lot of learning opportunities and fun for the creative mind. Here is the recipe booklet I made for this main assignment. I will also include my report if you want to read my design process in detail.

Eggs recipe booklet Last ned

layout-03-digital-report Last ned

Magazine Dummy

The last learning assignment for this week was to create a magazine dummy to set up for printing. I decided to create a fashion magazine dummy for this assignment. In this lesson we had to create the dummy, prepare it for print by choosing paper weight, binding, packaging the file and other necessities. We also had to create a spot varnish on the front cover of the magazine, that would create a new element when printed.

magazine-dummy-spread Last ned

Here are some of the specifications I chose for my magazine:

Paper weight: 180 GSM – mid market magazine
Perfect binding
PDF (x-3-2002)
Bleed marks 3mm
Spread
Spot Varnish

https://www.studentbookbinding.co.uk/

Noroff.no (Print preparation)

LinkedIn Learning Exercises

This learning exercise is based on learning by doing. We got the link to two LinkedIn learning lessons with learning files we were supposed to follow while watching. There were a lot of small little tasks to learn about different hacks and design tips, so I didn’t document every little thing, but I did take some screenshots from the lessons.

Here are some documentation from my process in the lessons. The first lesson was about creating a magazine about capetown. Here I got to learn a lot, like how to get a continous text flowing through several text boxes, different layout options, image tips and a lot more.

The next LinkedIn lesson was about the printing process and had a lot of different small exercise lessons in it. In this lesson I learned a lot of important information about the whole printing process with a printing company and things that are helpful in that situation. Here are some screenshots from some of the learning exercises.

I learned a lot from doing this weeks learning exercises, but have a lot more to learn. Cheers!

Printing Checklist

This week our learning lessons focused a lot on the important knowledge of printing design documents. One of those assignments was to make a printing checklist to use when making a document ready for being printed.

After learning more about printing and what goes into it, I made this general printing checklist for myself. The list is simple enough, with categories and different elements that are important to remember before sending the document to print.

Hope you like my printing checklist and find it a little helpful. Cheers!

Travel Brochure

Sights To See – Travel agency

Another learning assignments we got these past two weeks was to make a travel brochure. This was going to be a brochure for a fictious travel agency and showcase somewhere you could travel. I decided to create the travel agency Sights To See. In this brochure the agency is showcasing Loen in Norway.

I wanted to create a simple and clean design showcasing the peaceful fjord. In Loen you’re surrounded by mountains and the crystal blue water. I wanted those colours represented in the brochure and thought it fit well with the images from Loen. I added different activities and options tourists have when coming to Loen, and finished it off with a short summary of the attractions info.

This was a really fun assignment and helped me get more involved with using inDesign. Excited for the next one!

Symmetry/Asymmetry

Assignment:
On an A4 landscape page, draw four equal squares. Create 4 more pages in this way. So, you’ll have 5 pages with four squares on each.
Draw one or two squares or rectangles in each empty square to achieve the following visual effects (refer to your textbook, p.41 as guidance). You can work with the interaction of rectangles and squares to make the balance or imbalance more evident.