As a task given to us for over the half-term between our latest and current project, I have been given the task of reviewing several design sites for the purpose of understanding what sorts of ideas are used within modern web design.
Site 1: Carter Wong – www.carterwongdesign.com
What: The site itself (like many of the others) is a website owned by a professional design company who work with both small and big businesses alike, creating various artwork and designs for things such as logos or product packaging.
Who: The site is likely aimed towards their current or possible customers, of whom would purchase their services in order to get designs created for them. From the information they give, they aim themselves towards providing any form of industry looking for designs. The progress of their previous big name customers’ (Formula 1 and Heartbrand ice-cream being to prime examples) have been shown, likely to show how well the designs are doing and to incite smaller businesses into using their successful services, as they will see the site as being very profitable due to its nods to successful works and its no nonsense design.
Page Size: Pages are most average in length, with some pages being 2 to 3 screens long, depending on how much information or images are on the page. There are exceptions of several pages, such as the home page, which are fairly short (with home page being only a screen and a half worth on the computer I was using. I find the size use for each page suitable as they allow all information to fit accordingly.
Images: Images consist of photos taken of the company’s previous works, as well as a few other photos of various members of the site’s staff members (plus any other miscellaneous images depending on page).
Type: The type used on the site consist almost entirely of a Roman styled font that is used for titles, with some types (e.g. main paragraph text font) being more serif-less than others.
Color: This site has a very simplistic style and color scheme, using a white, grey and yellow pallet with very solid shapes. The solid shapes make the page appear more tidy and professional, as would be expected from a professional business.
Navigation: Navigation is very simple within the site due to the few menu links it has available, given not much for the user to get lost or confused.
Gimmicks: Other than a slow moving slideshow containing quotes and photos of their work located on the home page (used to show off their most recent works and/or mottoes on the first page), I have found no other forms of gimmicks anywhere on the site. I believe that due to the company being a very professional and serious in their work, they have likely tried to divert from any major gimmicks in order to retain their business-like approach.
Adds: N/A – I have found no adds on the site (likely due to the site itself being a advert for the companies designs), therefore I cannot give a review for this subject on this website.
Design Points: One element about the site that I found interesting was the use of a sideways menu bar (which goes from the top left side of the page to the other), a method of menu layout which I have not seen before. I find this interesting due to that fact in general, “that I have not seen it before”, and in turn, am more interested in its use within the webpage.
Site 2: Spin – www.spin.co.uk
What: The site appears to be another professional design website filled with the works of the company, likely trying to attract more customers for their design services.
Who: Like the previous site, it appears to be aimed at possible customers who would use their services. It also appears to use the same “professional” design as used by some of the other sites, albeit with a different artistic style, which gives it a more modern appearance compared to the previous. (Due to the similar styles in their attempt to incite their audience, I will cut this shorter) The site uses the tactic of showing previously made design work in order to show their audience what sorts of work they create as well as how well it is made).
Page Size: Page sizes are fairly average, with each one varying in size depending on the amount of content, which I find suitable for many of their pages. Although, I have noticed on several pages that there is a large amount of excess space at the bottom of the page that contains no content. I am unsure whether this was unintentional or not.
Images: The site contains a large amount of well taken photos of both their past/recent designs as well as other items (products, manuals etc.). Almost all photos are taken in (or edited into) a darkened background in order to fit with the dark color-scheme of the site, which I find very fitting and effective at preventing the images from diverting too much from the overall design.
Type: All type appears to be in a serif-less font (such as Arial) that is done mostly in a pure white or grey text color, likely to make it as easy as possible to read against the dark background of the page. The style they use for the text I find is very good at making the site feel very modern and clean, which I feel may have been their intention.
Color: The site is very in coloration, consisting of mostly dark grays and blacks for the text/photo boxes and borders. The dark theme of the site makes it seem somewhat serious and well prepared in my opinion, as it makes it appear very business-like. I think the use of color is very fitting for this reason and much more supported thanks to the photos (as mentioned above).
Navigation: The menu navigation, while very interesting in design and function, is somewhat confusing in my eyes, as in order to locate certain pages, you must constantly open up each menu option to find the one you are after, and the appearance of the menu itself can feel messy at times. One very interesting design choice for the navigation however is that it does not directly send the user to another page by sending them to another page, but rather it loads new content on the same page, preventing the need for constant page changing, and possible loading lag.
Gimmicks: Unlike sites I have seen before, this site uses a menu that acts almost like a side toolbar or drop-down option menu, as it pushes the page to the side to open up it’s branching menu. Each page option has its own direction animation that helps point the direction of where the users must look. I find that this use of menu design may be useful within the future. There is also a fair few other animations for things such as the loading between page switches.
Adds: N/A – No adds on site
Design Points: Possibly, the design elements of this site that I take the most interest in are the animated icons and the use of using the same page with switching content. Having animated features for a menu or any other options may give a site much more interesting interaction with its user, as it may make them appreciate the site design a little bit more than without it. The use of switching content between pages may be a very useful idea for latter on for preventing loading time and making the pages seem more interesting.
Site 3: Why Not Associates – www.whynotassociates.com
What: Another business site dedicated for the purpose of creating content for other business, government and the like, similarly to the previous, although, this is the first site I have seen it to mention that it also does work for governmental areas, not just other businesses.
Who: Despite being aimed towards even government based operations, the site does not show any sort of design that would suggest such, with it looking incredibly amateur and lackluster in layout. There is no evidence within the design to suggest who the site may be aimed towards, and one may likely not even know unless they read the correct pages.
Page Size: Average page sizes are very unfitting and random, with some being cramped and awkward, while some contain massive amounts of excess space, with a prime example being the “about us” page, which despite only being 3 (average sized) paragraphs
Images: Images are very basic at times with some being of lower quality. There are some some images of slightly higher quality, but they easily clash with the blank background
Type: Type appear to be entirely made of a Arial-like font, with no forms of diverting type, making the text appear very boring to look at due to its simplicity and repetitiveness.
Color: There are no colors used within the sites design other than the orange color change an option on the menu obtains after one hovers or selects it. This makes the entire site appear very empty and bland, as there is nothing other than images to break the empty white pages.
Navigation: Is also very basic. The page menu is a very small list of pages that has not text box or border. The menu itself is also crammed into the corner other the page with small type, making it seem very lazily made (as it actually made me believe that the page had not loaded properly when I first saw the site). One of the pages I tried to enter on the site did not even open (page on “clients”), as it would simply crash the page saying that the page had timed out. I am unsure whether or not that this is a fault with my computer system or the site itself, but I have not noticed this problem with any of the other pages I have seen.
Gimmicks: No noticeable gimmicks found.
Design Points: I have found no design elements used within this site that I can deem of any use or help.
Site 4: Pentagram – www.pentagram.com
What: The world leading independent design consultancy, with branches reaching from New York to Berlin. The information they give on the site talks about how they do designs for practically everything from architecture, books to interiors. The site supports this claim with a very professional and well made design and layout across their website.
Who: Due to the great range and size of their design services, this site can be aimed towards almost any sort of business, whether it be independent or a multinational corporation. The site’s very neat and colorful design make it very easy for users to tell it is a very professional business in its sector, with care towards it’s works.
Page Size: As with some of the previous websites, many of its pages differ in size depending on what and how much content is located within each page, with some being fairly long (image based), and some being only a single screen high (text based – e.g. “about us”). However, unlike the “Why Not Associates” web-page layout, each page makes the most out of its images and type by making them actually fit well into each page. While pages like the “about us” page may have some excess room left, the type has been increased to a size that actually makes it look almost fine anyway, as it isn’t too small, yet also not awkwardly big.
Images: Images consist mostly of photos of their previous or current works. The photos themselves are of high quality and are placed out in a neat and tidy layout that makes viewing them easy on the eyes. The images help show how well their past work has gone and it help incite new or current audiences into looking at their services.
Type: Type within the site consists mostly of another Arial-like font that is black on the white areas of the the page, and is colored white on the red areas of the page. The title font itself is done using an older looking font with serifs (although I cannot tell what font the type is, I know that it is clearly not Roman, due to the more curved shape of the font).
Color: Unlike the previous sites, this site consists of mostly whites and reds, with the reds giving the pages a lot more color and vibrancy than the color-schemes used by the others. This makes the page look a lot more attractive to look at and prevents it from looking dull or bland (although this is also supported by the images as well).
Navigation: Navigation is fairly easy to use on the pages. The top menu bar contains page links to the most important topics of the company, such as information about them and their partners. There is also however a drop-bar for the sites previous works located at the bottom of the screen, which prevent users from having to go to a different page just to see the most important images they are looking for.
Gimmicks: There are many animations for each menu option, mostly consisting in page transitions. The Logo/name of the site itself is also an animation, as is shrinks from its full name to just it’s initial (P) in order to allow the menus bar to shrink when the user scrolls downwards.
Design Points: I found it’s many uses of animation to be its most interesting elements as I think that they give the pages a burst of life whenever the user interacts with an option. I may use some ideas of animation from this site for my own page designs in the future, in order to also add life to my work.
Site 5: Big Fish – www.bigfish.co.uk
What: Unlike the previously reviewed design sites on this list, this website appears mostly devoted towards the designing and development of products from what I have seen of their information. The site easily shows this work area through the images they place throughout the pages of the site and the type they use to explain themselves.
Who: The site is obviously aimed towards marketers and other products merchants due to the fact that they clearly deal in the design of products (as mentioned above). The design of the site supports this very quickly, as I immediately gained a faint idea of what the site produce just from looking at the main home page.
Page Size: Page sizes are fairly short for most of the pages I visited on the site, with the exceptions being the image galleries with the previous works of the company. Each page is well done in layout and spacing, with little to no amounts of excess space within pages, as I find that space within a page to be very unattractive and unnecessary towards the purpose of that page.
Images: Images on the site are of high quality and help show perfectly to users exactly what the company does and how well they do it. They use a similar tactic to Spin (site 2) in that the background to almost every image possible has had its background edited out or changed to white in order to match up with the blank background of the site, which prevents any of them from clashing colors with it.
Type: The type used within the site seems to divert very oddly depending on what the type is for. Most type on the site is serif-less and modern look as a whole, making you think that they wish to have a modern looking appearance towards their audience, but there are certain places, notably the sub heading or page titles, where the type is more classical or old fashion, with a typeface that uses serifs. I find this clashes somewhat with the overall design of the site due to it having both modern and older type rubbing against each other.
Color: The entire site consists solely of whites and grays, with only black used for the type itself. This would make the site look incredibly bland if it were not for the images to break up the spaces. This is also another aspect of the site that ties to give a modern/classical appearance that often clashes against itself.
Navigation: Navigation around the site is simple and to-the-point. The menu bars across the top of the screen each give useful page links for the company and each menu heading opens up sub menu options to allow users to find more specific titles on the site.
Gimmicks: One noticeable gimmick on the site is the use of an animated menu bar at the top of the screen, which has the highlight (the function were the menu option you hover over changes appearance or shade/color) move around as if it were elastic. They, like the first site I reviewed, also use a slide show on the home page of the site in order to show a couple of their most recent designs off-the-bat.
Design Points: While I did not mention it within the first review (as it was not as obvious in function as this one), I may consider also using a slideshow function on my homepage in order to give new users a good representation of what the site is about on the very first page they may see.
Site 6: Studio Cuculic – www.studio-cuculic.hr
What: The site explains in clear detail that it is a design website that works with both museums and galleries, as well as marketing businesses such as packaging. The company seems to have a very modern tone with many of the artwork they have displayed being very pop-art-like or abstract.
Who: As mentioned above, they are aimed towards both museums and product companies, so these two groups would be their main target audience. From the appearance of their site (notably their home page, one can tell that they are the sort of site who work with art galleries or museums, but there is not much evidence shown to suggest that they also work with product design, as their gallery and home page consist mostly of artistic designs rather than products.
Page Size: All pages are considerably small, which is very noticeable due to the sheer lack of pages in general (as it only has 3 main pages in total: a gallery, a contacts page and a studio page (about us page)), making the entire site seem almost tiny compared to any other. Pages also suffer from the same problem as the Why Not Associates site in that it contains a massive amount of empty space on 2 of its 3 pages (studio and contact), with even more excess space than WNA’s site.
Images: Images in general are of high quality and do help give an audience good look at what sorts of works they can produce and how well. The home page does use an interesting technique with their images by placing a grid-like formation of images on the screen, giving
Type: The type is entirely composed of a boring, serif-less font that comprises the entire website. The only form of type that is not completely samey is the company logo/name font, which has it’s own thin, stylized typeface applied to it that makes it the only piece of writing to stick out on the page. Although, this does not save the type itself from being somewhat bland.
Color: The site is completely white, with the only exception being the use of black type. This gives the site a somewhat modern look with the layout of its images, but at the same time it also causes it to look very empty and boring, which is a massive problem for any art/design site, as its main goal is to keep up a good image of your designing capabilities in order to incite more audience members to your work.
Navigation: Navigation is extremely simple due to the lack of pages to visit. Instead of the usual top menu bar, this site uses a listed menu panel a on the left side of the page (an official example of this could be sites such as Wikipedia).
Design Points: I have found no design elements used within this site that I can deem of any use or help.
Site 7: Design Gruppe Koop – www.designgruppe-koop.de
What: From what I can tell of the translated home page of the site, this website belongs to another design company who are based around the creation of artworks, such as informative sculptures and product labeling. However, due to the lack of a visible company information page, I cannot be certain of anything they may do.
Who: Their audience areas seem to based businesses working on various projects (products, signs etc.), as well as exhibits for various museums across their country. (again, due to the lack of an “about us” page (as well as several translation errors), I cannot be sure on what sorts of audiences they aim to intice with their designs. What I can muster from the audiences I can see fits very well with their use of design, as the classical yet modern presentation of the site nicely fits with an image of an old fashion/classy museum, while still retaining their modern time style.
Page Size: Page sizes on the site seem to be fairly short on most pages, some barely being even a screen and half tall. Each page does however, use all the space they have very efficiently, as I have not seen any excess space on any page I have seen on the site, which is a very welcomed visual for me.
Images: All images are of high quality, allowing users to see each of their works clearly. While the images do not have the same use of background techniques for preventing an awkward clash between an image and the background, the rectangular (grid-like) layout of the images helps in making them not look out of place and even gives them a tidy pattern of sorts.
Type: The type used within the site consists almost entirely of a serif based font, which somewhat resembles a bold Roman type. The only exception to the type is the logo/name of the company displayed at top of the screen, which is made of a serif-less font, which does somewhat collide a little with the use of serif fonts.
Color: The site consists of a white background within the centre each page, with a light brown boarder surrounding the left, right and bottom of each page (as the top of the page is home to the white menu bar). The use of this boarder really helps the pages from looking empty or bland as they take up the excess space of each page and then add a dash of color to each one, which makes them a lot nicer to look at than a pure white screen.
Navigation: Navigation across the site is fairly easy to do, as the menu bar contains some of they most key pages of the site (minus the mentioned “about us” page), such as the latest projects and their past works. Each page also contains several sub pages for each topic located on the left of the screen that allows users to access more information about the page they are looking at.
Gimmicks: Some of the grid like images on pages such as the most recent project or gallery, have animated highlights that display the name of each project on the image whenever the user hover over each one. This allows the creators site to save up on room on each page as well as make the pages themselves feel a little more interactive. (This could be a useful idea)
Design Points: I find the use of animated highlights for the image titles as a very interesting and attractive way of displaying the names of images or projects without having to put them outside of them and take up room when they can save it for more content.
Site 8: Hat Trick – www.hat-trickdesign.co.uk
Site 9: NB Studio – www.nbstudio.co.uk
Site 10: Segura Inc – www.segura-inc.com