Nadia Isabell Sommerfeldt

Written assignment

1. Name three lighting sources and their functions?

Strobe light – this is the same as a flash, where you cannot see how the picture will turn out before the photograph is taken, so adjustments must be made during the shoot to get the perfect angle of the lighting. This light is very strong/poweful.

Continuous lighting – This light stays on continuously and is impossible to adjust up and down, since the the light stays on you will photograph just like what you see in front of you and is easier to adjust to the perfect position.

Natural light – This is light that comes from the sun or a natural lighting source, this light can have variations depending on the weather, as it can be cold, warm, diffused/light or harsh/strong

2. Name two lighting modifiers and explain the difference between them?

• Umbrella
• Softbox
  
  A light modifier helps create soft, even light and reduced shadows. The difference between these two is that umbrellas produce broader, diffused lighting (similar to the lighting you get outdoors) that is uncontrolled, while soft boxes offer controlled, contained and direct lighting, which is much like sunlights coming through a window.

3. Draw a diagram of and describe the three-point lighting setup:

Backlight – this light is placed higher than the object and it helps separate the object from the background

Key light – The strongest and most intense light, it is the main light in the three way setup.

Fill light – Gives a softer light and is the lesser intense light of them all and fills in potential shadows.

---

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 – Fashion – Beauty

PORTRAIT

FASHION

BEAUTY

In a magazine or on the Internet, find one fashion shot, a beauty shot and a portrait shot and explain how you think the lighting was set up in each shot

Portrait shot – I think they have used soft boxes here, one on each side close to the model. And also with low settings on the strobes

Beauty shot – I think there are two soft boxes shaped like octaboxes placed two feet from the model too keep as much light on the model and lights off the back.

Fashion shot – the light I think used is softboxes and placed close to the model and angled down about 45 degrees on the model. The key light is hitting the left side of the model hitting the hair, creating a dramatic effect. Theres a soft box on the right side but with higher intensity creating more light on the right side.

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.

Web Design Process

MY GOAL

My goal with this LA was to promote my hometown and showcase the beautiful landscape, buildings and environment that surrounds the people that live in Trondheim. I wanted to appeal to both tourists and the locals as it is equally as important and wanted to have a easy access to information within my page.

TARGET AUDIENCE

My target audience is anybody who would like to travel and visit Trondheim, as well as the local people that maybe want to know more about their own town. As Trondheim is a popular tourist destination I wanted to showcase “Tyholt tårnet” which is a very popular restaurant because of its location and the fact that it is a spinning tower that shows you the whole city while you’re eating and is very popular among locals and tourists as well as “Bakklandet” which is an old bridge and area that are very popular for photographs, tourists and locals to travel through.
A lot of students come to Trondheim to study and therefor is the webpage design catered to both outsiders and insiders of the town.

BRAND IMAGE

I focused on my target audience as they are who I am making the website for, and I wanted to showcase how beautiful my town is as well as giving information on what you can do while visiting the town or if you just don’t know what Trondheim has to offer if you live here or not.

SOLVE THE PROBLEM

To solve the problem I chose to keep a clean design with photographs as the graphic elements, I did not want anything to compete for attention as well as I wanted to display how beautiful Trondheim is.
I chose to go for one photograph for each main page that stretches all the way to the sides. I chose a main image on each page that correlated with the theme, so for food and drink I have a image of a restaurant, while for sleeping in Trondheim I chose a image of a stylish hotel and then I used pictures of the popular places in Trondheim for the main page and information page as it is aesthetically pleasing.

I have a navigation bare on the top that stays on the top while you scroll through information.
The main page (home) has a welcoming word, while the other pages has a sidebar menu on the left that will contain more under pages that will contain more information, so the page would be well structured and it would not be too much information cramped into one page.
I have used a sans-serif font on the navigation bar and also on the sidebar menus on the under pages as it makes for a clean look and has good readability as it is a webpage. I have used an overlay so the text and link to different pages would not disappear into the image and they would be readable.
I have also made a footer with the copyrights and vector elements to Facebook and Instagram if the visitor wish to explore more on social media.

