1.1:

Screenshot of the folder:

1.2:

Part 1 –
My added tags.

Part 2 –
Tags with meaning:

1.3:

1.4:

Take the basic website you have designed in your previous two Lesson Tasks in this module (Lesson Task – Put Thought Into Your Design and Lesson Task – Planning the Structure) and convert that into HTML and CSS code.

Coming soon…

Create the structure of your web page (from Lesson Task – Put Thought Into Your Design) in terms of HTML files and folders. You need to set these up so that you are ready to code your website.

First use a pen and paper to do your planning; then do it on the computer when you are sure of your structure.

Sketch:

Folder on the Mac:

Question 1

Written Assignment

• Name three lighting sources and their functions.
  1. Constant light: Is a fluorescent light that provides a cold (blue) light with the color temperature of 5000°K. This light can be used to imitate natural light.
  
  2. Tungsten light: also known as Photofloods or Hot lights produces a warm color cast with the color temperature of 2900°K.
  
  3. Natural light: Simply the sun.
  
• Name two light modifiers and explain the difference between them.
  
  Soft boxes: Soft boxes are used to soften hard light. It can make the light more even on the subject by creating less shadow.
  
  Reflectors:
  Used to reflect light by having a reflector on the shady side of the subject. The light will reflect on the reflector and create light on the shadow side too. This can be used with all light sources that can reflect. Works really well with flash.
  
• Draw a diagram of and describe the three-point lighting setup.
  Key light: Main source of light on the subject, often placed on a 45 degree angle of the subject.
  Fill light: The fill light fills in the shadows from the main light to make less shadows on the subject. The fill light is often placed on a 45 degree angle on the other side of the subject. It can be placed near or farther away from the subject to change the effect on the shadow and create different looks for the photography.
  Back Light: The backlight are place behind the subject to enhance the hair and shoulder of the subject.

Question 2

Research Assignment

Draw three studio setups for the following subject matters and list all the equipment that you would use to light your subjects:

Portrait:

Question 3

Practical Assignments
Take some portrait shots and pay specific attention to the lighting you use. Do one shot with soft lighting and one with more dramatic, harder lighting. It would be beneficial to hire studio lighting, but if you can’t, you may use natural light, reflectors and your camera’s flash.

Question 4

Practical Assignments
Choose a portrait photograph from the ones you took in Question 3. Create a unique movie poster for a fictional fantasy movie of your choice. Make use of different backgrounds and editing techniques you have learned.

Lesson Task – Put Thought Into Your 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.This is a front-end design lesson task. No coding or publishing is needed.Please upload this task to your WordPress blog.

For this task I designed a very easy 5 page webpage about my great grandmothers little town of Tolga. Its a special place for me were you can really take it easy and clear your head. Its a calm place but its surrounded by other interesting places if you want something to happen. The site is just really easy structured with only the top of the pages visible.

coming soon..

Now it’s your turn to create your very own website wireframe.In the last task, you had to come up with a list of 10 questions for a briefing form. I would like you to now fill in this briefing form, take the answers and create a wireframe for the site.This wireframe do not have to be a wireframe for your current Course 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.  Regardless of which method you choose, I would like to see as much detail as possible. Also, please write a short paragraph to explain why you chose the lo-tech or hi-tech option.

1.Who is your target audience?
Everyone that has a business or a personal ambition and needs a designer to help them on their way.
2. Who are your competitors and how do you differ from them?
My compeditors are all the other different design agencies out there.
3. What actionsdo you want visitors to take on the site?
To easily get to the portfolio via the index page, and to easy find the information they are looking for. 
4. If client has content and images ready or they will need agency to do it?
No the client wants to do this from scratch with the help of the designer. 
5.What is your deadline for completing the site? How big is the budget?
6. What goals do you want your website to achieve?
The goal is to promote the client as a graphic designer. 
7. Please list the names of three sites that you like and explain what you like about them.
Alkemist – classy and elegant design agency, greate inspiration. All the info is easy to find and are made in organized way.
8. What kind of website does your brand need?
The webside needs to be a promotional site for the designer where people can look at the designers work and can make contact with the designer. 
9. What will visitors accomplish on your website?
To hire the designer for their projects. 
10. Who will be responsible for maintaining the website? Will the person have the time and skills to do so?  
The client will be responsible for maintaining the site and has both the skill and the time to do so.

Wireframe:
I chose a low tech wire because I think it gives me the freedom to change everything as I please, and it was the simplest way to do this assignment. I will try a high tech version to later to get the practice.

