WebsiteCritique

webMasterChef JR Maschietto
n01386544

Professor
Milorad Eftoski

01/31/2020
 WebsiteCritique
ABOUT THIS PROJECT.
For this project 5 different web sites were chosen to be criticized based on the following criterias:
1. Design: Colors, Type and Layout of the Web Page.
2. User Friendly: Download time and Navigation.
3. Browser Complient: Try at least 3 different Browsers and compare.
Each website received a rating between 1 to 5 stars.

TABLE OF CONTENT.
1. Entertainment - IMDB
2. Corporate - XIAOMI GLOBAL
3. Information - MEDIUM
4. Design - WERBEROUS
5. Personal - JUAN GARCIA PORTIFOLIO

Attribuitions:
icon made by www.flaticon.com, icon made by monkik from
www.flaticon.com, icon made by Freepik from www.flaticon.com.
Chef, laptop and smartphone illustrations made by vecteezy.com.

student. LUIS FERNANDO MASCHIETTO JUNIOR

number.N01386544

professor.MILORAD EFTOSKI

date.01/31/2020
Entertainment imdb.com

“IMDb is the world's most popular and authoritative source for information on movies, TV shows, and celebrities. Products
and services to help fans decide what to watch and where to watch it include: the IMDb website for desktop and mobile devices;
apps for iOS and Android; and IMDb X-Ray on Fire TV devices. (...)
”
./about
DESIGN.
A very clean design, big elements, good palette with light colors, gorgeous promo pictures. The website is
minimalist, just the necessary information which is good, makes me want to navigate it more without being afraid to get
lost or being bombarded with too much information.

BROWSERS.
Firefox and Edge display the same layout and the only visible difference was the
font type, on Edge the font is a little less neutral but still sans serif and do not
affect the experience. However on Chrome the home page display almost a total new
website, with new design, layout, colors, fonts and navigation. Ir looks more moderns but unfin-
ished. It remembers the main streaming videos websites what could be a good thing for newcomers
but makes hard to find the principal releases and news. The other pages, menus, and etc looks the
same as Firefox.

USER FRIENDLY.
The navigation works very well and it is easy to find out what you want. Just in some rare situations I had
a little loading time, mostly when I was trying to get access to some "top" listing that probably make a
live request for the database based on the movies rating.
Mobile: Not responsible at all, same website on mobile devices, very difficult to
use the navigation bar and the slider is cropped.

1 Fast, simple and useful

Corporate mi.com

“(...) Xiaomi is an internet company with smartphones and smart hardware connected by an IoT platform at its core. With the
vision of being friends with its users and being the “coolest company” in the hearts of its users, Xiaomi is committed to continu-
ous innovation, with an unwavering focus on quality and efficiency. (...)
”
./about
DESIGN.
Very clean and modern design. The first presentation is a carousel image slider very beautiful and well done. The
little "Mi" logo on the top left corner is easy to see because of the contrast orange colour. The products top naviga-
tion bar has a beautiful transition when the mouse hovers it to a dropdown menu. When scrolling down the home page the user
is presented to some Xiaomi products with a similar design to the dropdown menu, very light, clean and simple, without over
content the page. The home page sells to us the idea that we are welcome to navigate around and through links without
the fear of get lost in tons of information.

BROWSERS.
The browsers results was very similar, the only noticeable difference was with Firefox.
Chrome and Brave have the exactly same output, but Firefox has a little alignment
difference for the navigations labels and the colors are more brighter and less saturated. On the other
hand, the content is not responsive at all, it’s the exactly same layout on mobile devices.

USER FRIENDLY.
The website has a fast response and it's very easy to find out what you want. For instance I tried to find
information about a new model and an old model. They were easily found through the navigation. Very fast
download rate, for tis test I looked up for a MIUI Rom to download, MIUI ( the
Xiaomi custom Android UI ) has it own webpage linked in Xiaomi website. I down-
loaded a 2.5GB rom and the download rate was between 8Mb/sec and
10Mb/sec, very fast.

2 Modern but not responsive

Information medium.com

