This week I had to create the structure of my web page I designed on week 22 –Put Thought Into Your Design– in terms of HTML files and folders. First I used a pen and paper to do my planning and then do it on the computer.
1 – Name three lighting sources and their functions.
Flashguns -also known as speed-lights- are external flash units employed by the photographers. These battery-powered flash units are mounted to the hot shoe or can be used off-camera by attaching them to the slave units. The sole purpose of the external flashes is to boost the flash-range of on-camera flash.
Head and power packs consist of a flash and a small power pack that acts as the generator for operating the flash light. You can attach multiple flash heads to a single power pack, and all these flash heads are comfortably controlled by the controls & knobs provided on the power pack itself.
A monolight is a portable photographic flash lighting unit which has its own independent power source. Unlike a head and power pack kit, it does not depend on a centralized power supply. Each monolight has its own power settings and light output.
2 – Name two light modifiers and explain the difference between them.
Umbrellas are one of the basic lighting equipment found in any basic lighting kit. Photographers use these reflective umbrellas as a diffusion device which soften and evenly spread the light over a larger area. The strobe light is mounted to the umbrella in such a way that the light hits the inside of the umbrella and bounces back to the subject with soft light and even illumination.
A softbox is also used for softening and diffusing the light. They come in varied shapes and sizes, but the most basic consists of a reflective surface surrounded by a diffuser. The flash head is fitted in such a way that the light falls on the reflective surface, passes through the translucent diffuser and produces a controlled soft light.
The difference between the two is that the light coming out of the softbox is more controlled and doesn’t spill elsewhere as it happens with umbrellas.
3 – Draw a diagram of and describe the three-point lighting setup.
The key light is the main source of light that is positioned to light up the subject. It’s often the brightest light and plays a great role in determining where the highlight and shadow area in your photograph would be. It is usually placed at a 45º angle to the camera, slightly above the eye-level of the subject and angles down towards them.
The fill light can also be called the secondary light. It aims to “fill in” dark shadows and help soften their intensity. The filling light is placed on the opposite side of the camera to the key light, usually at a 45º angle and a bit lower than the main light source. It’s normally half as bright as the key light (or even less) and can be adjusted depending on how intense you want the shadows to be.
The back light, also called the rim light, is placed opposite the fill light or key light, behind the subject to create a “rim” around the subject, by highlighting their hair and shoulders and separate them from the background.
Question 2 – Research assignment
1 – Draw three studio setups for the following subject matters and list all the equipment that you would use to light your subjects:
For a portrait photo I would use a 3-point lighting setup. A key light at a 45º angle a slightly above eye-level, a fill light in the opposite side at eye-level to avoid harsh shadows under the eyes and the chin. The main light is twice as bright as the secondary. Finally, and this is optional, I would add a back light to separate the subject from the background, in case it is needed.
In case of a fashion shooting, I would use a key light at 45º on one side of the model and a quite lighter light (8:1 or 4:1 ratio) or a reflector on the opposite side of the subject to fill in some of the shadows but keep some contrast.
Beauty shots usually use front light to soften texture, wrinckles and skin imperfections. For that reason, I chose to have an umbrella reflecting the light right into the subject. This way, the light is soft and spreads nicely, illuminating both the subject and the background.
2 – 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.
For this shot I think the key light was located to the left of the subject, probably at 45º. To soften the shadows on his right side, there is probably a secondary light or a reflector. I don’t think there is a back light, as the white wall would acts as a reflector.
Her shadow on the floor indicates there is a source of light coming from the model’s right side. There is probably a reflector to her left.
The highlights on the model’s nose and chest suggest the light is placed right in front of her. I believe there is also a back light, that separates her from the dark background.
Question 3 – Practical assignment
Take some portrait shots and pay specific attention to the lighting you use. I would like to see a 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.
The sun is shining on the subject’s left side, creating harsh shadows on the right side of her face.
In this case, the sun is entering the window in front of the subject, but the white blinds that are pulled down act as a diffuser and thus the light is soft.
For this learning activity I had to design a 5-page website or blog to promote my hometown (or any other place of my choosing). I should present my design along with a strategy that explains the decisions I’ve made during the design process.
I decided to make the website to promote the town of León, located in the northwest of Spain. Strategic design helps you combine beautiful design with functionality to create a website that meets the client’s and the end user’s goals. In the following lines, I explain the strategy I followed when designing this web.
Establish goals The goal of this website is to promote the city of León to attract both foreign and domestic visitors.
Define the audience The audience is adults who want a getaway to a historical town, different from the obvious -and well-known- Spanish beach destination.
Determine the brand’s image A town full of history, culture and tradition, located on the French Way of the Camino de Santiago where the visitor can also enjoy its fantastic food and (free!) tapas.
Solve the problem The web provides practical information to the traveller, divided into 5 pages with links to further details about places, activities, accommodation and more.
Measure the results It is not possible to measure the results at this point, as this is a mockup website. If it were to be uploaded, I could use a tool such as Google Analytics to do so.
Look for little improvements Again, once the web is uploaded, I could study the results from a monitoring system and make the adjustments needed to improve it.
Sakai Sushi is a sushi restaurant that already has a website their customers frequently use. The customers use the site to find contact information, book a table and see what is being served. Sakai Sushi is considering investing more in catering and takeaways. Because of this, they want to design an online menu to add to their website.
The purpose of this mandatory assignment is to design the menu, presented as a web page, coded using HTML and CSS. It should function on various screen platforms, from desktop to mobile; the look should be well designed and appealing.
I used Adobe Dreamweaver to create the web page and Adobe Illustrator for the logo. Here is a link to the live web.
For this week’s learning activity I was to copy the exact content from a homepage of a website of my choice and redesign it in three different ways. Each design should evoke a different emotional response from viewers.
I used Illustrator and Photoshop to make mockups of the three redesigns. This is the website I chose, and below is a screenshot.
My first redesign has a rustic look to it. To achieve that, I changed the photo to one with old-wood background and picked earthy colours that go well with the image. The font in the header is still a script, but easier to read than the original. The text on the navbar is a typewriter type, which gives it a more retro feel. This design evokes tradition.
Second, I went for a vibrant look that expresses freshness and happiness. For that, I selected bright pink, green and orange colours. The header has a bolder font as well as the navbar. I decided to use a photo of several citrus fruits to strengthen the energetic look.
Lastly, I wanted to express elegance, and for that, I picked a minimalist look. The image selected for this version has plenty of white space, which makes the design cleaner. I chose light colours and transparency that contrast with the dark grey of the text. For fonts, I went with thin, elegant and clean typefaces.
Sources: Photo by Brooke Lark on Unsplash. Photo by Bruna Branco on Unsplash. Photo by Hermes Rivera on Unsplash.
This Learning Activity is about creating a website wireframe. For that, I first have to answer the 10 essential questions from my previous post.
The client I chose is Little Explorers, the same I worked with on my Semester Project.
What kind of visitors are you expecting on your website? Parents with children under the age of 12 that want to buy handmade, ethical- and sustainably produced clothes that allow their kids for free movement and autonomy. Who are your competitors and how do you differ from them? There are a few online stores that sell similar clothing, using organic cotton. Even though most of these stores offer sustainable designs that can be considered comfortable in most cases, it is not one of their central claims. Little Explorers differentiate themselves by focusing on children’s clothes only, with a broader size range and putting stress on the functionality and durability of their garments.
What actions do you want visitors to take on the site? I want them to make a purchase.
What is your deadline for completing the site? How big is the budget? The business is not established yet, so the deadline could be something like two months. It is a very small business and so is the budget.
Please list the names of three sites that you like and explain what you like about them. 1. Lucía Be 2. Little Adventurers 3. Små Spor What I like about all of them is their use of image, the structure and organisation of the web and how easy it is to find the information you are looking for. They use the right amount of information and focus on showing what they are selling with high-quality images.
Do you have any colour preferences? What should the look and feel for the website be? The colours should be a light grey for the background, with copy in dark grey and headers and accents in green and turquoise. Same shades as in the products previously designed. What is the main goal behind building the website? The main goal is to sell the products that my client makes.
Do you have a style guide or any existing images? The brand has a style guide, logo, clothing tags, packaging design, business card and brochure. You can see them here.
What is the most important information your site must relay to the user, especially on the home page? A description of the brand values and photos of the products they sell.
Do you have the content for the website or will content creation be a part of the scope of work? The client will create the content.
Little Explorers is located in Spain, and so their website should be in Spanish. For the sake of this learning activity, I will use English.
I have chosen a lo-tech architecture because Little Explorers is a small, new business with low budget. Besides, drawing the wireframe by hand allows me more creativity and it’s easier to adjust and update.
On the first week of the second semester we are learning about web design. As an introduction, we have to explain the following terms in our own words:
The Internet It’s a worldwide network of computers. Within this network you’ll find everything from personal computers, mainframes, cell phones and any other device that has an Internet connection. Every machine on the Internet has a unique identifying number, called an IP Address.
Browser A web browser is a software application for accessing information on the World Wide Web. Whe a user requests a web page from a particular website, the web browser retrieves an HTML document from a web server and then displays the page on the user’s device.
Search engine Internet search engines are special sites on the Web that are designed to help people find information stored on other sites. There are differences in the ways various search engines work, but they all perform three basic tasks: – They search the Internet based on important words. – They keep an index of the words they find, and where they find them. – They allow users to look for words or combinations of words found in that index.They search the Internet – or select pieces of the Internet – based on important words.
In this lesson, we were provided with the following 10 essential questions to ask your client before starting a web design:
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?
I have to add 10 more questions and, from this list of 20 questions, create the ultimate list of 10 questions that I would use for clients.
11 – Describe your business in a few sentences. 12 – Do you currently have a website? If so, what is/isn’t working for you? 13 – What is the main goal behind building the website? 14 – Do you have a style guide or any existing images? 15 – How much traffic are you anticipating? 16 – What is the most important information your site must relay to the user, especially on the home page? 17 – Do you have a logo you plan to use or will one need to be created? 18 – Do you have the content for the website or will content creation be a part of the scope of work? 19 – Do You Have Current Analytics? 20 – Do you have a domain name (and hosting) in place yet?
For the last part of this learning activity I have to pick 10 sites that I consider to be great websites and 10 that I find to be bad websites, and explain why.
Good websites 1 – https://www.bloganaalbiol.com It is a webpage of a makeup artist that sells their services and courses. The design is clean and beautiful with plenty of white space; there is consistency in the colours throughout the site. The information is well organised, and it’s easy to navigate.
2 – https://www.icelandair.com/is/ Icelandair is the flag carrier airline of Iceland. Their website is neat, elegant and properly structured. The amount of information is enough and well distributed, which makes it easy to navigate. As this is an airline site, one would assume their main goal is for their audience to book a flight, and that is why the first thing we see on the homepage is a flight search box, and an offer section.
3 – https://www.maquillalia.com Maquillalia is an online beauty shop. The menu bar separates the products in categories for straightforward navigation. They include pictures to show the things they sell, and some looks achieved using their makeup. If you were to purchase an item in this shop, it would be simple to find your way through the site and see the options in that category. Besides, the home is not cluttered with information so we can focus on the products.
4 – https://www.yr.no Yr is the joint online weather service from the Norwegian Meteorological Institute and the Norwegian Broadcasting Corporation (NRK). At the first look, it might seem as the website has a lot of information, but that is normal for a weather forecast service since it is a complex topic. The user can search for a specific location and save it as a favourite. Next time they access the web, they will see their favourite places first. Easy to navigate.
5 – https://www.pickuplimes.com In Pick Up Limes, we find plant-based recipes -both written and in video format-, cooking tips and informative health articles. The web design is fresh and clean, with beautiful images that show the colourful food they teach you to make in their videos. The site is clearly divided into categories, so the user can find the information they are looking for with no trouble. There is a direct link on the homepage to their YouTube channel where they share their recipe videos.
6 – http://www.nimuazotea.com NiMÚ Azotea is a restaurant established in the town of León, Spain. Azotea is the Spanish word for a rooftop terrace, and that is exactly where the restaurant is located, overlooking León’s old town. Their website is simple and effective. They display only the necessary information: physical address, phone number, a link to book a table and their menu. Besides, a slideshow gives the potential customer a peek at the food they serve and the stunning views from the restaurant.
7 – https://avinor.no Avinor is a state-owned limited company that operates most of the civil airports in Norway. Their web page is useful for travellers as they can find live information about current flights for a particular airport. They also offer practical information about parking, shopping, assistance, etc. All the necessary links one would want are shown right up front in an organised manner. The design uses well known international icons to represent some of their services, which is how important information is marked at airports as well.
8 – https://gadja.no Gådjå is an Ethiopian restaurant in Stavanger. The first thing that catches my eye when accessing their web is the bright colours of their banner and photos that remind me of the Ethiopian flag. The fonts used are easy to read and work well with the colourful images used. The web includes only necessary information about their menu, order options and a brief introduction to the country’s cuisine for those not familiar with it—well-organised page.
9 – https://www.luciabe.com Lucía Be is an online shop that sells items designed for and by women. There is a consistent use in colours that the brand uses in their packaging, Instagram feed and stories and overall designs. They combine sans-serif typefaces with their trademark handwritten text. On the menu bar, the user can navigate through the different product sections. There are plenty of images that show the items, so the customer has a good idea of what they are purchasing.
10 – https://www.zalando.no Zalando is an online fashion platform which carries clothes, shoes and accessories of multiple brands. Their website’s design is modern and well organised. They use large areas of bright colours together with empty spaces making a clear separation of their product categories. Once the user accesses one section, it’s easy to filter to find the right item.
Bad websites 1 – http://www.alovelyworld.com/index.html All the content on this website is aligned left, leaving half of the screen empty. There is no description of what the page is about, showing only a long gallery of photos of the world. Once you click on one of these photos, you land on another page which has a menu bar with some options, but still, it’s not clear what the purpose of A lovely world is.
2 – https://www.grannen.no The homepage of Naboen Pub and Restaurant is an empty page with only a logo. It is not evident that the user needs to click on it to access the information. After clicking on the logo, the design doesn’t get much better: there are three tiny, unrelated and unrecognisable pictures and a few lines of text, where each word has a different, random size. At the bottom, four buttons lead to their menus, photos and bookings. The user has to dig to find useful information. Also, the url has nothing to do with the pub’s name, which make it difficult to remember.
3 – http://ve.no/Index_henrik.html The headings and body copy are too small and difficult to read. The website has a menu sidebar, but the design is not great, it’s just a list of names. The pictures they use are very small, have no caption and seem unrelated to what a bar has to offer. If looking for a bar in Bergen and based only on their web, I would never pick Henrik Øl & Vinstove.
4 – http://www.petersbuss.se The name of this company is Peters Buss (bus in Swedish), but the images on their web show a cruise and a spa, so it is not clear what they offer. There are too many colours that clash with each other; it is evident that little thought went into the design. There is too much information, and it seems unrelated. There is no consistency in typography, the endless list of links on the left use different sizes and colours without an apparent reason.
5 – http://www.gatesnfences.com Gate N Fences’ web is cluttered with information and links; it’s not easy to find your way around this site. The colour choices are not working, especially the red text over a grey or green background, which is very difficult to read. The buttons on the left side look out of style and unattractive. The background image doesn’t make sense with the rest of the page. There seems to have no organisation whatsoever; it’s a random placement of photos and text. Overall, it’s an unpleasant design.
6 – https://mednat.news The top part of this homepage has an unattractive logo and a cyan background. The text on the bar menu is too small. Besides, moving text makes it look old-fashioned. It seems to be a natural medicine guide, but the overall look of the web is a bunch of quotes and links, all in too small size to be comfortable to read. Scrolling down, we can see a couple of videos and some images with yet more quotes. It is not easy to follow and find your way around this website.
7 – http://www.irishwrecksonline.net The homepage has four images; three of the links do not work. To enter the web, the user needs to click on the fourth image, and it’s so unclear that a message with instructions is necessary. Once you enter, the design is like a mixed colour palette, which contains plenty of conflicting colours, including the background pattern. The text is small and not easy to read. Also, the navigation is quite complicated.
8 – https://www.lingscars.com There is so much going on on this site that it’s difficult to even look at it. There are moving images all over the place, a loud video that automatically plays when you access the web and a very colourful, demanding background pattern.
9 – https://www.art.yale.edu Even though the website belongs to Yale School of Art, it has quite an unappealing design. This web page is a collaborative project, and all member of the school can add content to it; this might explain the wrong choices made: all the text is aligned to the left, the background is too busy and distracting and the copy size too small in many cases. The colours do not work together either, and the yellow gradient in the text boxes makes it look outdated.
10 – http://www.arngren.net/ Again, another overwhelming website that could not fit one more piece of information. It has a random selection of colours, image and text sizes. It’s not user friendly or pleasant to look at.