LA – Studio Lighting

DSC_2558

Find a beauty photography and a fashion photography either in a fashion magazine or online, and explain the light setup you think was used for each image.

 

I found this beauty shot online.

(taken from this page)

Fashion shot.

(taken from this page)

99f13c20fe1ebffa2bff69e376a35ef3DSC_2559

Then I had this wonderful model for the last bit of the assignment, my dog Virus.

Soft lighting:

soft light

Harder lighting (more dramatic):hard light

I could’ve gotten a more dramatic look, had I had a portable good lightsource (in which case my main lamp would be more from the same level as the subject instead of from above). Seeing as this was only a learning activity and not a mandatory assignment, I chose to save the use of an assistent to hold my lamp for next time.

 

Advertisements

LA – Design Different Looks

Brief:

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.

Please upload this activity to your WordPress blog along with a short report where you explain the look and intent of each of the three designs.

________________________________________________________________________________

I chose the website of Just Eat. This is what their webpage looks like:

original website_just eat

____________________________________________________________________________________________

 

I first recreated the design of the original, to have something to create other versions of:

website_01_redesigning

____________________________________________________________________________________________

 

Then I created a masculine version, for the determined and hungry. Intended result is increased efficiency, by boosting the customers feeling of determination and strength:

website_02_redesigning_masculine_02

____________________________________________________________________________________________

 

 

This is the feminime version of the page, intended for reaction of relaxation and to provide a scent of elegancy:website_03_redesigning_feminime

____________________________________________________________________________________________

 

For the eyes who love contrast and colours. The low opacity orange complements the red colour of the company logo as do the red boxes:

website_04_redesigning_intellect_02

 

LA – Creating a Wireframe

Brief:

Now it’s your turn to create your very own website wireframe.

In the last assignment, 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 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.  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.

_________________________________________________________________________________

sushi menu_backup7-01

sushi menu_backup7-02

sushi menu_backup7-03

sushi menu_backup7-04

sushi menu_backup7-05

I chose the hightech static wireframe because I like the visual part of design the best. I’m working on this for the next MA.

LA – Get the basics right

Part one

  1. Explain the following terms in your own words:
    • The Internet
    • HTML
    • Browser
    • Search engine
  2. Please research and add another 10 questions to the briefing process.(See the lesson.)
  3. 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.
  4. Please upload this activity to your WordPress blog.

 

The Internet

The Internet is a universe of entertainment and education. It’s a “invisible” yet well used and common place where you can access any information and send it as well. To connect with the internet, we are reliant on cables and wires, that is; if you’re using a computer. To connect to the internet through a cellular device, we are dependent on satelites. Each phone has a transmitting tower, and the sending and recieving of information happens through digital radio waves. The internet can be thought of as a program available to most people. When you start it up, you have the same opportunities as all other internet users (with exception of countries with limited access for political control). You can communicate with people all over the world, pay your bills, watch cute cat videos, learn how to speak spanish, listen to music…. It’s also a place where people are extremely rude because they can hide their true nature behind an anonymous identity.

HTML

Hyper Text Markup Language is the standard markup language used to create websites and web applications. You decide the structure of your website using html tags. Web browsers are built for understanding these tags, and they translate the tags into content. For instance, instead of seeing <h1> This is a header. </h1>, you would see something like this:

This is a header.

Browser

Sort of already explained this in HTML. The browser is the most important software on your computer as it allows you to visit and understand web pages, which would be impossible without. You could say that if html is the coffee beans then the browser is your grinder. It’s a necessary part of understanding, translating, digesting information written in html. Well, to most people. Some people read html like you and I read english.

Search engine

A search engine is a program which sorts the search results for you by going after tags and relevance. Sometimes companies pay money to appear in the top of the search results, in such cases marked as ads, to draw more customers and to spread knowledge of their existance. There are different kinds of search engines, and you have to find the one most suitable for your user experience. For instance, google chrome saves your previous searches in order to expand the relevancy for your future searches. This is possible to change of course, if you’re not into companies saving information about you and your online activity. Though it must be said that all information that travels on the web is never truly lost or invisible. Everything you do online can be traced and all information can be found.

 

Add another 10 questions to the briefing process

  1. What kind of visitors are you expecting on your website?
  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? (This includes things like contact forms, pictures, videos, etc.)
  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?
  11. What sensation do you want the website to create for the user? (excitement, relaxation?)
  12. Where is the website going? Will it expand and change appearance in the future? Where will you be in 5-10 years?
  13. What are the potential barriers/challenges to the success of the product/content?
  14. What are the 3 most important goals of the webpage?
  15. Why was the company/product/idea created?
  16. Typography? Which fonts should be used?
  17. What subjects are important for the eventual menu of the web page?
  18. Should there be a favicon (a website/url-icon)?
  19. Describe the purpose of your webpage/product/brand in 1-3 sentences that capture the essence of it.
  20. Should there be a lot of space between different elements? Should the oversight be accomplished by contrast or big pockets of air?