“(...) Medium taps into the brains of the world’s most insightful writers, thinkers, and storytellers to bring you the smartest
takes on topics that matter. So whatever your interest, you can always find fresh thinking and unique perspectives. (...) A
customizable reading experience, made just for you.
”
./about
DESIGN.
This is not a creative design, very simple and poor with a plain white background, sans-serif black letters and
some thumbnails, a persistent top navigation with a lot of buttons that don't mean anything for new users. The
navigation buttons response is just a very small font weight increase when hovered. The same critic can be applied to
the logo, .The user can feel lost and discouraged to navigate more in the homepage, just the website name "Medium"
on a bold serif letter.

BROWSERS.
The browsers results was very similar, the only noticeable difference was with Firefox.
Chrome and Brave have the exactly same output, but Firefox presented other type font, still sans serif
and it doesn't interfere with the experience, and the colors are more brighter and less saturated.

USER FRIENDLY .
The website has a fast response even though it is only text, we still have database queries. On The other hand, the naviga-
tion is not that friendly, the main navbar has buttons that don't get me to where I want. If I'm looking for design articles
for instances I have click on the last nav button labeled as "MORE", then I went to a page with ALL the categories.
That's kind of annoying because even with subcategories, all the links are big thumbnails and on the same
page. A category list collapsible into subcategories should be more efficient and easier to
navigate. So, I had to make a browser search with Cmd+F ( or Ctrl+F ) to find it. The good
news is that after I find my favorite categories I can add it to my account, the I'll have a
custom homepage with contents of my interest, but still I would like to have something that
encourages me to find out about new stuff. On mobile devices the content is very responsi-
ble, however the navbar is not, is the same as the desktop version which makes the
navigation very hard, this could be easily fixed with a hamburger menu.

3 It can be messy on the first try

Design weberous.com
EDITOR’S
CHOICE

“ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fermentum leo in risus egestas aliquam. Aenean tristique
ullamcorper nibh, vitae egestas enim varius quis. Pellentesque facilisis tincidunt turpis, a suscipit lectus vehicula vel. Vestibu-
lum a justo pharetra nunc iaculis ultricies venenatis vel velit. Donec ut lectus nunc. Aenean cursus orci sed arcu scelerisque
”
./about
DESIGN.
Very clean and soft looking design. It's easy to read and pleasing to the eyes. The colour palette is almost
monochromatic with white and a nice blue. The header has a great aquarium animation with a water flow
effect tracking the mouse and a cool fluid liquid animation between each section. The website presents us
with big content, big letters and very clear messages.

BROWSERS. USER FRIENDLY.

Almost the same on all three browser
with the only exception that on
chrome the navigation font face get a
little thicker but almost impossible to notice.
On every browser the aquarium animation
breaks when opening a dock like Bookmarks
Sidebar or Developer Tools.
Weberous has a nice and navigation,
easy to find the information that you
want. Despite all the animation, the website is
very fast, and when the page is loading
there is a feedback to the user with a
loading animation.

4 Fun, simple and nice

Personal juan-garcia1.github.io/portfolio/

“ Front End Web Developer. Experience in creating HTML, CSS and JavaScript from mock ups, working with a distributed team,
collaborating with QA analysts to resolve bugs, maintaining WordPress websites, creating landing pages and working with
version control.
”
./about
DESIGN.
Nice colors, easy to read and there is no visual pollution. On the other hand, the website has
no button, no guidance, it is lacking of features and information. The “DEVELOPER” water-
mark is almost unreadable and the white background is too bright.

BROWSERS.
The mostly noticeable difference was the background picture on Edge looking
very unsaturated, the projects thumbnails are smaller on Firefox and Edge, and
the “slashs” between the technologies are broken on Edge and especially on Firefox.

USER FRIENDLY.
The website launch takes too much time. The network tab on Web Developer Tools marks that the
website loads almost 12Mb. There is no navigation. On the first time I visited the website I keep
staring the front page waiting for something happen because the is no navigation buttons, bars or
arrows, just three social media icons. The user need to scroll down the page to see the portfolio. There
is no “About”page, no contact links and not even the developer name anywhere
other than in the URL. The user is supposed to hunt all the information through
the internet and the social links. And about that links, they have the same
color as a big horizontal banner, so when they are on the same level, the
icons disappear.

5 It needs some work