Website Design Assignment Evaluation – Unit 44

Research into Portfolio Websites and the design thereof, as well as the technical aspects behind the creation of them, was conducted in the initial stages of the assignment. Regarding the technical aspects I investigated both the programming languages and coding styles used to create web pages, as well as how the structure of the world wide web operated, with an emphasis however on the communication between the client-side and server-side in relation to web development and access.

The research into Portfolio Websites and their design allowed me to identify good and bad elements, of which I then used to inform my own design process; avoiding bad design choices while ensuring that the good elements of design that I have analysed help inform my own work. The combination of written analysis and mood boards create a wide coverage of the design elements, allowing one to analyse and decipher the thought process behind certain design decisions, of which help inform one’s own work.

This slideshow requires JavaScript.

After having completed my research I moved onto sketching out my designs, ideating various wireframe compositions, flow-charts, pages, and design styles, accompanied by annotations and notes to further help the ideation process. Once I had settled on a design style; minimalistic and elegant, utilising negative space and clear font styles, I moved onto digital wireframing using Illustrator.

In this stage I was able to further fine-tune and trouble-shoot layout issues, using rulers and measurements to establish the desired composition and style. Once happy with the over-all layout I moved into Muse to begin creating the finished site.

For the settings of the site I made sure the Max Page Width was 1200, the Min Width 320, and the Min Height 1000, with there being 0 for Margins and Padding.

Inside the document, breakpoints were created at 450, 960, and 1200, rough estimates of different device screen sizes. This, in conjunction with Responsive Width and Height settings, as well as Pinning and composition changes on certain breakpoints, helps to create a website that contains Responsive Web Design elements.

Starting out with the actual website design, I made sure to use a Master page first. On this master page, I made sure to include all the elements that I wished to persist throughout every page on the website, these being; my name, short summary of my ‘position’, and the categories in the site.

To create this ‘header’ I created text boxes, and after some experimentation with font, settled on Batang and Batang Che for my name and sub-heading. Arial was used for the Categories section, with careful placement of each word/text box with the help of rulers. Once happy with the placement of these elements, I created a box that allowed me to hyperlink certain areas of the web-page with other pages.

After testing out the different break-points I realised that the numerous text-boxes were not aligning properly when resized. Therefore, I went into Illustrator and created a PNG of the categories section. Once completed, I moved back into Muse and placed the image, creating multiple boxes for each individual word/category that linked to their relevant pages. To make sure that the Responsive elements of the webpage worked, I ensured that Responsive Width and Height were ticked, certain elements were pinned in the right places at the right breakpoints, with composition changes being made in the relevant breakpoints as well.

As mentioned before I opted to go for a minimalistic approach for my portfolio website, allowing my artwork to be the focus. The Home page allows one to navigate to the Portfolio, Services, and About pages through interaction with the images presented. A certain hierarchy is established on this page, and persists through the others, with the placement and size of the images helping to create a composition that grounds the page and guides the eyes; this is especially true once the font, and placement thereof, is taken into consideration.

The inclusion of a pure white background, with the header parallaxing behind due to the careful placement of layers, helps to create a readable and easily digested format that allows the artwork and information presented to be the focus.

I decided to split my portfolio up into two sections, ‘Paintings’ and ‘Drawings’, with preview images at the main portfolio page that entices the viewer to investigate my body of work. This does, however, create one extra click for one to access my artwork. Although, the structure of this system provides the user with a degree of control, placing in their hands the illusion of choice as they decide which half of my gallery to view. Not only that, but the other gallery is easily accessible from the sections presented near the top of the page, with the current page highlighted in bold.

This type of design, one where the user always knows exactly where they are on the web-site and how to navigate back or to other pages, helps to create an enjoyable experience for the person viewing your work. The presence of good User Experience design directly correlates with the careful design of the User Interface, allowing all who happen upon the site to understand exactly the purpose of it, as well as how to navigate the pages.

