Website Logo (SB3)

Logo Design

Started with a few quick logo scketches, my thought process behind these was showing a sequence through the letter S which gradually evolved when I continued scketching. I want the logo to reflect what a sequence is generally as opposed to film title sequences as the content of my website will be broad. 

The concept behind the logo was the idea of slowly revealing the letters in the word 'Sequence' like words are revealed in film intros and credits through their sequences. It also reminded me of a curtain revealing a film. 

   

I decided to adjust the stroke around each letter, reducing the bold white font over the type so the end letter has the least and the start is the most covered. This puts more emphasis on the gradual uncovering of the word. 

This is an idea of how I want the header to look on the website which will remain at the top of the page. 

ADD FINAL LOGO

Website Scamps/Crit (SB3)

More developed versions of my scamps, the website is going to be a one page scrolling site where sections can be quickly navigated by the text header at the top of the page or can scroll all the way through.  

As the user scrolls down the header will stay fixed at the top overlaying the page below.  

I want to keep the layout and overall design as simple as possible as the content is going to be the main element of the site. Its going to be largely image/video based with a featured section with an embedded video. 

Crit Feedback

My designs received positive feedback people generally agreed that I should keep the design simple and easy to use. 

I had a problem with how my gallery section was going to work, I thought it would be too unrealistic to have the videos all link to new pages and have information about them in the time we have for this project. One suggestion was to storyboard some of the sequences, picking out the best stills. As a lot of title sequences are fast and visual based it would be a good way to show off some of the details that may have been missed when watching a video.

These are some more examples of how my pages would work together. I have gathered my content and applied it to this grid which works well, need to start experementing with type and colour as I usally take a lot of time trying to choose which is the most appropriate and visually appealing.  

Website Workshop Notes (SB3)

Considerations before designing

limitations 216 web safe colurs
reproduced consistently through HTML

use hash tags to reproduce colours
hexadecimal code

example
red
hashtag: ff0000 / ff0

colour on screen RGB
photoshop web safe only

web safe fonts
looks for typeface that is installed on all computers
1.helvetica
2.arial
3.times new roman

css @font-face allows for any typeface = installs font to website
however breaches copyright

size, dimension, pixel resolution
design website to work on any computer screen


1024 x 768 standard?

file formats
PNG/GIF/PDF/JPEG
72ppi / 96ppi
lossy/compressed

Scamp

Sketch/mock up
3xdesigns - different directions
wire frame - dimensions/widths/hieghts
dreamweaver = input codes from design sketches/mock ups
designs decisions before dreamweaver

save everything on user work folder/root folder for website to work
user work

home page must be called indew.html

copy root folder to user work through dreamweaver when opening
never file and open - must work on user work

save and preview every time you make a change

index.html

about.html contact.html gallery.html shop.html

use stylesheet.css for all aesthetics then linked to all html pages

helvetica, 12pt = 16px

768px - 1024px = container
header = 160px
body space = 608px
logo square = 160px

Website Scamps (SB3)

Started off with some rough sketches for potential layouts for my website 

Annotated links and how a user would interact with the site. Roughly planned where content would fit on the pages and how some of them would work as a set.

Website - Existing Websites (SB3)

RIPNDIP

One of the features I like about this website is the animated header logo which changes every time you visit the page. There is not a massive amount to look at in terms of the design because the primary purpose of the website is it ease of navigation so shoppers can find what they want. 

Elite Estetica

Dislike the aesthetics of this website, many of the images have been badly cropped and are pixelated. The images overlayed onto the background move as the page moves and is quite distracting and looks tacky considering they are trying to advertise the products as luxurious, judging by the logotype and the products they are advertising. I do like the one page scrolling layout of the site- it is easy to use and can jump to the page you want easily through the tabs on the header bar. 

Bleep

I like the clean and simple design of this website and the Bleep branding as a whole. The website is successful in displaying its large amount of content. The sub headings provide links to other pages on the site.

Huck

Another good piece of branding, the websites design takes inspiration from the magazine using the same fonts and similar layout. 

