Website Type

As possibly one of the most important design aspects of what will be my site, I decided to do a little bit of playing around with what sort of type I may be after for my sites design. However, due to the limitations of Wix’s type library I will only be able to use any type that they have available for use.

I am currently planning on using as simple and easy to read font as my main typeface for the site, as I want all viewers of the site to be able to clearly read and understand every word within the site, and not have any of them misread or not understand something that I have written just because I used a certain typeface. The most likely choices I currently have for main typefaces are Arial or Times New Roman, as both are commonly used and understood types that are an easy use for a simple font.

Out of the two however, I think that I will be more likely to choose Arial type over Roman. Arial is a simple, modern typeface that I could use should I decide to go with a more modern style for my website, which I am more likely to do scince I do not really consider old fashioned or classy my personal style, and I would much rather have a more cleaner font (i.e no serifs).


Mind Mapping

Before I begin to do any further practical work into this project, I have quickly drawn up a mind map in order to fully understand what kind of website I am trying to create and what aspects am I considering to implement.


I have looked at several notable aspects that may be of greater importance later down the line of this project, including pages, themes, features and the methods of producing the website itself. I will likely look into further detail on each subject within the new future.

Carlos Garde-Martin Workshop

Last week we were present for an interesting group activity held by a professional illustrator (for hire) who came into our class to give a bit of an introduction to his workshop, as well as try to teach us interesting new ideas and techniques along the way.

Durin jis presentation, he gave us various interesting tasks in order to test our creativity and ability to think divergently.

Today I had a fair look at a website recommended to me for the purpose of creating my own website for this project, with the site itself being called Before I made any certain decision to use said site creator, I decided to have a quick review of the site in order to see how effective it could be for creating my own site gallery, and what sorts of features that it will have that could be of use for me and any viewers of the gallery by itself.

Screen Shot 2016-02-26 at 09.18.07 from what it says, is a free-use website that allows users to create and develop their own functioning websites for whatever sort of function they want. The site houses website of a greatly varying amount, with site categories ranging from business to illustration. The amount of options for site designs was actually a big surprise for me, as I never expect a free site such as this to have so much content.

Screen Shot 2016-02-26 at 12.11.42

Among the categories however, I found possibly the most important and useful one among them, the “Portfolio” category. This would be the type of site layout I would use for my project, considering that it is literally made for this sort of task.

After selecting this category, I was greeted by a collection of various design and layout web designs for different types of portfolio websites, with design layouts made for photography to fashion. While many of them seem very interesting in appearance, I have taken the most interest in the “Graphic Design” or “Illustration” layouts, mostly due to their fitting and interesting designs. While I may not be certain about even using this site for my project, it is very likely that I will end up using it thanks to its clever and helpful resources and functions.

UPDATE: After having a second look at the collection of categories, I found another page design that I believe that I may intend to use should I Decide to go with this method of creation. The new design is called “Creative Portfolio”. Like the previous designs, I really enjoy the overall design of the layout, but I noticed that this one had noticeable use of social media links as well as an option to email the own of the site strait from the homepage.

Screen Shot 2016-02-26 at 12.09.21

Today I learnt about a new website that may assist me in understanding the programming side of web design just a little more, just in case I find myself in a situation where I must know how to use certain functions or actions. The site itself is an online web developer website which contains information, references and tutorials that relate to various web designing topics, such as HTMLs and JavaScript.

Screen Shot 2016-02-24 at 09.25.04

Here is a quick attempt of me using HTMLs on the sites practice function, which allows users to play around with an example HTML with basic codes and actions:

Screen Shot 2016-02-24 at 09.52.40

Here I am going to use the HTML (on the left) of this test page to manually edit the names/content of the header and text of the page on the right.

Screen Shot 2016-02-24 at 09.52.49

First, in order to edit the text on the webpage, I can select the text from the HTML (as highlighted above).

Screen Shot 2016-02-24 at 09.54.21

I can then edit the HTML text to what I want by simply replacing the old text (or adding new text) within the same place.

Screen Shot 2016-02-24 at 09.53.44

Now by clicking the “See Result” button at the top of the page, the example page has now been updated to contain the new text I placed into the HTML.

I found this site as quite helpful in trying to have an understanding how (if only just a little) to use HTML codes to edit my website. While


Half-Term HW – Site Reviewing

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 –

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 –

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 –

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.

Adds: N/A

Design Points: I have found no design elements used within this site that I can deem of any use or help.

Site 4: Pentagram –

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.

Adds: N/A

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 –

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.

Adds: N/A

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 –

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).

Gimmicks: N/A

Adds: N/A

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 –

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)

Adds: N/A

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 –



Page Size:







Design Points:

Site 9: NB Studio –



Page Size:







Design Points:

Site 10: Segura Inc –



Page Size:







Design Points:

New Multi Project – Web Design (1/2)

With the previous project completed, we are now moving into our newest project, and possibly one of the most important/useful tasks we will receive within this subject: website design.

Website design is one of the most sought after jobs within the design industry due to the immense size that the internet has grown in recent years, and thus the requirement for people capable of designing websites for it have begun to boost higher and higher. This project will help us develop our own understanding of the creation, design and functions of our own site.

From what the brief tells us, the aim of this project is to create our own working website of our own design, which can house all of our portfolio design work effectively. The site must also be easily update-able, as we will of course be adding more and more work over time, so we cannot make any of the more designs we use permanent, as it will cause difficulties later down the line of the projects.

Book Cover Evaluation – PMI

With the book cover now complete, I shall now give my evaluation on what I think went well and wrong with this project, as well mention what aspects I thought were interesting.


P – In terms of what I thought went right with my work, I am very happy how the overall design of the book turned out, and how the simplistic style I used created the child-friendly appearance that I was after. While it was somewhat difficult creating the designs themselves from scratch (namely the characters and bar-code), I am happy that they turned out as well as they did in what little time we had. To me, I believe that the use of the font I chose was very fitting for the overall design and theme (which ended up being cambria due to the lack of calson, my originally planned font), and that it gave a great old fashioned look to the front page and spine.

M – I feel as if the type I used for the back cover was somewhat lackluster, and that it could have used a different font to make it more effective for a children’s book (use of more modern/straighter font for possible improvement). I am also a little disappointed in how the spine did not quite fit together with book I used for its body, making the edges of the front and back covers bleed in a fair bit. This may have been due to some slight miscalculations with the measurements, or due to a little confusion I had when trying to measure the book’s width.

I – I think that the way that the type I used alongside the designs of the front cover seemed to fit in a way that felt very odd to me. During the previous projects I would think about choose a type that felt fitting to me and left it there. With this cover and type, for the first time I felt as if the simplified color-scheme made the front more effective in my eyes, as it still has a child friendly design, but retains the original book’s old fashion heritage.

Creating the Book Cover

Today I created and finished the design for the book cover project.


Using Adobe Illustrator as a base design tool, I created the designs for both the front and back covers of the book (which I later placed into InDesign), as I find Illustrator as the superior software for creating actual artwork when compared to others like InDesign, which is more geared towards the creation of page layouts.

Mostly keeping to the sketches I drew up previously, I created my designs for the front/back cover characters and background, after which I fitted into a ready measured InDesign file which I would then on use to insert the type and spine-work (due to the software having a much larger type library).

After fitting the designs, I inserted the text for the back cover by copying it over from a Word document with the spellchecked text at the ready.

With the spine and type complete, I printed out the cover and placed it over the book I used for its measurements, which would serve as its main body.