As I wanted to show the images I went for a transparent overlay that would not make too much of a contrast, the transparent overlay creates a soft effect and does not clash with the image, but rather flows with it. My navigation bar is a fixed top so you would not lose the menu bare while scrolling through the page, on the front page I would also have more information such as more contact information and a text about Trondheim so the main page appears more welcoming.
For my fixed navigation bar I would have a drop-down menu so you could go direct to whichever page you are looking for without having to go to a specific page and then go to the information you are seeking. This is to help the visitor and make it easy to navigate throughout the site.

SOLVE THE PROBLEM

For measuring the website I would use Google Analytics as it user friendly and give all the information needed.

IMPROVEMENTS

With my website I would have testings and group testings before launch to make sure everything is working correctly, that the visitors are able to navigate through the site and also analyse how they use the site. This will give me information on how to improve the functionality of the website as well as make changes where it deems necessary. Doing testing also helps seeing if there is something not correct or not working within the website and then to adjustments to achieve an optimal website for my target group.

As testing is important, A/B testing and split testing is important but that depends on the traffic of the site, if it is busy this testing is optimal to secure information on how the improve and make adjustments, but if the site has low traffic this should be an option later on.

This is my 5-page website layout of my hometown: Trondheim

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 went online and found a website for a wedding photographer that I really liked and thought I could try to make different design looks for his page. So I took some of his photos and recreated different designs.

---

This is design “playful”, where I wanted to showcase some of the more fun and playful photographs. I used serif fonts and colours that would compliment the images. And as they speak for themselves I did not need too many graphic elements on the page. I used a torquis colour that is fun and help the white in the images stand out as white is a mandatory “colour” when it comes to weddings.

For this design, I wanted to have a bigger image that would evoke the feeling of romance, I kept the design simple and clean with a header and a sidebar menu, as the focus is on the photograph. I used a photograph that was intense and sweet and the colour of the font is the same as the sidebar box and matches the tie of the man in the photo. I wanted to use a feminine colour that would relate to love and romance without using the classic red and therefor went for a red-purple colour that gives the webpage a pop. And for the menu text I used a cream colour that would compliment the photograph and also stand out from the menu box.
The cream colour is soft and gentle, it evokes the feeling of romance and weddings.

For the third design I chose photographs that was happy and joyful, as well as one emotional one but the message is Happiness in this design. I used a simple heading with a monogram at the top to not make it too bust since I have four images on the design. I had some in colour and some in black and white to create contrast and diversity within the design. I put an overlay over the middle and have the photography centred. I used a dark green for the header and the overlay to also create contrast from the images but it makes the page look cohesive. For the navigation bare text and the photography text I used a pastel blue that is soft and pops out from the green overlay and heading. The images showcase a good time at a wedding and that correlates with the feeling happiness.

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 created a domain at one.com as the learning activity suggested and my domain name is isabellsommerfeldt.no. We have been working with web design and it is really fascinating and now I have required a hosting service and looked through the steps on how to upload a website to that domain which was easier than what I thought it was gonna be. I’ve included a screenshot of my order confirmation from one.com.

The ten briefing questions

• Why do you want a webpage, what is the purpose and primary goal for the site?
• Do you already have a website?
• Who is your target audience?
• Who are your competitors and how do you differ from them?
• What is your brand is your brand identity?
• What features should be used on your website?
• Do you have any colour preferences? (What should the look and feel for the site be?)
• Who will be responsible for maintaining the website? Do they have the time and skills to do so?
• Who will be the contact person for this project?

I chose to go for a lo-tech wireframe as they provide more freedom to be able to change, erase or add elements instead of being locked to a hi-tech, which is a harder wireframe to make changes to. With this wireframe it is easier to show the client and receive feedback as a sketch/lo-tech does not take as much time to create as a hi-tech wireframe.

For a possible solution it is possible to cut out shapes that represent the different elements, header, navigation bar, images, footer and then move it around on a blank page to easily rearrange elements and understand exactly it is the client want and end up with the desired website.

PART 1

What is the internet?

