OUGD504 - Studio Brief 01 - material choice for protection

Thinking about what material would be best to protect the interior of the book has been a difficult choice.

since the overall design of my book will not have so many pages I wanted to choose a material that wiped help give the book a little more 'weight' and 'thickness'. The best material I could think of to achieve these characteristics was 'silver board', a fairly thin board however much more stronger than very thick card. Silver Board provides strength to the book as well helping to protect the inside pages and the overall shape of the book.

Silver board is also the perfect material to help hold the front cover design and material which will be wrapped around the front and back pages.

Below are images with the silver board applied to the design

The silver board definitely helps with the books structure and stability.

OUGD504 - Studio Brief 02 - Final Design Website Mockups

Working from hand rendered wireframes, mock-ups were then able to be created. The wireframes gave a clear guide as to where certain things should be place, like text and images. They also provided a clear guide as to how things moved and how the user would be able to navigate around the interface.

The first mock is the home page.

The home page had to be simple, and easy to navigate. Similar to that of a website profile but not really a website profile. More a profile of work. The centre of attention for each page on the website will be the logo, which will be at the top centre of each page. The logo will also act as a web page button which when pressed will activate a drop down menu. to access other pages on the website. 

The user will need to figure this out for themselves; pressing the logo to activate the menu, although the user will be prompted to press the logo by animation. the logo will be an animated piece on the home page (an on and off animation), that way the user will know that something is going on and will investigate by hovering over the logo. 

The design of the first page had to be simple, no over firing information at the user. Most of the home page will be taken upon with six animated boxes which will display work/projects and every few seconds a piece of work in one of these boxes will fade away and a different piece of work/project will fade in. the user will be free to hover and press on any one of these boxes to release more information about that certain work/project. 

I feel that an easy to navigate and simplified Home Page is the foundation for a good website.

The design of the menu is an easy task, which can be accessed as soon as the user understands how to make it appear on the interface. 

As the menu appears the current page will fade making the menu boxes and text more visible. The menu is designed to be simple and easy to understand, achieving this by using simple faded grey rectangle shapes and plain white text for the page names. 

However after looking at more website designs I feel that possibly scrapping 'The Team' page on the website and keeping it purely a website that represents the brand name, the work would be better for a simplistic design, also the biggest reason is that I cannot pretend that the business has a website 

The next page to work on is the 'work' page, which will show off any past projects.

For this page a lot of inspiration came from the Apple.com website. Each one of there pages navigates by having the user constantly scroll down the page to see more content. it is a very nice way to create a smooth a perfect feel and look to the website. A lot of modern websites that are being created, now use the same navigating technique because it is so effective. 

The same style will be applied for the 'Work' page of the website instead of something traditional.

This is a much better way to present work. I did also think about using sliders on the web page to navigate through projects, however because the apple website (personally i think) is one of the best modern website designs in the world at the moment. I would like to reflect some of apples personalities onto the business website design, as seen above I've tried to replicate the design.

The contact page will be placed at the end of the the work page, so similar to the Apple.com website, the website pages will flow nicely as one.

OUGD504 - Studio Brief 02 - Further website design research

During work on the the second studio brief for this module, a lot of inspiration has come from other websites, which a modern, minimalist design, compared to the more traditional design that you would find on older websites, an example would be websites with the traditional menu running across the top of each page and the content underneath it depending on what ever page you are on. 

However the more modern designs have proved much better help during this project.

The website Awwwards.com has a whole section for the best website examples of designs with graphic design. I have already created a blog post about this website with some examples on that post however I feel I should continue to show what gave me inspiration.

I cam across an independent designers website called 

Anthonygoodisondesign.com

This website is definitely a favourite along with the Apple.com website. However this website is more about selling one designers skills rather than a whole bunch of different products. So the website has a lot more of a 'Profile' feel than anything else. 

The design though is just so amazing and perfect. There is a website menu but it is not really needed unless the user of this website was looking for something g specifically because the whole website is on just one long webpage that the user continuously scrolls downwards to see.

The style is a little similar to a page on Apple's website. I applied the same idea to my own website for this project and I love it. 

The next website which I liked was mainly more for how background images were displayed and how they worked with heading and informational text.

Lyytonliving.com

Which again matches the previous website with a one page website, however lyytonliving uses a more refined text and layout. Instead of full block colour for background, Lyytonlivingcom uses images, then overlaid with white text which uses a more delicate and refined typeface, which I am not sure of the name.

I do like both of these websites, I have taken a lot of idea from them and applied similar styles to my own design.

OUGD504 - Studio Brief 01 - Stock decision

For the pages in the book, I wanted something that would give the interior of the book a more sleek and attractive design. I began to think of the types of books that I personally would take a second look at in day to day life. 