• Explain the following terms in your own words: 
  – The Internet:
  The internet is the worldwide network for computers. You can find mainframes, cellphones, personal computers, and any other device with access to an internet connection.
  – HTML:
  HTML is the universal language used to receive, send and present information via the internet. 
  – Browser:
  A browser is a tool that gather all the HTML documents and is needed for us to view the documents. It is therefor necessary to have I we want to use the web the way we do today.
  – Search engine:
  Search engine is a program that searches trough all the HTML documents on the internet and sends back the most relevant results to the user. Example; Chrome, safari, Firefox and Opera.

• Please research and add another 10 questions to the briefing process.(See the lesson.)
  Old:
  1. What kind of visitors are you expecting on your website that would appeal to them?
  2. Who are your competitors and how do you differ from them?
  3. What actions do you want visitors to take on the site?
  4. What is your deadline for completing the site? How big is the budget?
  5. What features should be used on your website? 
  6. Please list the names of three sites that you like and explain what you like about them.
  7. Do you have any colour preferences? What should the look and feel for the website be?
  8. Who will be the contact person for this project?
  9. What do you NOT want on your site in terms of text, content, colour and graphic elements?
  10. Who will be responsible for maintaining the website? Will the person have the time and skills to do so?  
  
  New:
  1. What framework will the website be built on?
  2. What will visitors accomplish on your website?
  3. If client has content and images ready or they will need agency to do it?
  4. What are the clients drivers?
  5. Will multiple levels of access be required?
  6. What kind of website does your brand need?
  7. What goals do you want your website to achieve?
  8. How do you plan to maintain the site?
  9. Who is your target audience?
  10. How much traffic would you anticipate?

• 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.
  
  1. Who is your target audience?
  2. Who are your competitors and how do you differ from them?
  3. What actions do you want visitors to take on the site?
  4. If client has content and images ready or they will need agency to do it?
  5. What is your deadline for completing the site? How big is the budget?
  6. What goals do you want your website to achieve?
  7. Please list the names of three sites that you like and explain what you like about them.
  8. What kind of website does your brand need?
  9. What will visitors accomplish on your website?
  10. Who will be responsible for maintaining the website? Will the person have the time and skills to do so?  
  

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.

Great:

1. https://www.brightdesign.co.uk – I like the simple feel and organization.
2. https://swabtheworld.com/en/ – I like the contrast with color and the strong colors the site has. A more unique design but not in a messy way.
3. https://alkemist.no – One of my favorite design solutions and a great inspiration.
4. https://www.pixeldust.no – This is what they do, nice and organized.
5. https://www.airbnb.no – Easy to navigate and get the information you want and a delight to look at.

Bad:

1. https://oslo.craigslist.org – Uninspiring and only boring text.
2. https://www.bobsaget.com – Messy and don’t know where to place my eyes.
3. https://www.theworldsworstwebsiteever.com – I know this is a parody but still its bad, so bad. They way the designers wanted it to be. Every mistake in webdesign history.
4. https://www.art.yale.edu – My eyes hurt, I get the abstractness in the page but to get this from an art school? Took 7 years to even enter the page.
5. http://www.suzannecollinsbooks.com – I expect more from a great writer. Bad navigation and uninspiring.

Question 1 

Design your own printing checklist form. 

Question 2 

• Use the magazine style brochure that you designed in Module 5. Add a spot varnish to the cover and change the design to use spot colours. (You are welcome also make layout changes if you want to.) For your magazine, use a spot varnish for the cover and design it using two spot colours.
• Make use of your checklist that you designed and prepare the file for print.
• Decide what paper weight and type you will use. 
• Decide what type of binding you will use, for example, saddle stich, perfect bind, etc. (See the printing terms link.)
• Upload the print-ready PDF to your blog and post screenshots of your packaged files, and instructions.

Make sure to include the instructions (like spot varnish, paper choice and binding) in the file.

Question 3 

• Watch the videos provided below
• Complete the LinkedIn Learning exercise files and submit it with your assignment

Form and space

1. Rearrange shapes cut out of paper, and try to find the point at which the figure disappears into the ground.
   • Cut out a series of shapes from black paper – squares, rectangles, circles and random shapes – in a variety of sizes, from small to large.
   • Working with a square piece of white paper, place shapes of different sizes into the white space; place them on the white one at a time and move them around.
   • Try to find the point where the distinction between figure and ground becomes unclear. Does it depend on which shape dominates the space: black or white? Is it about the position of the shape within the space? Think about how important figure-ground relationships are within composition and design.