Ultimate list of 10 questions

  1. What is the deadline for completing the web page? What is the budget?
  2. What features should be used on your website? (This includes things like contact forms, pictures, videos, etc.)
  3. Describe the purpose of your webpage/product/brand in 1-3 sentences that capture the essence of it.
  4. What subjects are important for the eventual menu of the web page? Submenus?
  5. Typography and colour use. Which fonts should be used and what colours do you like?
  6. What sensation do you want the website to create for the user? (excitement, relaxation?)
  7. What is the target group? (what kind of visitors are you expecting)
  8. Who are your competitors and how do you differ from them?
  9. Who will be the contact person for the project?
  10. Who will be responsible for maintaining the website? Will the person have the time and skills to do so?

 

 

Part two

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.

 

10 Great websites:

http://www.nationalgeographic.com/
Incredibly beautiful, functional, and easy navigational web page.

http://www.dyrsrettigheter.no/meatless/
Beautiful, functional and easy to navigate.

https://no.pinterest.com/
Easy to navigate, functional and alright in appearance.

https://www.youtube.com
Easy to navigate, functional and okay visually.

http://imgur.com/
Easily understood, easy on the eye, navigation good.

https://wordpress.com/
Well presented.

https://soundcloud.com/
Good content, easy enough to navigate.

https://www.finn.no/
Good content, good menu solving.

http://www.ted.com/
Beautiful, well presented.

It’s a tigh between

https://www.last.fm/

and

http://www.jango.com/browse_music

Jango could be placed at bad websites as well, as they have the occasional interrupting commercial and because the page isn’t beautiful. Because of it’s incredible consept, though, it is placed as good, and also because the page is not directly ugly.

Jango is better in the way that you can rate the song it plays when it’s on radio mode, and if there is a song you don’t like it will never play it again. If it’s a song you like it garantees to play it again.

Last.fm just plays the shit they think is similar to the artist that you searched for, and you have to press next and they still might play a song that is almost identical or by the same artist as the one you didn’t like. This is on random/similar artists mode.

Last.fm has a beautiful web page, but I’d like to change the functions. Jango has the right functions, but I’d like to change it’s appearance.

 

10 bad websites:

http://sol.no/
I think every header is different, and sometimes you can’t tell the difference between a link to another webpage and a header that belongs to the page. It’s a messy site.

http://www.vassmyra.no/
Oh my god. It hurts my eyes. The menu, the background, the content…. It’s incredibly BAD! The logos are in horrible resolutions,the page is messy, the colour choice is disgusting and overwhelming. This kind of a page was okay in the 90’s. 27 years later it’s just unforgivable.

https://www.mandal.kommune.no/
The bottom contact information bar could match the menu bar and the rest of the content in width, but instead it breaks style completely and lies on the bottom like the nasty visual surprise that it is. The menu is a complete mess, there is WAY to many options in the submenu. It’s not easy to navigate here, but very easy to get lost.

http://edition.cnn.com/
It looks like a bad travelling agency webpage. It’s unsyncronized, bad layout of content.

https://www.thesun.co.uk/news/
Not really that bad, but not at all good. I miss smooth transitions, everything comes off as rather flat and the way of marking different sections lacks creativity and it looks like it was done with very little effort. Bad colour choices.

http://www.express.co.uk/news
Messy header and content.

https://www.msn.com/en-us/news
Messy. Why on earth is all the content there in a messy pile on the front page when you have all the subjects in the header? This could have been done in a MUCH cleaner way, and they could tempt people to click into the subject they were interested on the front page, instead of being overwhelmed by all the information everywhere. Repetitive and unnecessary.

http://www.independent.ie/news/
Very listy.. Is it just me or are all the subjects crammed in a tight little list?
Too much going on in the header. I like some things about this page, such as the syncronized placement of images, they carry out a nice balance.

https://www.rt.com/news/
A boring mess to the eye.

http://www.thehindu.com/news/
Things are too close together. The header image should be in a larger scale and more centered.

 

 

LA08 – pt.4

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.

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

 

National Geographic

The magazine

The issue we have in our bookshelf is from June 2016. It is common knowledge that the yellow square stands for National Geographic, and most people know it for the respective organization that it is.

The magazine’s front page has a thick yellow outline that also reaches over the spine, but not further. The front page includes the main issue of the months magazine, which is shown with one big picture and minimal texting. It is simple, intriguing, timeless, beautiful, and tempts me to open it and have a look at it’s intestants.

The text is centered,and everything is symmetrical, and it works quite well with the picture.