The internet is a digital place where information, various content and a worldwide network of computers and servers. The internet can be browsed through different browsers like Safari, Google Chrome and Firefox to mention some. We can have the internet on our phones, gaming consoles, our computers and many others and it is essentially where we share information with the world. Companies can promote their products, people can upload content such as home blogs, music videos, teaching guides and things alike. It is a worldwide network where everybody with an internet connection can have access and either share content, shop, learn or just enjoy entertainment.

What is HTML?

HTML stands for “Hypertext Markup Language” and is the language which is used to code a website. It will be like building Legos and stacking the code on top of each that ends up deciding the structure of the page you are coding and what is on each page.

What is CSS?

CSS stands for “Cascading Style Sheet” and is an essential part to the coding part of designing the website. As the HTML is the architecture of the webpage, the CSS is the interior design, it decides the styling and the look of the webpage. The CSS decided the elements on the webpage and how they will end up looking.

---

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.

• Why do you want a webpage, what is the purpose and primary goal for the site?
• Do you already have a website?
• Who is your target audience?
• Who are your competitors and how do you differ from them?
• What is your brand is your brand identity?
• What features should be used on your website?
• Do you have any colour preferences? (What should the look and feel for the site be?)
• Who will be responsible for maintaining the website? Do they have the time and skills to do so?
• Who will be the contact person for this project?

I wrote down 10 questions of my own as well as the 10 questions in the lesson and chose the 10 best questions to get a good briefing of the project. I chose the questions that I felt was the most important and relevant to achieve the desired product for the client.

PART 2

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

https://herehomestyledesign.com

www.luculentus.no

https://www.concordia.ca

https://www.mystaelectric.com

https://www.deplacemaison.com

https://collagecrafting.com/en

https://www.defeatboco.com

https://liarsandlovers.com

https://trondheimkino.no

https://www.drinkseriously.com

The flow in the pages of the websites are fluent and the visitor does not get lost within the website. I think these websites are good because they are clean with a consistence use of colour that correlates with their brand and get the interest of the visitor. The colours work well on web and are not harsh on the eyes but are clear, different and work really well. Some of the websites have different cursors than the normal arrow and that makes for an interesting element within the website.

The websites are clean and the information that is needed and looked for is easy to find, they are simple to navigate through even when some of the websites have a more elaborate design, like the site mystaelectric have elements that surprise you but interest you, the colours are dark like the theme of the brand of the tattoo artist. While the webpage for the university Concordia have a more clean and consistent feel, with information carefully placed so it is easy to find, it is a university webpage and looks professional as is what they are going for. 

The colour usage, typography, image placement and graphic elements within these websites does not distract from the content and the brand of the companies but the graphic elements and typography compliment each other and creates a flow that guides the visitor through the website. It is not hard to find the information that is important and they have the important information like contact info, social media and so on available. 

Bad websites

http://arngren.net

https://dreamers.squarespace.com

https://canals-amsterdam.nl

http://www.pnwx.com

https://www.pennyjuice.com

http://www.aliendave.com

http://www.suzannecollinsbooks.com

http://www.bellads.info/?_ga=2.74474578.1129504480.1580058803-1745479490.1580058803

http://www.patimex.com

http://ww1.electrifyingtimes.com

Some of these websites have an initial good design template but as you look through the pages, a lot of the information get lost due to the lack of contrast and the colour and image use does not compliment each other and instead loose information. When you have to squint and really look to be able to see the information it makes a bad design. The visitor should not cater to the website, but the website should cater to the visitor, in being a well structured webpage where images and information work together to convey the right message. 

The colours and the typography clash and it ends up being a design with a lot of interruption and clutter. The colours do not compliment each other and are harsh on the eyes, this makes the visitor not wanting to browse further and turns customer and others away from their site. The images and graphic elements are placed where there is room and are not aligned with each other, it ends up looking messy and unorganised, and that makes the visitor not wanting to browse through the website.
Some of the website’s have an excessive use of colour, text and graphic elements where they are overlapping each other and creates disturbance within the page. It is hard to find the necessary information as the pages are unorganised and cluttered.

Some of the websites are unresponsive and if the user has to work hard to get the website to work or find information they end up leaving as the website should be functional and straightforward. 

Create your own checklist

“Design your own printing checklist form“

