Site Analysis for Khanderaya Website

By Nicholas Arvanitas

Proximity
Proximity is the idea that ideas or headings that are related should be closer
together than those that are not. Studies have actually shown that people think
items are related based more on their proximity than other defining features like
color.
I used proximity in my website by having all the menu items on the first page be
grouped together. I also grouped together definitions, and application forms. You
could also stretch that I grouped together the first 3 navigation bar items since that
theoretically that’s what people would want to look for first when visiting a
restaurant page.
Alignment
Alignment is when things all stick to an invisible horizontal or vertical line rather
than being sporadically placed all over the place. View the Space Jam website for a
good idea of how not to align things on a website. (heres a link for the lazy
https://www.warnerbros.com/archive/spacejam/movie/jam.htm)
I used alignment in my website with items like the navigation bar by making it a
block element and floating it to the left. I also aligned my images and iframes with
my text. I could’ve done a better job with being consistent about what I did and did
not indent.
Repetition
Repetition is essentially consistency in websites. Parts of a website have been
repeatedly placed in the same location. For example the footer at the bottom, or the
nav bar at the top. It’d be weird if you made a website and these things were
switched. It also refers to the having similar styling. People would be confused
about what’s where if the website isn’t consistent.
I used repetition when I did my CSS sheet. I made all my h1s the same, h2s the
same, P’s the same, etc. I also followed along with the general consistency of other
websites by having the navigation bar at the top, having a scroll function on a
website, and having a footer with extra information. If I had more of a mobile
website I would of put the hamburger menu in the top right corner because that’s
also consistent with other mobile websites.
Contrast
Contrast refers to the difference in color. If there is a lot of contrast between items
then generally people will think that there is more of a difference. It also helps
your website be more accessible for those who are visually impaired.
I used contrast in my website on the navigation bar with the orange background
and the black text. Also with the hover function I had to change not only the
background color, but the color of the text also since my hover background text
was too close to black. I also used contrast when you hover over the links to other
websites. Instead of the normal red it’s a bright purple color.
Typography
Typography is the style of the text you use. Right now im using the font “Times
New Roman,” which has little serifs which make the letters glide together. Serif
fonts are popular in body text or p tags.
In my website I used all the same text, however I did have to weights of font. With
my h1s and h2s (aka titles) I used the thicker font so it stood out more than the
paragraph tags.