The webpage

First thing that struck me was “wow, less noisy”. The yellow square is there, several places, but it does not have the same weight as the magazine. My first assumption was that the magazine needs to stand out next to tons of other magazines in the shop shelfs, and this is probably to make it more visible to the consumer. Actually, it’s just about the format. National Geographic is an organization that focuses on quality, and they have (of course) made the squared yellow outline in correct proportions according to scale.

The webpage is simple. Very little noise, no interruptions.

front-page

Front page. The header remains the same size regardless of zoom on screen. The weight on the left side of the menu does not take your attention from the right side of the menu, as the search sign and menu sign is bolder and easier to regognize than the letters to the left. Your eyes go to the left first in the menu, due to the weight of the logo, but end up on the most important element very quickly.

The first thing I saw was the logo in the header, then the quote in the header, then the logo in the menu, then the search and menu sign in the menu. It creates a pleasant flow of eye movement, natural and easy. Of course I cannot tell for sure that each person will perceive it the same way.

bottom

Bottom of page. Simple, silent, easy to understand. Easy to subscribe, easy to follow. Weight of Sign Up-button is centered, and creates a sense of balance and symmetry with the unsymmetrical parts on the sides as the follow icons seem surrounded by space, though I must admit I feel more tempted to hit follow than to subscribe as a consequence to what looks simpler.

search

This is what happens when you click the magnifyer icon. I mean, how beautiful is that? Look at the timelessness, the simplicity. Wow. It makes me excited to be here. It makes my search feel more important. It also makes it easier to avvoid spelling errors.

sea-of-hope

Sea of Hope. The photo grid seems unsymmetrical.

sea-of-hope-scroll1

The photo grid follows scroll.

sea-of-hope-scroll2

Sea of Hope beautifully marks the ending spot for the connected subjects.

photo-of-the-day

Photo of the day follows your scrolling.

photo-of-the-day2

There are so many exciting and beautiful effects on National Geographic’s web page. I can not begin to describe half of them. Turning over pages in the printed magazine is a great experience, each page beautifully layed out, every element perfectly placed, every photo of excellent quality. And I am not disappointed by the web page.

Similarities: National Geographic seems to carry out the same personality trates in each media, both magazine and web page, and I must say that it is beauty, quality and intellect.

For the articles in the printed magazine, they use two grids. The open space at the top is larger than the other outlining space.

Notes of critique: I am less impressed by the layout of the articles online. The width of the text is narrow, and it leads to a lot of unnecessary scrolling. I don’t have adblock on Chrome, so there are popups on the sides of the text. I don’t know if the text box width is this narrow to avvoid popups coming in the middle of the text, but I’m assuming it’s only because it’s adapted to smart phone and tablet users.

Personally I would use the printed magazine for reading articles, and the web site for watching movies, entering photo competitions etc..

 

menu1

The design of the menu is exhilarating, the preview on the left changes as your mouse hoovers over the different subjects, making it incredibly easy to find what’s interesting to you.

Final words: I could honestly cry from the immense quality of both of the products, and as a result of this learning activity I have subscribed to the printed magazine and full access to the online content.

I have not included photos of the magazine as I ran out of battery on my phone before I got to snap the quick shots. Will do so by tuesday.

LA08 – pt.5

Design of Layout in indesign.

Brief: Using InDesign, design a 4-page brochure for a fictitious travel agent.

  1. The size of the brochure should be A5 (when it is folded).
  2. Design the brochure in full colour.
  3. Use fake body copy, but create sensible headings.
  4. Use titles, headings and images of your choice.
  5. Be sure to pay attention to:
    • Choice of type
    • Choice of imagery
    • Use of layout and grid to communicate the content.

I didn’t use a fake body copy, but here is the PFD: brochure_extremetravels
The first page shows the back and front page, second page shows content middle.

All photos are legally downloaded at Pixabay.

 

LA08 – pt.3

Basic principles of layout

Brief:

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?

This book uses two grids, with an exeption of pages more focused on information than litterary expression, such as equipmentlists and other more generalized information which are put in pages within a blue square, using three columns.

dsc_0282

Here is the oversight of grids in the three-columned page setup.

dsc_0277

Here is the layout of every other page in the book, which I’m assuming is the master grid. It is built on two grids, which vary slightly in height as the length of text varies. On pages with photos, the photo stretches from left bleed on left page to end of first grid on the following page, which proves that the two-paged layout is the main layout, even used when grids are not visible through text columns. The style is symmetrical, but it can be argued that there is a sense of asymmetrical layout on pages with photos stretching further than one page. I would disagree, as they measure identically with the grid at their ending points.

The head, fore edge, back and foot carry out symmetrical identities (sizes). This creates readability and simplicity, two favorites of mine and many others.