For this assignment I took notes and watched the learning videos to get a greater understanding of the printing preparations and steps that are taken.
As I know, knowing your preferences and what to work with is very important. Creating a checklist is helpful to improve my knowledge when it comes to printing, saving, double-checking, packaging and exporting documents.

Magazine dummy

This assignment was about learning to print and prepare our documents correctly, this theme is one of them I have the most difficult in, since all the preferences and adjustments I find a bit confusing. With a bit of practice and working with media and design I know I will be more comfortable with this and excel as I want to.

We were to create a magazine dummy, with spot varnish on the cover and using two spot colours within the document. We were also to package this file and include different files.

I chose to design a wedding photography booklet style of magazine. As I was watching learning videos and writing notes I knew I wanted to use my own photographs and utilize the assignment to show my own images in a booklet.

• The size of my paper is A4 (210mm x 290mm) and has facing pages to create a magazine.
  
• The paper I wanted is coated (gloss).
  
• I want saddle-stitching to bind my booklet, since this booklet does not contain too many pages, this stitching will work good.
  
• As this is a photography booklet I would want the outer pages (front and back cover) to be 130 GSM to create a outer exterior that is durable and high quality to show that this is a valuable booklet. For the inner pages I would use 90 GSM to still keep some thickness but not go too thick for the photographs, I have also decided for coated gloss paper to make the images pop more and give an elegant and expensive look.

MY MAGAZINE DUMMY

• 

• 

• 

• 

• 

• 

I made my layout grid in indesign, I sketched some layouts fast that I wanted to execute to see if the design popped. I found images from my own gallery, as I have studied photography and done a lot of different shoots. I wanted to showcase my photographs from a wedding photoshoot that I did, since they have the same vibe, look and colour scheme it is easier to work with and make a cohesive look for the booklet.

As we had to make a varnish spot on the front page and use two spot colours for the rest of the magazine, I used the colours:

PANTONE 8463 C – This is the spot varnish colour that I used on my front cover of my magazine.

PANTONE 436 C – This is the colour that I used on the lines and boxes of colour to fill the white space and create dynamic to the white background.

PANTONE 437 C – This is the colour that I used on the headers of the spreads, it is also the colour I used on the frames inside the photographs.

This colour is kind of a diffuse, cold purple that I felt matched the design and colours of my photographs, it helps keep the booklet on theme with a timid touch of colour throughout the dummy. The pop of colour creates dynamic with the text, titles and graphics throughout the booklet and does not take away the attention from the content.

I tried uploading my package file to my WordPress blog but I kept getting an error code, and I tried multiple solutions but it would not upload my packaged file

For this learning activity, the assignment was to make a brochure for a travel agency were we got specific requirements when making the brochure

I chose to make a travel brochure for London, I have been there a few times, and the energy and activities that London has do attract tourists from all over the world. I love the views, the shopping, food and general atmosphere of the city.
I made a brochure that folds into a A5 brochure when folded.

I used three different fonts for the brochure:
Blenny Black – Header and contact info title.
Rufina Stencil Bold – was used on the information on the inside of the brochure.
Athelas Regular – was used on the contact information body text on the back of the brochure.

And for the color, I only used on skin colour/beige: #fcbf96.

‘To catch and maintaining a readers interest you have to consider vital qualities like pace and contrast. In magazines and image heavy books it is important to use pace and contrast to direct the viewers eyes to certain information in a particular order/sequence.‘

In this learning activity we were suppose to compare an online magazine, blog or newspaper with a printed medium of same kind and write down or findings.
I understand that you have to use different methods when something is printed versus something digital, how the viewer receives and processes information is different and therefor are there differences in layout.

The difference between a magazine and a website