2. Write down your findings, and remember to take pictures of your progress. Submit these pictures and your write-up on your WordPress blog.

My findings? Its fun to move shapes around on a square piece of paper, that’s what I found out! Oh, and the effect the different pieces create while moving them, and that small changes can do much. But to create a shape where the foreground goes into the background wasn’t easy, and I might used a bit more more time if I wasn’t stressed about the 5 other assignments and a project description that had to be done. But in the end I got the result I wanted. Here are some pictures of my process:

Symmetry/Asymmetry

In this assignment, you will be given the opportunity to also test your idea sketching skills. It is important to start working with basic ideas on paper and develop your concept from there on out.

• 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 visual effects that you see on the first page of module 3 in Graphic Design School textbook. You can work with the interaction of rectangles and squares to make the balance or imbalance more evident.

• Entering left
• Movement to the right
• Movement to the left
• Movement downwards
• Movement upwards
• Balance
• Tension
• Symmetry/asymmetry

It was fun to move the blocks around and get the effects that the assignment wanted. I shows that it is important to think about where you place object in a design or illustration, and if you know effect you want it is not that hard to get it right. But always pay attention, you do not want to feel tension when you want to achieve symmetry.

Basic principles of layout

• Take a magazine, newspaper or book that includes images and text. Lay tracing paper over the top of three spreads (both left-hand and right-hand pages). Using a pencil and ruler, carefully trace the grid underlying the page layouts. Remember to remove specific text elements or images, and to only draw the grid lines. Note column widths and margin sizes at the top, bottom, and to the left and right of the main body of text. Is your document based on a two-column, three-column, or another type of grid? Which elements stay the same on each page, and which change?
• Publish your findings to your WordPress blog and provide photos or scans of your exercise.

Okey, this was an interesting assignment, I got to know more on how designers lay out there magazine pages and what techniques they use. I used the magazine “Hus & Bolig” and traced 3 different layouts:

The first spread is based on a 2-column grid.

The next spread is based on 3-column grid.

This last spread is different from the other ones, the left page Is based on a 3 column grid but the right is a single column grid. This is based on that the right page is a commercial that expends the whole page. However, what is the same about all 3 spreads is that the for edge, head, foot and back are the same. My measurements don’t say say that on the back, but that is because the spreads are difficult to well.. spread out and what’s why my measurement may differ. On the exception on the commercial page, that is spread on the whole page.

Pace and contrast

Compare the design (in terms of pace and contrast) of an online magazine, blog or website to that of a printed magazine, book or journal.

• What differences can you see between the kinds of design strategies used in the two formats?
• Write down your findings and upload it to WordPress.

The first thing that strikes me is that designing a magazine is like designing a Ferrari, and writing on the web is like designing a Lada. Magazine is art, and on the net all is straight foreword. Okey, I know that it is a lot of thought behind the online magazine, but it looks very simple on the web. in the online magazines you can scroll downwards and therefore I find that the design is mostly one column that can go downward forever, the foot is usually a long way down. But still I can see techniques that guides my eye as I what’s the screen, just as the normal magazine. The different formats needs to use different tools to keep the reader at bay, and I can clearly see the difference and can see the tools they use.

Design of layout in InDesign

Using InDesign, design a 8-page brochure for a fictitious travel agent.

• The size of the brochure should be A5 (when it is folded).
• Design the brochure in full colour.
• Use fake body copy, but create sensible headings.
• Use titles, headings and images of your choice.
• Be sure to pay attention to:

• Choice of type
• Choice of imagery
• Use of layout and grid to communicate the content

For the brochure I chose the little and calm town of Tolga. Its a small place where countryside and calm goes hand in hand, and the place where I used to visit my great grandmother every year before she died. I could have chosen Oslo, Stockholm, Barcelona, New York, London etc. but where’s the fun in choosing something obvious?
I chose a simple and light sans serif font to keep a light profile with the blue and light pictures. I chose different grid but tried t have a sense of calm and symmetry with the pictures. Anyway, here’s the brochure:

Source:

Wikipedia

Ostleningen.no 

https://noraxtynset.no/prosjekter/kunst-og-utsmykkinger/storsparken

https://www.booking.com/hotel/no/malmplassen-gjestegay-rd.no.html

https://snl.no/Tolga