This design I find very bad due to the lack of design effort put in. They haven’t correctly utilised the amount of negative space on the page, making the viewer have to scroll down to view the images. This leaves the page looking very bland and empty, giving off the feeling of a lack of effort. As well as this the font used doesn’t reflect the page and effect he’s trying to give off, It looks very basic.
Here is an example of a well-designed portfolio website. Here they’ve filled up the negative space with relevant tabs to navigate around the page. They’ve also kept with a colour scheme that sticks throughout and looks very sophisticated yet artsy. They’ve chosen to go with a slide format where the image changes via the tabs on either side, this allows for the image to stay within the centre of the page, due to this a lot of attention is brought towards the artwork itself and stays that way.
In this portfolio, they’ve also separated all their work under tabs, this is something I will also do with my portfolio so it’s easier for the viewer to navigate to specific area they want to look at.
With this section of the portfolio, they’ve gone with a grid format to allow for more images in a tight spacing, in addition, this grants extra space for annotations and information.
Another thing I noticed with this portfolio is the depending on the selected tab it will change from grey to orange fitting in with the whole colour scheme of the portfolio.
This portfolio is very bold and in your face with the homepage being a display of artwork with the name of the company in the middle of the image. Where this portfolio excels is the user interface on the website, depending on whether you press either the left or right side of the page it switches to different pieces of artwork;
One thing this portfolio failed to do is consider whether the viewer is still able to see the different tab depending on which artwork is showing example;
Here it’s nearly impossible to see the tabs due to both the background and the text being black, what they could have done is change the text’s colour depending on which image is being shown. This would have also been an opportunity to make the portfolio look visually pleasing with the tabs complementing each image differently due to its varying colours.
This website is unbelievably bad, with a combination of poor quality images, unreadable fonts and bright bold colouring makes this website very unappealing to the viewer. In addition, this website has very limiting frames that minimise the images to small boxes leaving zero negative space making the page look clunky and messy, even the text at the top is squished together making it hard to navigate around the page.
Here is another example of bad website design, it’s impossible to tell whats going on due to how cluttered everything is, there are even images covering text which is a big no-no, it’s near impossible for the viewer to navigate throughout the page. The colours and text used don’t stand out, having both shades of blue makes the text blend into the background. There are no clear headers and the uses of the italic and bold font have been used incorrectly.
Virgin America’s website design is very clean and looks easy to navigate around the page. They have clear, visible tabs as well as very geometrically precisely placed text as if placed on a grid, which is visually pleasing. Unlike the websites above Virgin America has refined their information to keep it small yet informative, this leaves them with a lot of negative space to play around with. This also keeps the page looking very clean and inviting.
Web browser functions
HTML – Hypertext Markup Language. It is the language used to create web pages.
CSS – Cascading Style Sheet. CSS portrays how HTML components are to be shown on screen, paper, or in other media.
AJAX – AJAX is not a programming language. AJAX is a set of Web development techniques. Ajax is a client-side script that communicates to and from a server/database without the need for a complete page refresh.
Client – A client is a piece of hardware or software that accesses a service (such as a website) from a server.
Database – A database is a collection of information that is organized so that it can be easily accessed, managed and updated.
Web-Server – A web server is a PC framework that procedures demands by means of HTTP, the essential system convention used to circulate data on the World Wide Web.
PHP – A scripting language that is generally used to make dynamic Web pages. Joining linguistic structure from the C, Java and Perl languages, PHP code is implanted inside HTML pages for server-side execution.
SQL – Structured Query Language (SQL) is a standard coding for relational database administration and information control.
mySQL – MySQL is an open source relational database management system (RDBMS) based on Structured Query Language (SQL).
ASP – ASP is also an abbreviation for Active Server Page. An application service provider (ASP) is a company that offers individuals or enterprises access over the Internet to applications and related services that would otherwise have to be located in their own personal or enterprise computers.
Angular – It allows you to extend HTML’s syntax to express your application’s components clearly. AngularJS eliminates much of the code you would otherwise have to write yourself.
What do these parts of the website do?
Header/Banner – Headers are found at the top of almost every website. The header usually consists of features such as the navigation bar, the brand logo, search bar e.t.c
Logo – The logo is used as an identifier. The logo is usually placed inside of the header and is a way for a user to easily identify your brand.
Slider – This is a slideshow used on the website, this is most commonly used to showcase different images and can be seen almost anywhere on a website.
Navigation bar – The navigation bar is the bar scene inside of the header in the majority of websites. Its purpose is to break up the website into different sections of similarities e.g. all sketches would be placed under the ‘My Sketches’ section of a website.
Gallery – The gallery is a section on the website that provides you with various different images that are related to the website.
Thumbnail – Thumbnails are smaller versions of original images used to give the user an insight into what they are about to click on, but to also reduce bandwidth and download time.
Footer – The footer is much like the header, however, it is placed at the bottom of the web page and can consist of different pieces of information such as contact information.
Social Media Icons – Social media icons are small icons of the desired social media platforms, often found in the header or footer, and when clicked will redirect you to the desired platform.
Responsive Web Design – Responsive Web Design (RWD) is a feature added to websites that allow them to load differently to fit different screen sizes