magazines are what springs to mind. Mostly because of the glossy reflective pages on the inside of the publication really catches the eye. It does make the images and text stand out a little more because the pages attract and reflect more light. 

Another good reason why I like the stock that magazines are made from is because there is much less chance of noticeable scratches and smudges. If magazine stick what matt instead of glossy then even the most faint scratches and smudges would be noticeable to the reader. 

I applied the same stock to the book, which after printing did make the images and text stand out much more, as each page reflects a lot of light as you can see below.

OUGD504 - Studio Brief 02 - Writing my own Website

I have been practicing my skills on adobe dreamweaver however I am finding it difficult to understand the coding and how to position certain objects on the design page.

 I will attempt to practice my skills and use my wireframes to create some sort of start on my website and hopefully create something that is useable and works. 

I want to be able to show in this project that I have the abilities strong enough to use dreamweaver to create something functional, at least to show I know how to use the software. I believe that as I practice more and more my skills will get better. 

Using begginers skills I have managed to create a starting website that somewhat matches the overall grid of my wireframes and website mockups. I found it quite difficult to move various objects on dreamweaver because I had to create separate divides on the page which would allow me to place objects and text where I wanted them. 

I began with my header and options for the website which will allow the user to navigate to different pages, which is not actually the menu design I intend to use for the final website design, However my intended design would be very difficult for me to create at this stage.

I practiced with the creation of a home page title and heading title.

I was then able to add a few pieces of work onto the homepage to try and match the design of the wireframes, I also found this a little difficult.

Although it doesn't seem like much of a website right now. It took a lot of work and concentration for me to understand the coding language to build what I have done so far from scratch, I feel that my skills with the software will begin to get better the more I use the software from this point.

Below is a little clip of my current coding abilities.

OUGD504 - Studio Brief 02 - Wireframe Designs

After carrying out research on some really nice websites, I have now started the wireframe process for the business website. 

Taking most of my ideas from the apple website I fell I have managed to come up with a slightly successful design to build from.

Below is the Home page wireframe for the website

The homepage will consist of the main menu stretching across the top of the page, with the logo in the top left hand and search option in the top right, a little similar to that of apple's Homepage design. Then the whole page will consist of one large slider filled with various posts and images. 

The second wireframe shows the 'Work' page which will represent a vertical slider with box images of various designs and past pieces, the images of these posts will also be links to their own small page where the user can read a little about the piece, such as its origin and its purpose.

OUGD504 - Studio Brief 02 - Inspirational website research

Whilst working on wireframes for the website design, I wanted to take some time to research successful websites that spark inspiration into other designers with their edgy and exceptionally clever layout and designs. 

The website Awwwards.com has a whole bunch of brilliant website designs that definitely set the bar high for website designers. Simply because they are just beautiful to look at and seem so fluid to navigate. 

http://www.awwwards.com/websites/graphic-design/

The first website In looked at 
OneSharedHouse.com

Is probably one of my favourites, the design is so good that I just fall into a trance just looking at what is going on in the screen. The colour choices are so vibrant it sets a very positive mood as soon as I open the web page. 

I would like to create a website similar to this one, although I feel that turning everything into an animation on the website will require me to get some help on building it.

Another website that I came across was 

Heco.com

This website is beautiful, the whole website is on one page, and as I scroll through the website each section has a different effective design and personality so I didn't get bored so easily whilst looking through the website.

I like the colour scheme on the first page of this website, the black and white is my favourite. I think I might use it for the business webpage. Mostly because of the logo design which is also black and white, the rest of the webpage will fit along with thst design. 

Another really nice simple website design is 

http://ux.perfectial.com/process/

I like this design because of its use of 1 colour, and the text is very minimal, the creators of the site wrote down exactly what they wanted to the user to see, meaning that there is not much exploration on this website, as it is more of a presentation/walkthrough than anything else. 

I would have liked this website more if it was on a one page website design, which would make for easy gliding with the finger tips and create a more fluid experience.

One of my absolute favourite websites of all time has to be the apple website. Everything about it is just perfect, the colour, the design and images and how fluid the one page system design is. It feels lovely to navigate the website and also looks amazing on the laptop screen.

If I could make the business website look like anything it would definitely be something similar to the apple website. 

OUGD504 - Studio Brief 02 - Learning How to Code

For this Module, I am required to learn and gain some knowledge about coding.

Coding is the Foundation language that the digital world and websites so for a Graphic designer like myself it is an essential language to understand and have the ability to use. 

I will be using Adobe Dreamweaver to create the website for my brand/business.

I hardly know anything at all about coding so I decided to go the library and look for a few different books on Coding to help me grasp the concept. However after going through the books, a lot of the terms and explanations that were used were very confusing to me and after reading quite a few pages I still didn't really understand the concept of coding. However there was on book that introduced me to html coding nicely as well as what some different terms and what their definitions. 