The gallery used to display my artwork in my portfolio is a Responsive Lightbox Widget supplied by out lecturer, allowing use to upload thumbnail and full-sized images into a gallery that adapted to the web-page’s size and orientation. The resizing of the images for use as thumbnails was done in Photoshop, with short descriptions being made using the Widget’s menu. To ensure that the gallery operated smoothly, a separate element had to be added first, allowing the gallery to work as intended.

This slideshow requires JavaScript.

Lastly, I included various information regarding my services, skills and proficiencies, about myself, as well as ways to contact me.  For the Contact page I used the built-in Hyperlinking functionality in Muse, highlighting the relevant text and adding a hyperlink to an email address or external web-page. Once completed, I published the site to Business Catalyst after naming it ‘ryannothard-portfolio’.

This slideshow requires JavaScript.

The link to the website is here:


Website and Browser Research – Unit 44 Web Design

A web browser is a ‘client’ that is run on your computer, which is able to contact, and request information from, web servers. The information (usually pages constructed using Hypertext Markup Language [HTML]) that is requested via an HTTP/S query (a query language is sometime used) by the client is then located on a database (a collection of organised data) by the web server (however, if the web page is a simple HTML document then a database would not be required), and sent to the client/web browser, which then displays the information. The location of the information requested is usually denotated by a URL (Uniform Resource Identifier), an example being, with a protocol commonly appearing at the beginning of the URL [examples; HTTP, HTTPS, or FTP]. However, one does not need to type out the full URL, instead, a shortened version will usually suffice.