What I like most about this site is the navigation bar, the typeface (blender) used is simple and legible but also has a unique look. The colours work well with each other and the roll over colour change makes it clear what page you are visiting. 

Thru You Too

The pages on this site change horizontally which I think is a unique way of presenting the content as it feels as if you are flicking through a magazine. The pages have full bleed images as a background which wasn't a problem on a fast computer but when I used a slower one the pages took a while to load and navigation wasn't as smooth. 

'A Brief History of...' Website (SB3)

Based on your research into 'A brief history of....' design a multi-page website that effectively informs a user about the interesting and informative facts, figures, observations and visual content that you have descovered. You will be supported throughout this project by a series of web development workshops, tutorials, crits as well as studio-based sessions.

The relationship between your content and design decisions should inform the tone of voice. Do you require humour, sophistication, authority, clarity or ....? You will need to demonstrate an awareness and understanding of the relevant industry standard requirements of designing for web based delivery.

Theses will include:
Web standard fonts, image formats, websafe colours etc.
Drafting interfaces, layouts and storyboards.
Creating images and layouts for web formats.
Engaging and user-friendly interface design.
Usability and navigation conventions.
Content management of both files and page elements.
Designing for an online audience
Costings and hosting fees.
Managing website creation briefs.

Background Considerations

Balancing the effective delivery of (or access to) online content with the ability to deliver information in a visually engaging manner is essential to succesful web design. It is the job of a designer to manage this balancing act by considering the informed use of design principles in the technically demanding (and at times restrictive) area of screen based interactive technologies.

You will need to explore the relationship between creative possibilities and the functional demands of the end user. These decisions and discussions should be documented and evaluated consistently in your design practice blog.

Consider the various functions of websites and how this will affect the visual reresentation of your selected conent. You should take into account the range of possible roles that graphic design plays in web based distribution. These include:
The function of containing, organisinng, accessing and distributing information or products
The marketing of the product as part of a multi-media age of access and distribution.
The sales function and brand manifestation of conent, information or product at the point of delivery or interaction.
Product identification and differentiation in amongst a visually competitive culture.
A reflection of lifestyle, trends and behavioral patterns of consumers.
Opportunities for adding value and stepping beyond the functional.

You should consider, recognise and reference existing modes, forms and formats of web based and interactive delivery where necessary.

New Media Theory - The Medium is the Massage

What is New Media? 

New media refers to on-demand access to content anytime, anywhere, on any digital device, as well as interactive user feedback, and creative participation. Another aspect of new media is the real-time generation of new and unregulated content.

The Medium is the Massage

Some interesting ideas talked about in this book especially considering when it was written. The general notion is that new media is an extension of the mind and bridges gaps between people around the world. New media platforms allow people to interact with sometimes unregulated content (depending on the site) which encourages discussion through forums and comments sections.

Kua Fu Development 2 (SB2)

My logo design previously was quite detailed so I wanted to try and create a more simplified version inspired by neon shop signs found in busy Chinese cites.   

I like the smooth aesthetic of the lines of the Chinese lettering and the 'Kua Fu' type.  

As I was finding it hard to choose which logo out of the ones I had developed I decided to combine elements of both. I took the curved lines and type of the logo design above and added it to the mountain concept. 

Before I decide on which logos to choose I will ask for others opinions as I am still not sure which is the most successful. 

Kua Fu Development (SB2)

Originally I wanted to use traditional Chinese lettering however I felt that it moved to far from what the project was about and didn't really relate. Most of the typefaces I experimented weren't very legible, so not ideal for a logotype.

This is a sketch I developed after mind mapping some ideas. Kua Fu's body became mountains when he died and it also fit with the technical side of the project as it is based on taking photos of the earth from a high altitude.  

I thought this version at this stage would work well at a small scale without text although it might not make sense without the context of the project. 

Here is the final logo I have decided to go with after getting some feedback. People understood the concept but did think it needed the type. To see how it works across formats that the project may be using  e.g. header on website, sticker, app icon I will have to test it as I am concerned that the detail may be lost when viewing it at a smaller size.