This book was quite useful at explains the basics of coding to people who are going into coding that know absolutely nothing at all.

Taking my beginners knowledge I then went to the adobe website to research Dreamweaver to learn more about the software, HTML and coding. Adobe has a whole section where you can learn how to use dreamweaver, From learning about the basic codes to building a website from scratch. 

The tutorials on the website helped me to understand a lot more about how a website is built from scratch and understanding it's anatomy. 

The tutorials explained a lot of the different codes that I can use in dreamweaver to help me create the website. Unlike the books, Adobe explained them in a way which made it much easier for me to understand, each explanation had a diagram and also included video tutorials which explained each stage step by step. 

After becoming more comfortable with the software I felt a lot better about practicing coding on my own.

OUGD504 - Studio Brief 02 - Brand name

For my personal brand I wanted to think more on the name off the brand and how the name has the ability to instantly represent the image of a business. 

The original name 'Billy Thomas Patrick Designs' I felt was a little too long and too much of a mouthful for a business name. However I still want to incorporate my own names into the business name so I decided to mix them up a little.

I decided on 'TomPatrick Designs', which I felt was a little more suitable and easier to pronounce.

OUGD504 - Studio Brief 02 - The Design Process

It is important to think about the design process so I fully understand why I am creating a website for my own personal brand which will be a personal business. It is also good to understand how this will help the business and target audience (clients).

Age Range?

There is no real age range for this website, As the brand will be knows as a creative and design business, it will be available to all kinds of clients who need to use the skills of the business for their own personal production. 

As the busioness will be used by all kinds of clients, there are no gender specifications either. 

Country?

As the business is mainly for creating designs for clients, there is no real limit to where in the world the business can work with clients as it is possible to only have digital interaction with clients to proceed work, which can also be sent and received digitally. 

Target Audience Income?

The business will aim to work with clients that will be able to afford work production done at an agreed hourly rate. 

Devices Used?

To begin with A website would be a good place to start then possibly moving onto mobile application.

Why would clients use the in interface?

Clients would access the interface, firstly to get an impression about the business. I think the first page of a website; how it looks and how it feels, says a lot about a business. Clients would visit the website to find out more about the business and skills it has to offer. The website will also list images of past work and contact information. 

I feel that the time clients spend of the website(interface), would be more luxury than essential behaviour. The clients are visiting the website to understand more about the business and to possibly find out contact information which would require very little interaction from the client.

Goals

The clients or visitors goal would be to research the products of the business and collect information. The interface provides enough information of the client to research. 

The aim of then website is to attract people and make them interested enough to want the products that the business has to offer, turning a visitor into a client would mean the interface is successful.

What?

What do visitors of the website need? 

To turn a visitor into a client through the website they need clear understanding of what skills the business has to offer, they need clear access to images of past products and experience from past clients. They also need easy navigation, which will enable effortless connection to contact information. 

Will the visitors understand the brand?

I feel that at first the visitors of the interface will understand the 'concept' of the brand. However since the brand will be fairly new there will be no recognition from visitors and will probably have to be introduced into the brand through the interface. 

As the users of the interface will more than likely understands the concept of the business, they will probably have a likely idea of what products the business has to offer. As the visitors explore the interface, they will become more familiar with what the business has to offer.

What will differentiate the business from competitors?

The business is younger and has a fresher idea and take on modern digital and physical products. Also the business will strive to have a much more welcoming and personal relationship with clients compared to that of other businesses. 

Visitors to the site will only need to visit a few times to get an impression of the business. Since this site is more used for presentation and information purposes rather than the type of sire which offers more personal purposes.

OUGD504 - Studio Brief 02 - Design for screen - Coding lecture

This morning I received a small lecture on the basics of coding. 

Coding is what is used to create digital platforms like websites and applications and also databases. 

When creating a website HTML coding is a tool that is extremely useful to understand as a designer because it allows designers to have the ability to design something completely new from scratch for themselves or a client. 

Understanding coding will be very useful in this project and especially useful to me as my project is based on the production of my own personal brand. 

HTML

Which stands for Hyper Text Markup Language

During the lecture, I was shown what HTML can be used for, Browsers were a good example as it is the platform that is used to access the internet. HTML is used to create the platforms on many different devices such as computer/laptops, tablets, mobiles and smart TV's.

Next I was shown a simplified explanation as to the way HTML is used. HTML divides each element in a web page with an open and close tag, the tags explain the information that comes after and before the tags.

Opening tag which is <p>

Closing tag </p>

Other tags like

<html>

<title>

<body>

<head>

I am looking forward to learning more about coding, this will give me more confidence as a designer to rely on my own skills to create something in my own vision.