Irina Mitrovici
Student ID:18023242
 
  Task1 | Task2 | Task3 | Task4  
 

Task 1

  1. Evidence of themed website research on 2 related works
  2. Evidence of research and reflection on usability and web design.
 

Evidence of themed website research on 2 related works

 

1. GROVEMADE.COM https://grovemade.com/

WEBDESIGN INSPIRATION

Webdesign inspiration is a gallery of the most interesting websites themes picked from different industries by Webdesign Inspiration team.
Here we can filter out the result on different industries and analyze the design of different websites, the themes that are trending and can help website designers in finalizing new design concepts specific to their own needs. From the menu offered, we chose for Industry Tech option, Types - e-commerce, Style - clean, Color - orange. ( Image 2 )

I have only one result. An e-commerce site https://grovemade.com/, but not in the technology industry. However, I noticed the company's presentation, which presents their story in simple and clear messages aligned in the centre of the page on two rows. The head of the text is <h1>, the text family - font-family: surveyor text a, surveyor text Georgia, serif a nice font that is probably created for the company. Georgia and serif are most common fonts and will be applied if for any reason the first font cannot be shown. The subheading "For one monitor or two" is another font family in simple lines compared with the heading, much smaller, size: 16px. (Image 3)

There are two links in the main menu, one is a link for the company shop, the second one is a link to the company presentation. Who are these people who sell these amazing products? That is answered on the Explore link, where you are welcome to know the team members, and their workshop. The team members are presented in a family context, with their whole family, wife and kids. So, they are not invited to know only their activity and how and where they are doing the products you buy, but also, they are inviting you to know the team members and their life. Therefore, the website is trying to make their customers to feel as part as their big family. When mouse hoover the picture is changing and we can see the little hand that indicates that is a link and the text “Learn more…”

In the Shop the products are displayed on a light grey background colour, pictures are very clear The price is displayed just under the picture, aligned left, another grey nuance slightly darker than the picture background, some of the pictures on mouse hoover will change with another posture of the same product.

Evidence of themed website research on 2 related works

......Image 1 - https://www.webdesign-inspiration.com/

 
 

Image 2 - - https://www.webdesign-inspiration.com/filter-tool - print screen how to search in galery

Image 3 - Inspect Style in Google Chrome

Image 4 - Explore menu link - their story with Grovemade Team Members

 

 
 

Image 5 - grovemade.com / shop

 
 

2. ANKY.COM https://www.anki.com/en-gb

 
 

Responsive web design meaning that will respond well to different screen size such as desktop, tablet and mobile. First page comes with a short description of the business activity. As they been in AI & Robotics for over eight years, I would emphasise this strong attribute and I would add more contrast between the font colour and the background.
A very interested navigation menu with picture, link and a short description. The structure of the default page is built on <div> with width measured in percentage.

When scroll down the page on “What’s new ” there are two divs, and for the alignment has been used float: left and right attribute.  

Responsive design

The responsive design moved the graphic from the top right "Alexa built-in" on the left side, the "Available now" button is now centered and takes all the width of the screen.

The palette of colors is simply embedded in shades from white to black and an light green that is found in buttons and even in pictures.
The products page, when is open for more details, engage the whole width of the page and is very complex, with many details and also with video presentation.

When the product is added to the card, a small icon representing a basket is covered by a circle containing the number of products. The view cart page provides a product image and details about the products in the basket. You can also check the payment. Before the payment, the page also shows other products that the customer might be interested at the bottom of the page.
anki.com is a very complex site with many effects on images that are well optimized for fast uploading of content. The website doesn't promote too many product, but just a few, leaving room for detailed presentation. With a clean design and a perfect functionality of all the features, this design would rank first in the top most successful webdesign.

 

 

 

I  
   
   
   
 

Evidence of research and reflection on usability and web design.

   
 

Usability and web design


Usability in web design refers to how easy is for users to use the website, despite the education, age, or jow knowledgeable are in computers. Studies shows that users are tempted to buy the products that are promoted on the landing page of the website. Sometimes placed in the lower section of the webpage, users skip the navigation bar and the header, and look first down to the first important-looking thing, in this case the deals or promotions.
Not always a strong colour and a big font size is the reason for the eye-catching promotion, but what is more important is that the image to have space around to breath. The white space act as a visual conduit to usher people’s eyes down past image, making the promotion the easiest to visualise content area.
There are some things that a web designer needs to remember when he want to put accent on a specific area or to communicate a message. The images must be clear and high quality. The combination of layout and content should not compete each other; the message must be commanding to interest  user’s eyes.

The image in the right shows an e-commerce website template that uses the image with the mobile phone to catch use's eye. The eyes are draws first on the image in front, I have noted with no 1 and then on the surprise right corner image. In his book “Eyetracking Web Usability” Jakob Nielsen and Kara Pernice mentioned that Usability is always relative to two questions: Who are the users and what are they trying to do? While a user interface (UI) that assumes a level of technical expertise might be effective for engineers, for broad customer audience it could be a disaster.