For a magazine you have to attract the reader as fast as possible, catch their interest and keep momentum going. While on a website the information (images and type) interact immediately and therefor do screen formats have an advantage and print media has to work harder on their dynamics to engage their viewers.
Hierarchy is what websites are usually built with, where there is a header, a menu (sidebar), headings, text, and the colour scheme and theme is usually the same overall when it comes to websites. This is to create a cohesive design through the whole website. Websites with good designs do not cram all their information into one overcrowded layout; instead they have menu text and uses URL links (to avoid too much clutter and text on the screen) to navigate you through wanted information, digital media and websites are very interactive and you feel in control of your reading and the information you receive, digital publications must therefor have a clear and usable spreads throughout their websites. A printed media (magazine) will not have these features, you can not click and enlarge images or navigate efficiently in a magazine, your eyes will be directed to the information the designer has decided in the order that is the most efficient. As a printed media there is a lot of competition and noise that takes the information away from the magazine itself, it has to stand out with images that create a good and interesting dynamic with the content and images.

On a website you have options to hide information and show information, there is also more possibilities for how that information is displayed and sequenced than there is in a magazine. In a magazine the pages are not all similar, but a lot of the articles have the same theme, categorizing them together.
So while a website should be neat and clean with the option of more information and images as you scroll and explore is a good layout for digital designs. Printed media on the other hand have to be dynamic and exciting to catch the readers attention with exciting layout, headlines, text and imaging, the front page is the biggest draw to a magazine, this is where most of content of a magazine is listed to excitingly engage the reader. On a website there is not a need for a overflow of what the content is but a steady stream of information as the reader decides to click further.

‘For the second LA for these week we are working with basic ideas of layout and challenging ourself with our sketching. We were to sketch squares and then sketch more squares and rectangles using material from our textbook as inspiration. The different objects in each box were to represent visually two sketches of each visual’:

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

• Entering left – For this visual I placed the objects on the left side of the page, where both objects in sketch 1 and 2 are placed at the same distance on the left side of the box. Having two objects heavily placed on the left side makes the visual seem like the objects are entering from the left side of the box. I used different shapes, squares and rectangles to not make it unilaterally.
  
• Symmetry/Asymmetry – Illustration 1 showcases symmetry in this visual, by having two equally shapes (rectangles) mirroring each other. This creates the affect of two objects being similar and the illustration looks cohesive and in order. Sketch 2 on the other hand are rectangles cut in a 90 degree angle, since asymmetry means elements that are juxtaposed and do not mirror the other, I did a similar shape but in different sizes. I see now that I could have found a different solution to this particular part.

• Movement to the left – In this sketch (illustration 1) there is a square in the middle, by placing another square on the left side of the middle one make up the visual force that is that the illustration is moving to the left. The same is used on sketch 2 where two objects are next to each other but weighing more on the left side, visually leading your eyes to the left of the box.
  
• Movement to the right – In illustration 2 I have used the same method as in “movement to the left” where a square is placed in the middle of the page and another is introduced on the right side of the first square, this creates an effect of the visuals going to the right of the box.
  Sketch 1 is the same approach but I drew a big rectangle in the middle and a smaller square on the right side of the rectangle, I feel this leads your eyes and helps the effect of movement to the right.

• movement downwards – I used (sketch 1) two squares of the same size, where I used the same method as ‘movement to the right/left’, but in this case I have placed a square in the middle and then a second scare beneath it, this suggest the movement of going downwards. In the second sketch (2), I have placed two equal sized rectangles at the bottom of the box, they are placed in opposite corners of the box and end a bit over halfway of each other. When I see it now I could have placed them differently, to get the full visual effect of movement downwards.
  
• movement upwards – Sketch 1 showcases the same method as ‘movement downwards’ where I have placed a square in the middle and another one above it to illustrate movement upwards.
  In sketch 2 I have made use of a rectangle at the top of the box and a square underneath it, to create some dimension and also suggest movement upwards.

• Balance – In both sketches (1 and 2) I have tried to use the space of the box, I have made use of different shapes (rectangles), but placed them with equal white space between each shape and the lines of the box. Making it so the all the lines are straight and positioned equal length from each other, this creates an order and a balance in the composition. The objects are also placed in the center of the box, which also helps create a balance.
  
• tension – I was not sure how to create tension, but I tried in both sketches to place the objects opposite of each other to create dynamic and tension within the composition. I made the rectangles in different size and length to contribute to the visual illusion of tension. Because of the amount of white space and how the objects are placed within the box, the suggestion of tension is present because your eyes are conflicted in what to look at since each shape is different but have similar traits as the other.