Logo Design

The logo design that you use for anything is what establishes it as it’s own brand, and makes it different from everything else in the world, therefore the logo that you decide on can be the most important decision that you make when it comes to working on a new project, as it is basically the sole identity for the project, and what people will associate your project with.

aaa

For my major project, I came up with the idea to name it “Livesesh”, as it is a name that is relevant to the project, being a website where live music sessions happen.

Colour Scheme

heading

The colour scheme of a website can completely change the way that a website makes people feel about something, or view something. Due to this, the colour scheme for a website can be one of the most important aspects of the design. If you do not choose a suitable colour scheme for your website, it could mean your website will not perform as well as it should, or give off the feeling that you intend it to.

heading

The Choice

I have chosen to use a purple colour scheme for my client project website, as it is a colour that the client said they really liked and would like to see implemented on the website, also it is a colour that really stands out, as it is not a colour that is over-used in website designs at the moment.

The colour psychology behind purple:

Purple is said to convey ambition, which is one of the main things that a university would want to convey to the students, as every university should want their students to be ambitious.

Another thing that purple is said to convey is creativity, and due to the university being an art school, creativity is something that they would likely want to show.

 

Adobe XD First Look

heading

For my client project, I plan on using a completely new software to create the main design for the website. The software that I am going to be using is Adobe’s new software “Adobe Xd” short for Adobe Experience Design. It is a piece of software designed mainly for the creation of user interface and user experience design and is soon meant to be the replacement for Photoshop for web designers, however, it is currently in BETA.

cf644f5d1246389a09c7c3464a1e585e

In this post, I am going to be following the tutorial that Adobe have set up, to try to get to grips with the software before I begin using it for the project.

c23a3e7dabd512a48cef04b59a134a30

Step 1 of the tutorial is basically an introduction to the tutorial, telling you what you will be creating in the process of the tutorial.

As shown above, I have followed step 2, and created an artboard using the artboard tool (the arrow to the left), clicked into the canvas (the middle arrow) and then filled the canvas with a colour using the fill tool (right arrow).

251de642749e3deef8dd95299760e4bd

Step 3 shows how to add an image, in what is called a clipping mask inside Adobe Xd, by dragging and dropping an image on top of a shape, it automatically then snaps to that shape, and confines itself to the space.

Step 4 shows how to create a repeating grid, by only creating one of the boxes for the blog, and then choosing a repeat grid option that comes up on the right side of the screen, and then allows you to drag the grid down, to make the same box repeat, as far down on the screen as you want it to.

It also shows how to add different images to the blog posts in the grid, by dragging and dropping 3 images at the same time onto one of the images, this then adds all 3 of the images to the grid in a random order.

e16f54a3d754bd7665abf0268e5e9492

Step 5 is where we create a scrolling effect, to give the design some interactive features. To do this, I had to select the artboard by clicking its name at the top and then selecting “Vertical” from the scrolling drop-down on the right side of the screen. Then to add the scroll, I pulled the artboard down to be behind the rest of the design, which you can see divided by the dotted lines.

41145c7fbab5cdabfbeff6d01f3f4189

Step 6 is also about creating interactivity within the design, this time by switching over to the prototype panel at the top left of the screen, shown by an arrow, and then selecting an icon on the screen, in this case I used the button at the bottom of step 5 to show the artboard in step 6, and then the back arrow on step 6 to go back to step 5.

That is the end of the tutorial.

 

Client Notes

I spoke with Sally, my client on Friday, and there a few things that came out of the chat that we had. The main thing being the mentioning of a colour scheme that she would like to see, as when I was showing one of the designs that I had done, she noticed that it had a purple themed colour scheme and mentioned it, saying a purple colour scheme would be nice for the website.

I also showed one of the draft logo designs that I had done previous to the chat, and this is what was said about it:

Logo Idea 1.png

From the design above, it was mentioned that she liked the “bubble” effect, and that could be something to be implemented into the final branding design, however would like to see a thinner font being used.

 

Other Websites: Washington.EDU

heading

The university of Washington website is a modern example of a website that has been created for an institute similar to Hull School of Art & Design, therefore it is a great example of a website to look at as part of my research into similar websites, to figure out some of the key features that the website has.

Noticeable Features:

  • The website uses a large, purple top bar and navigation bar to make the important links stand out, such as quick links, and all of the other navigation items below.
  • Use of a hero image across the top, with video ones having a pause button, most likely for usability issues, such as slow internet connections not being able to load the video properly.
  • Quick links button brings in a side menu to the right of the screen with useful links such as a calendar, maps, etc.

9860b3ff1f01406cfe72568c22d5703f

  • “fast facts” section, giving visitors to the website some facts about the college, which is a great way of marketing and impressing visitors, by showing accomplishments, facts or other things on the main page.

The website’s design is currently styled using the flat design trend, with some elements moving away from that trend, such as the shadows on the navigation drop-down’s.

 

Font Selection

Font selection for this website is important, as there are many different factors that go in to the choice of font, such as load times, readability, etc. This post will be analysing the font selection for the website.

The two fonts that I have chosen for the website are:

  • Open sans
  • Raleway

Reason: Speed

The load times of a font can have a major impact on the load times of a website, thus changing the usability and functionality of your website. In some cases, the load time for fonts could have a drastic change on your website’s load time, usually depending on the amount of font styles that you choose when selecting the font, such as thin, medium, bold, extra bold, etc. The more of these styles you choose, the longer the load time for your website will be.

Screen Shot 2016-11-25 at 13.11.09.png

As shown above, the font families and styles that have been selected have a ‘moderate’ load time. This is acceptable, as there are four different font styles that are going to be used on the website.

Reason: Readability

The readability of a font is important, as it can be the difference between some users being able to read some content on your website, versus some users not being able to. Therefore, it is important to ensure that the fonts you use are readable by almost all users.

The font style should also be a representation of the kind of aura that you want the website to give off, therefore if it is a corporate website you should use a font that is straight, and easy to read, whereas if you are creating a website for kids a more playful font would be a better choice.

fonts

Colour Scheme

A good colour scheme is an important part of a website, as it helps to establish a brand, and in some cases, a brand can be recognised by it’s colour scheme alone, therefore figuring out a colour scheme that works is important, as it may be the most recognisable factor of your website in the future.

The colour scheme that I have chosen for my major project is shown below:

colour-scheme

The reason I have chosen purple as the main colour is due to the fact it is a spiritual colour, and gives off a calm, warm feeling.

Sources:

http://www.sensationalcolor.com/color-meaning/color-meaning-symbolism-psychology/all-about-the-color-purple-4329#.WDgSgkCLSuU