When searching for a domain name, specifically the root of a domain (such as, the webserver will initially attempt to find a page named index.html (or .htm/.php/.asp). Index will usually be the name of a domain’s home page.

Other than HTML, web browsers may make use of other technologies and techniques such as JavaScript, Bootstrap, AJAX, and CSS.

HTML (Hypertext Markup Language) relates to the coding language one uses to create a webpage. Utilising hyperlinks and the ability to alter text, it is a powerful and intuitive way of creating an interactive webpage. HTML-based webpages are comprised of code, usually in short lines, that are typed into a text-file, saved, and then viewed through a web browser. The information one is presented with is no longer strings of code, but instead in a much more coherent visual format. This is due to the web browser, on the client side, rendering the information it has received for the user.

CSS (Cascading Style Sheets), on the other hand, is a language that deals with the layout and formatting of documents created using HTML, with it handling certain things such as; colours, background, images, and fonts. CSS functions, as a language, extremely similarly to that of HTML.

AJAX (Asynchronous JavaScript And XML) is not a programming language, rather, it uses a combination of JavaScript/HTML (displays and uses data), and a browser built-in XMLHttpRequest object (requests data from a web server). AJAX enables web pages to update segments/parts of themselves without the need to refresh/reload the entire page. This is achieved through its ability to exchange data with a web server in the background, updating certain areas asynchronously from the rest of the web page.

The scripting language JavaScript enables the user to create content that updates dynamically, usually requiring a foundation of HTML and CSS coding and structure to be in place for it to work optimally.

A common framework and toolkit used for HTML, CSS, and JavaScript is Bootstrap, which allows the user to create responsive, mobile-based web pages utilizing a component library. It makes use of Sass and jQuery for its various components and plugins. Bootstrap enables a user to efficiently prototype and create responsive web page designs, allowing there to be a dynamic cross-platform functionality present.

Another framework one may use is AngularJS (JavaScript), of which can be added to an HTML page using a <script> tag. AngularJS allows the user to extend HTML attributes, as well as bind data to HTML.

A cookie is a file that is stored on a web page user’s computer, containing data regarding a specific client and website. The information stored in that cookie can be accessed by the client computer or web server, usually under the intention of personalising web pages towards the user.

HTTP, HTTPS, and FTP are all protocols that contain certain rules of information exchange (usually between web browsers and web servers/clients, with HTTPS being a secure and encrypted connection. FTP (File Transfer Protocol) is the protocol used by clients and web servers in the transfer of computer files on a network.

CMS is a Content Management System, of which allows you to control the content of your website, enabling a user who has little experience in programming languages the opportunity to easily and efficiently edit their website.

PHP (Hypertext Preprocessor) is an open source scripting language that operates by interacting with servers, which execute the scripts it presents, returning information to the browser as HTML.

SQL (Structured Query Language) is a language that allows you to access and interact with databases. RDBMS (Relational Database Management System) is the basis for SQL, which stores data in objects called tables, these being collections of data entries that relate to one another, with the table utilising rows and columns to help structure the information.

ASP.NET is a framework that allows a user to create dynamic web pages, a highly desirable feature due to this era of multi-platform design for webpages/sites.

Regarding the specific parts of a website, particularly the combination of both visual and functional/technical aspects, there are a variety of components one has at their disposal.

The header and banner of a site displays to the user what the website is about and what kind of content they may expect to find on there, with the logo and name of the site’s owners displayed prominently, supporting the branding of the site and organisation it represents. The header and banner usually persist throughout the navigation of the website, staying fixed (referred to as a sticky menu), with navigational bars and categories allowing the user to efficiently travel throughout the site.

A ‘hamburger’ button is usually  comprised of three horizontal bars. Upon clicking on this icon, a menu usually appears. While useful for decluttering web pages, it may provide User Experience issues on mobile devices/platforms due to the dynamic design elements that may overly clutter the screen when opened. Adding to this issue, the usual positioning (as well as the extra click required to access certain categories/navigational menus) deters users from continuing to use the site.

A gallery is extremely useful for portfolio websites, with a visitor of a site being able to view smaller thumbnails of your work before accessing higher resolution versions of them. A slideshow or ‘lightbox’ widget may be used for this kind of content, allowing you to showcase your work in an easily accessible format.

Using social media icons and links (hyperlinks utilising HTML) will allow you to direct users to other web pages, enabling you to expand your online presence and increase traffic through a variety of sites and profiles.

A footer allows you to have certain information persist throughout your site, whilst remaining unobtrusive, and provide an area for contact information to be always present during navigation.

The main image types that would be used on my portfolio website would most likely be JPG’s and PNG’s, with a .png having the added advantage of transparency. This will allow me to create images and input images that integrate seamlessly with the rest of the web page. The file format .gif will allow me to upload animations to the site that play constantly, providing a clean way to improve the content and User Experience without cluttering the site with links to external video platforms.

However,  .svg file formats will be extremely useful when it comes interactive and responsive design, enabling me to create vector images, featuring animation, that may be interacted with. My logo or categories/sections may use this format, providing an opportunity to create interesting interactive and animated designs that help make navigating the site an enjoyable experience, as well as perpetuating and reinforcing my own personal branding.

Font Awesome is a site that enables users to easily download and use icons that are widespread and easily recognisable at various sizes, allowing you to efficiently create a coherent site without needing to manually create every single icon. Not only that, but it helps to ensure consistency regarding the visual style of the icons and components within the web site.

The images will most likely be hosted on the web server itself, with video being embedded via links through external sites such as Youtube or Vimeo. Utilising these external services to host videos takes strain off the web server, as processing that kind of information may cause the web page/site to slow down, thus providing a poor User Experience.

Inline frames allow you to embed external documents (this includes web pages) within an HTML document, enabling the user to add more content without cluttering the web page. An example would be thus; http://a.

Responsive Web Design refers to the method used to create a website designwhich enables it to be displayed well on a variety of screens, devices, and platform sizes and orientations. In order to create a responsive design for a web page, one must use HTML and CSS to enable the content to react dynamically to different screen sizes and ratios.



Beal, V. (2018). What is Query (Database Query)? Webopedia Definition. [online] Available at: [Accessed 19 Jan. 2018].

Bem, N. (2018). CMS Website Design (Content Management System). [online] Available at: [Accessed 19 Jan. 2018]. (2018). ASP.NET. [online] Available at: [Accessed 19 Jan. 2018]. (2018). Database. [online] Available at: [Accessed 19 Jan. 2018]. (2018). File Transfer Protocol. [online] Available at: [Accessed 19 Jan. 2018]. (2018). Scalable Vector Graphics. [online] Available at: [Accessed 19 Jan. 2018]. (n.d.). Bootstrap. [online] Available at: [Accessed 19 Jan. 2018]. (n.d.). Lesson 1: What is CSS?entutorial – [online] Available at: [Accessed 19 Jan. 2018]. (n.d.). Lesson 2: How does CSS work?entutorial – [online] Available at: [Accessed 19 Jan. 2018]. (2006). How Web Browsers Work | How a Web Browser Works | InformIT. [online] Available at: [Accessed 19 Jan. 2018].

Mozilla Developer Network. (2018). What is JavaScript?. [online] Available at: [Accessed 19 Jan. 2018].

Rouse, M. and Lingan, J. (n.d.). What is Web server? – Definition from [online] Available at: [Accessed 19 Jan. 2018].

Shannon, R. (2012). What is HTML? | HyperText Markup Language explained. [online] Available at: [Accessed 19 Jan. 2018]. (n.d.). AJAX Introduction. [online] Available at: [Accessed 19 Jan. 2018]. (n.d.). Bootstrap Get Started. [online] Available at: [Accessed 19 Jan. 2018]. (n.d.). Introduction to AngularJS. [online] Available at: [Accessed 19 Jan. 2018]. (n.d.). PHP 5 Introduction. [online] Available at: [Accessed 19 Jan. 2018]. (n.d.). SQL Introduction. [online] Available at: [Accessed 19 Jan. 2018]. (n.d.). What are Cookies – Computer Cookies – What is a Cookie. [online] Available at: [Accessed 19 Jan. 2018]. (n.d.). Spining the World-Wide Wed – World Wide Web Protocols. [online] Available at: [Accessed 19 Jan. 2018].

Alternatives (2015). The Ultimate Guide to Hamburger Menus and their Alternatives. [online] Apptimize. Available at: [Accessed 19 Jan. 2018]. (2018). Responsive web design. [online] Available at: [Accessed 19 Jan. 2018].

Gandy, D. (n.d.). Font Awesome Icons. [online] Available at: [Accessed 19 Jan. 2018].

Garsiel, T. and Irish, P. (2011). How Browsers Work: Behind the scenes of modern web browsers – HTML5 Rocks. [online] HTML5 Rocks – A resource for open web HTML5 developers. Available at: [Accessed 19 Jan. 2018].

Smashing Magazine. (2011). Responsive Web Design – What It Is And How To Use It. [online] Available at: [Accessed 19 Jan. 2018]. (n.d.). HTML iframe tag. [online] Available at: [Accessed 19 Jan. 2018]. (n.d.). HTML Iframes. [online] Available at: [Accessed 19 Jan. 2018]. (n.d.). HTML Responsive Web Design. [online] Available at: [Accessed 19 Jan. 2018].

6 Portfolio Websites -Research Task 1-

A Dandy Punk:

Design-wise, this site displays a tend towards the illustrious, whimsical, and strange, featuring an edited photo as a background with scratchy, ink-like text and drawings littering the ‘pages’ of the site. While cohesive in its style, the website’s design and layout comes off as messy and untidy, the scratchy lines, lack of readability, and haphazard use of font creates a difficult viewing experience.

There is a bio/about me page, video/showreel pages, drawings/artwork page, and contact page, as well as social media links in the bottom right corner. A copyright is present at the bottom of the page as well. While there is a similarity between this and other sites’ use of certain features, this one attempts to add a unique flair by naming them with the archetype, world, and character the artist is building for himself (personal brand). Bio is renamed ‘ego’, the video section is renamed ‘viddy-well’, drawings are renamed ‘squid-inkings’, and contact me is named ‘summon’.

The lesson I take from this site is to craft a personal brand for myself, however, I must not let it take over and control the design of the site. Instead, I should use it to supplement the overall design direction, as well as help communicate the market that I am aiming towards.

This slideshow requires JavaScript.

Courtney Autumn Martin:

This site possesses a nice, clean aesthetic, with a cohesive colour palette that utilises white, grey, orange, and a few cooler colours as accents. The first image that appears on the page, as you are taken immediately to her illustration section, is one that show-cases the artist’s style, the content of their work, as well as creates an anchor to the rest of the site via colour, composition, and art-style.

The use of colour is utilized in a way that highlights key areas and sections of the site, as well as the page that you are currently on. Orange and grey are then recognized by the user as colours that indicate different levels of interactivity, allowing the user to effectively navigate the site, increasing the User Experience.

Font-wise, the text is clean and clear, readable and structured through a clear hierarchy of font size and styles.

The artist’s logo and name are present at the top right, with the categories and pages navigable from the top bar, allowing the user to travel throughout the site easily and efficiently. Social media links are placed in the top right corner, with contact me/email me/hire me links, utilising the aforementioned use of colour, dotted strategically and conservatively around website and its’ pages.

The portfolio itself is clearly broken up into different areas and art style types, allowing the artist to showcase their different skills to a variety of prospective employers, while still maintain a cohesive style and direction.

The placement, design, and structure of sections, icons, and categories are minimalistic and non-cluttered, something that is extremely useful to utilise when crafting one’s own website. This is especially so when the designs of the elements are custom made, as they must be coherent with the rest of the website, supporting it while not overpowering the art-work the artist wishes to display.

This slideshow requires JavaScript.

Ferris Norman:

Although this website uses a minimalistic and shape-based hierarchal layout, the overall placement and presentation feels rather cluttered and compact. There is little negative space between the images and content in the middle of the page and the navigational bar on the top of the screen. This problem is present throughout the website, all though this is presumably helpful for showcasing the work you wish to push toward the viewer, it makes it difficult to navigate the website. This is especially the case when the navigational bar at the top is replaced with another one, and one must realise that the three shapes/symbols/designs next to the artist’s logo and name at the top of the screen are actually categories that you can use to navigate with. They do relate to the logo of the artist in regard to shape design and colour scheme, however, this use of colour and shape in such a way is mostly absent from the rest of the site.

The only place that this specific colour scheme is present is on the first page of the website, where the artist wishes to show off some of their best work. While this use of a colour scheme and shape language is good for building a brand, and allowing the artwork to speak for itself without the rest of the website fighting for competition, the lack of cohesiveness actually contradicts this carefully crafted identity.

Contact me and social media/business sites and information are present at the bottom of the page, allowing a user of the website to easily contact the artist via the links and information provided.

Including an omni-present contact me/information section at the bottom of every page will make it easier for a prospective employer to contact me, increasing the chance of them doing so. One must carefully craft a good User Experience, brand identity, and body of work, all of which guides a viewer and prospective employer towards a narrative and persona that you have built for yourself. This narrative and persona helps to ensure the correct target audience is achieved, helping you to break into the industry that you desire to enter.

This slideshow requires JavaScript.


Gerhard Richter:

One is greeted with, immediately, a site that is formatted and structured in a way that is not conducive of a good User Experience. The body of work present in the gallery is compacted into a tiny space, taking up very little room on the webpage. The artist’s name is in a simple font, while cohesive with the use of font throughout the website, it is not an indicator of creativity. The majority of the site relates to biographies, quotes, exhibitions, literature, and news. The overall layout, use of colour and design, composition, and flow of the website is, as a whole, more reminiscent of a piece of library management software than an artist’s online portfolio.

While the colour in the artwork helps them stand out sharply from the rest of the site, of which utilises font/text and a few shades of grey to organise sections, it does not do so as effectively as it could. The scale of the images of the page pushes them out of the spotlight, with the majority of the page being taken up by vast swathes of grey, broken up by black text in simple fonts.

Social media, copyright, credits, disclaimers, and contact links are present at the bottom of the website, with a search bar, accompanied by language options, at the top right of the site.

Depending on how interconnected, busy, and in-depth my site is, I may need to consider adding a search bar for easy navigation. The use of social media and contact links may be a favourable choice as well, depending on the amount of social media accounts relating to art, business, and personal brand/marketing are used.

This slideshow requires JavaScript.

Jakub Javoraj:

The Art Station portfolio service is incredibly effective, with the artist able to organise their work via sections, or leave it in an ‘ALL’ display. The artwork itself is displayed in neatly arranged blocks, listed five across, more appearing down the page as you scroll. One is able to navigate to the Home page, and Resume via the top right of the screen, with the artist’s own custom logo and personal branding present at the top left.

The style, hierarchy, and composition of the website utilises white, blue, dark grey, and a slightly light dark grey, to structure and organise the pages that the user visits, linking them through the aforementioned colour and hierarchy structure. This is furthered by the use of blue, ensuring that the user is able to see what page they are on, as well as linking the interactivity of the site with the artist’s email address, urging one to click on it via association.

Inside the resume section, the user is able to find the artist’s various social media and contact links, as well as a summary/biography of the artist, including their software proficiency, skills, location, job title, show reel, and experience/past clients list.

Overall, the Art Station portfolio website provides the artist with a clear, informative, and cohesive design template that ensures a prospective employer is able to easily navigate and view your work, as well as gain the necessary information regarding you, your character, and your skills before attempting to contact you via the information provided.

Social media, contact, and copyright is present at the bottom of the screen, their designs and colours separating and integrating them with the rest of the site simultaneously. There is also a navigational button at the bottom right of the screen that appears near the bottom of the web page, allowing you to quickly re-visit the top of the page without the need to scroll back up.

It would be wise to include a clean, minimalistic design structure to my site, utilising colour, contrast, subtle variation in font style, professionalism, ease of use, and a body of work that is clearly evident upon entering the site.

This slideshow requires JavaScript.

Umberto Sculpture:

This site utilises a neutral colour scheme, with red being the accent colour throughout, of which helps to highlight certain key features, links, and the page you are currently on. While the work of the artist is clearly showcased, the formatting and structure of the rest of the website is lacking. While there is an interesting parallax effect present on one page, the rest of the site suffers from poor formatting and hierarchy, with text and elements being off-centred, their design and structure appearing as though they come from ‘get rich quick’ websites, staving the user off from interacting any further.

Negative space is used; however, tangents are threatened to be created at multiple points throughout the site, removing the effectiveness of the negative space through the poor placement of both it and the elements within the site.

An interesting technical aspect (such as the parallax effect) may be useful to include in my website, however, I do not want to distract away from my body of work, as well as the industry and career direction I wish to display.

This slideshow requires JavaScript.



a dandypunk. (2017). a dandypunk. [online] Available at: [Accessed 13 Jan. 2018].

Javora, J. (n.d.). Jakub Javora. [online] Jakub Javora. Available at: [Accessed 13 Jan. 2018].

Martin, C. (n.d.). Courtney Autumn Martin Art. [online] Courtney Autumn Martin Art. Available at: [Accessed 13 Jan. 2018].

Norman, F. (2015). [Ferris Norman] DESIGN | ART | MOTION. [online] [Ferris Norman] DESIGN | ART | MOTION. Available at: [Accessed 13 Jan. 2018].

Richter, G. (2016). Gerhard Richter. [online] Available at: [Accessed 13 Jan. 2018].

UMBERTO | Sculpteur Animalier | Bronze. (n.d.). UMBERTO | Sculpteur Animalier | Bronze. [online] Available at: [Accessed 13 Jan. 2018].