These style guides at Desktop, Tablet and Mobile sizes has been created in terms of overall atmosphere, colour scheme, typeface, graphic elements, menu page information, navigation, layout, interactive elements of this website.
desktop_960px.png
File Size: 106 kb
File Type: png
Download File

tablet_768px.png
File Size: 103 kb
File Type: png
Download File

mobile-380px.png
File Size: 100 kb
File Type: png
Download File

 
Overall, the website of 'Derek Boateng' has modern and gentle concept with mild colour scheme and low contrast among those colours. Most elements including graphic, typefaces, are pretty much based on geometrical shape.

In terms of use of colour, mild colour scheme is used through entire website effectively. It has led more soft, gentle atmosphere over the website. A good hierarchy between contents and white background is created by using bright gray colour for each content boxes. Even though all colour they used are very subtle, the user could focus on the content that they are looking at by these considerations. I really like the way how they present the photographs which are low-contrast images with the consideration for their concept.

In terms of the layout of this page, All elements including text boxes, images, and menu are aligned to the center clearly. 

In terms of typeface, sans serif typeface is used through the entire website. Using sans-serif might create better readability, legibility than using serif typefaces on the web. But I think It would be better if they use the typeface a bit thicker for creating better legibility. All texts in menu bar and heading are used in upper case which create unity, but It also makes it look busier with too many stems of typefaces.

In terms of interactive element, I was surprised at the changes that whole menu bar (logo and menu) got smaller when scrolling down the page at the same time. But I think that there are some functional issues in sub menu when cursor is put on text '+WORK' in menu bar. I do not think that sub menu could be scrolled down smoothly. I got a bit confused about whether that is wrong or not.
 
Overall, the website of 'AREA 17' has clean, modern concept with the high contrast among the elements. All elements flow around it to the left. Their concept could be noticed that they have been focusing on typographical aspect rather than graphic.
A good hierarchy is created by differentiating bold, colours, point sizes, lines, layout, and so on.

In terms of use of colour, using minimal colour scheme is used through entire website effectively. Uses of minimal colour including black, white, gray, navy and red emphasise photographs in full colour. Furthermore, a high contrast is created between black at the side of the website and white background. A hierarchy is created by some texts in navy colour. But I think It would be better if they use less navy colour for making the website a bit less complicated.

The layout of this web page was really interesting to me. All elements including text boxes, images, and white background are aligned to the left. Furthermore, Thin red line over the page, the direction of that are intended that the website could avoid flatness. But I think the position of 'Home' between menu bar and body contents distracts from reading a whole web page.

In terms of typeface, sans serif typeface is used through the entire website. It creates a good readability, legibility with a good hierarchy. Using serif typeface, italic, bold creates the good hierarchy.

In terms of interactive element, the photographs and texts stay highlighted in yellow when cursor is put on the buttons in menu bar, any link. The users might notice shortly if those texts with yellow highlight could be part of link.

 
Overall, the website of 'The Drop Studio' has simple, modern, strong concept. The clear navigation through an entire website is created with a good hierarchy by differentiating colours, font sizes, underline, layout, and so on.

In terms of use of colour, a grayscale colour scheme is used through entire website. Furthermore, a high contrast is created between black box and white background. The photographs might be well considered for their overall concept by using gray background, and low contrast (greyish photographs). However, the colours of social media icons are dominant compared to other contents on this website. It could be changed to simple colour which suits to this website or have rollover image effect.

In terms of typeface, sans serif is used for both heading, body text. It creates a good readability, legibility with a good hierarchy. But underlined text in their subheading and tiny texts in dark gray at the bottom might distract from reading contents.

In terms of layout, most elements aligned to the center and some text boxes are left-aligned. I assume that the whole shape of text alignment on the first page is intended for the shape of raindrop.

In terms of interactive element, a variety of works they have done is shown with slideshows on the first page. When the specific image is clicked, it takes the viewer to the work details they chose. The photographs are faded out when cursor is put on that picture. The users might notice if those images could be part of link.