OUGD504
WHAT IS DESIGN FOR WEB
VISUAL PERCEPTION
JAMES KEEFE / LEVEL 5
#BRIEF {
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 discovered. In selecting, organising and presenting your source material, you should consider the following: -What are you trying to communicate? An idea, a concept, a message a lifestyle......? -Who are you trying to communicate to? Why and what do you want to achieve? -How will you use the creative potential of interactive technology to effectively deliver your content? -What is the most appropriate/effective form of content? Text, Image, Facts, Statistics etc.? -What is already out there and how can you adapt, modify, reuse or respond to it? 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, web-safe 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.
{
The research I collected in the summer period was based upon visual perception. This was the basis for the website to inform and educate the user about the subject.
Background / Considerations Balancing the effective delivery of (or access to) content online content with the ability to deliver information in a visually engaging/appropriate is essential to successful 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. How do you work creatively within the conventions, limitations and restrictions of designing for access via the web? Consider the various functions of websites and how this will affect the visual representation of your selected content. You should take into account the range of possible roles that graphic design plays in web based distribution. These include The utilitarian function of containing, organising, accessing and distributing information or products The marketing of the product as part of a multimedia age of access and distribution. The sales function and brand manifestation of content, 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 behavioural 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.
#RESEARCH { concept;
I researched into popular methods of navigation and identified that a lot of contemporary website use a continuous scroll with reference points to return back to a specific section.
When thinking about aesthetics, I came across a web trend referred to as ‘flat design’ I found this style really appealing because I like to create designs in this style for print so I wanted to transfer it to screen.
The main aspect of research for this project was to understand how to make a site that has a purpose. Making it clear and easy to use is the main function.
The website intents to inform an educate people that are interested in the creative industry, in particular graphic design. However the theories can be applied to various creative practises.
The flat designs I came across also informed the colours for the pages, they tend to favour vivid coloured with high saturation, al most like pastel colours.
#CONTENT {
HOMEPAGE
ABOUT
GESTALT PRINCIPLES
FIGUREGROUND
GALLERY
-VISUAL PERCEPTION -GESTALT
-PROXIMITY -CLOSURE -CONTINUATION -SIMILARITY -FIGURE-GROUND
-SIMPLE FIGURE-GROUND -FIGURE-GROUND REVERSAL -FIGURE-GROUND AMBIGUITY
IMAGES
The content goes through the history of the subject followed by the key principles. The gallery page shows some examples of how the theories can be applied to design to help inspire the user and help to inform their design
#SPECIFICATIONS { RGB: COLOUR SCHEME #84D0D0
#17BB98
#FBF7B0
#2894E0
#E9EDEE
#F2C204
768px #32475A
#E7781A
#EA4636
FONT: Helvetica Bold Regular
RED: Container
1024px
GREEN: 1 column BLUE: Right/ left columns
The main aspect of research for this project was to understand how to make a site that has a purpose. Making it clear and easy to use is the main function.
512px 256px
256px
#CONTEXT { INDEX PAGE
LINK1
The website is designed to visually explain the theories in a simple and understandable way. It has been coded to work on a desktop screen to refer to for educational purposes
LINK2
LINK3
LINK4