Analyzing three amazing websites from awwwards.com

https://www.konstolymp.gr/

Konstantopoulos S.A. “Olymp” is a world leading exporter of Greek table olives and extra virgin olive oil.

The animation used to introduce the design and the wording, keeps the viewer focused on the website.  It happens slow enough to keep the viewer engaged at the beginning of the page and throughout the website. The use of white space helps the viewer focus on the design and wording. The background image is light and does not take away from the design and the wording.  The company logo stays centered on the website even when you scroll down the page. Throughout the website you see proximity between the design and the wording.  They both share equal space on the page.  There is a minimal use of color throughout the website. The color used on the website relates to the product, and the brightness of the pictures against the white space is appealing to the eye.

http://www.amandegelateria.it/

Amande Gelateria, Gelatos, Italy

Good use of animation at the beginning of the website, introducing the company logo. Then it introduces a Polaroid picture of a city next to the sea. The Polaroid picture has a live video, showing the water moving, giving the viewer the idea of tranquility. The website engages with the viewer. Next to the video you see an image of the product and the company name. The three images are in the center of the page and next to each other, with good proximity. There is good use of white space. The viewer focuses on the images and wording on the website. Main images are on the center of the page throughout the website. The background images are light but integrated based on the image being shown. The images on the second page and throughout the website are represented with bright colors emphasizing the ingredients used on the product. The website has a horizontal layout.  The company logo stays in the bottom left hand corner every time you scroll the page.  The bright colors and white space surrounding images keep the viewer focused on the website presentation.

https://theparfaitstand.com/

The Parfait Stand, Japan

The web page starts with a slide show of six pictures centered in the middle of the page surrounded by white space.  Then you see the company logo in the center of the page with an aqua blue colored background. Then an image of the product appears in the middle of the page. The screen disappears to the right and a new image of the product shows up with a light peach background and an image of their product in the center of the page. The viewer focuses on the image in the center of the page. Animation icons are used to direct the viewer to other sections of the website.  A cocoa icon moves around the image, once selected it directs the viewer to the page of the chocolate parfait. A peach icon redirects the viewer to the page with the product with peaches. There is an info icon the blinks so the viewer could see it and click on it for more information. The plus icon gives the viewer information about the product.  The icons move slowly around the page and if you put your curser on them they blink, drawing the viewer to engage with the icons.

All three website above have defined their goal, to sell their product. They have highlighted their brand image and have chosen elements that have helped define them.  I believe they have targeted their audience correctly.

On my current projects I could focus on using more white space. The use of white space will emphasis on the images I use and the wording applied to the image. Also, I need to focus on the correct use of color for fonts in my client blog.  I’m focusing on color instead of presentation.  The colors should blend and help the website flow so the viewer stays focused on the website and not be distracted. I need to choose a background image that will blend with my theme instead of overpowering my web page. I like the idea of less of best, something that is hard to practice when you are new to web design.

Leave a Reply

Your email address will not be published. Required fields are marked *