OUGD504: Module Evaluation

This module has been incredibly beneficial to me, it has taught me about designing for web and the restrictions that come with that as well as designing for print and branding. Overall, the module has given greater deeper understanding of the design process.
I feel my time management and commitment to the course has developed, as well as my ability to quickly work up designs within a studio environment. I think this is because I am much more confident  with the adobe software, and I have stopped worrying about what anyone thinks. This first semester of study I feel I my idea generation processes has grown, creating insightful, and established responses/concepts to design challenges.

My first one week brief was to create a folded leaflet of our personal understanding of our design process. For the first couple of days I struggled with ideas and getting in to the swing being back in the studio. Especially after a few months of summer relaxing, it almost felt stressful. I attempted to design a folded leaflet that is considered and effective. Everything has been carefully arranged even though it is to look casual. I have designed and used vector illustrations to go on my leaflet which helps communicate my design process effectively. 

I struggled most with the web brief. The purpose of this brief was to 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 within the summer brief. Over summer I travelled to Hong Kong and was inspired by these sacred spaces I visited, which is why my website is based on Sacred Geometry and Architecture. Sacred Geometry involves a sacred universal patterns used in design of everything in our reality, most often seen in sacred architecture and art. The basic belief is that geometry and mathematical ratios, divine proportions (golden ration) etc. As a designer, I felt it was important to have an awareness and draw inspiration from ancient design.

To this day, I feel like I didn't showed my full potential with the web brief, I think this is due to the fact we were unable to code and make our websites live. This was due to circumstances out of my control. However, I did learn a lot about  about web safe colours and html & css, as well as the restrictions when designing for web. In the the future I would like to revisit/teach myself to code. 

Overall, I am pleased with my website, I have really enjoyed learning about the subject and design for web. Ancient design and civilisations have always interested in me. I think as a designer I think its really important to have an awareness of ancient design instead of only focusing on current design thats happened in the last century. 

Also, the way I approach a project has changed, I find I a lot efficient and quicker at making decisions. I have found that my final outcomes are a lot more conceptual than last year, especially when considering industry, culture and audience. I feel I design for the audience, instead of what I think looks good. I also consider media, format, methods and communication a lot more. 

I have started appreciating grids especially when designing for screen and print, I find they are a really useful tool, in creating visually pleasing design. 

The Augmented Reality brief. There were time limitations with this brief, as we only had a week to print our work when the print room was fully booked. However, I managed to get into drop in for digital print as well as screen-print. Giving myself a lot of work to do and trying to complete it as best as I can, it’s amazing what you can accomplish within a week by focusing and committing fully.

Overall, I have pleased how the module has gone, I feel I have developed a lot as a designer and I am looking forward to the rest of the year. 

OUGD504: Web Brief Evaluation

The purpose of this brief was to 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 within the summer brief. Over summer I travelled to Hong Kong and was inspired by these sacred spaces I visited, which is why my website is based on Sacred Geometry and Architecture. Sacred Geometry involves a sacred universal patterns used in design of everything in our reality, most often seen in sacred architecture and art. The basic belief is that geometry and mathematical ratios, divine proportions (golden ration) etc. As a designer, I felt it was important to have an awareness and draw inspiration from ancient design. 

The relationship between my content and design decisions has informed the tone of voice. The target audience is anyone interested in learning the basic outline of sacred geometry. The website is to inform and educate people about sacred geometry and ancient design. The site is almost perhaps a 'learners guide' which has effected the overall design. It is clear, minimal and easy to navigate. The tone of voice is formal yet easy to understand. A basic outline explaining the symbols.

Overall, I am happy with the website I have created I think it looks professional, clean and minimal. My design decisions; I chose two fonts Karla and Ostrich. Karla is a grotesque sans serif typeface family that supports languages that use the Latin script and the Tamil script. Ostrich is a contemporary all uppercase sans-serif with a very long neck.  I chose sans-serif fonts as sans-serif works better screen based as well as my website is on geometry. I decided to keep my website colour scheme black and white, this is because my website is educational and I didn't want colour to distract from the symbols.

I am most happy with the symbols, diagrams and icons I have created, they took me a long time to do on Illustrator and I think they are successful in perpetuating sacred geometry.  I have also website interactive by every time  you refresh the homepage it displays a different example of sacred geometry.

Throughout this brief, I have learnt about web safe colours and html & css. Also my skills on the adobe software has improved.

To make my website more conceptual, I have designed sure the logo ( keeping with the geometry theme) three triangles ∆∆∆ that represent the pyramids of Giza. Furthermore, I have also made sure the sizes of the triangle are relevant to the orion constellation. As well as this my web grid has been designed using divine proportions and the Golden Ratio. I have also made sure and shown how my website is responsive and how it works across all devices (desktop,tablet and phone) 

If I were to have more time working on this brief I would really like to have a go coding it and making it live, this is something  I could potentially do over christmas. 

Overall, I am pleased with my website, I have really enjoyed learning about the subject and design for web. Ancient design and civilisations have always interested in me. I think as a designer I think its really important to have an awareness of ancient design instead of only focusing on current design thats happened in the last century. 

OUGD504: Web Responsive Design

I mocked up how the website would work all across devices this makes my site responsive and readily available. This is a mock up of what my website would look like when used on a smaller screen. The layout and sizes of the objects within would alter as to allow the type and image to enlarge. This is a 3 column 'grid'. Making it responsive creates a more engaging and user-friendly interface design for an online audience. 

Tipping the tablet on its side creates the same site as for the desktop.

Study Task 09: Search Engine Optimisation (SEO)

Search Engine Optimisation 

Search engines use algorithms to access the suitability and rankings of a website based on search terms. 

Search Engine Optimisation is a way of making alterations  to websites according to the criteria that search engines use when ‘crawling’ web content. ‘Page Authority’ refers to how likely a web page will be ranked in a search based on SEO optimisation, internal linking and content relevance. ‘Domain Authority’ refers to how likely a domain will be ranked in a search based on age, popularity and size. 

What affects changes in rankings? 

• on-the-page factors - HTML, content and architecture
• off-the-page factors - links, trust, social, personal
• violations - irrelevant/weak content

Search engine optimisation is often about making small modifications to parts of your website. When viewed individually, these changes might seem like incremental improvements, but when combined with other optimisations, they could have a noticeable impact on your sites user experience and performance in organic search results 

Focusing too hard on specific tweaks to gain ranking in the organic results of search engines may not deliver the desired results.

Indicate page titles by using title tages - title tags tells users and search engines what the topic of a particular page is <title> <head> use brief but descriptive titles/ 

Make use of the 'description <meta> tag gives search engines a summary of what the page is about. Simple-to-understand URLS will convey content information easily.

URL parts can be removed - a user doesn't have to put the whole lot in, so prepare for a cut down version

Prepare two sitemaps, one for users and one for search engines. Lowercase sitemap is a simple page which displays the structure.

Easy to navigate/natural flowing hierarchy. Stay organised around the topic, create fresh, unique content.

Anchor Text - suitable anchor text makes it easy to convey the contents linked. Use clickable text <a href="..."></a>

Optimise your use of images - all images have a distinct filename and 'alt' attribute. 

Possible Changes to my website to help optimisation 

• create <title> tags for each particular topic of the page, for example 'sacred geometry' and 'orion mystery' 
• create a description <meta> tag which will give a summary of what the page is about on a search engine
• make sure all my image have a distinct filename and 'alt' attribute. 
• I think my website already has a easy to navigate/natural flowing hierarchy as it is for meant to inform and educate. 

Website: Homepage Changes

try this link GIF

I've created this moving gif to represent  that every time you reload the page a different photograph representing sacred geometry appears. Apologies that the quality of the image is not great. 

I have also changed the font to Ostrich, as I felt Baskerville being a serif font does not represent geometry.  

in context

final crit feedback//

This morning, I had my final crit for the web brief. The general feedback was positive and I found it really useful and motivating to make some improvements. Some points that were raised:

• The Heading a serif font doesn't communicate geometry well, it was suggested that I look at sans-serif fonts and perhaps working all uppercase. The heading was a rushed decision anyway. Also try out different positions as well. 
• The Homepage it was suggested that  every time you reload/visit the homepage the photograph changes to a different example of ancient design, this idea I really liked. 
• Logo they liked the logo and the fact it was reflected. It was suggested that it could be a moving animation 
• Liked the idea that I'm looking at ancient design from thousands of years ago rather than current design/ers from the last century. 

Below the background of the website is supposed to be white. 

Study Task 08: Web Style Guide

Task: 

Produce a style guide that outlines the specific style characteristics of your website (font, point size, colours etc.) 

Considerations:

> Font Families: Header and Body
> Colours: RGB/Hex-Background, Foreground Palettes
> Button Styles - colour image; default, hover, active 
> Logo and Variations
> Grids/Layout/Variations/Sub-Pages

Logo for my website

This is my final logo for the website, it will feature in the top left hand corner. I've kept with the geometric theme, aswell the three triangles represent the pyramids of giza. I have also made sure the sizes of the triangle are relevant to the orion constellation. 

OUGD504: Crit Feedback//Target Audience//TOV

As a table we discussed and presented our ideas. Below are some points that were raised:

> Specify target audience/tone of voice/purpose
> Create a logo...'sacred geometry' ∆
> Scrolling side to side website, like hieroglyphics 
> Ways to make the website more interactive

Target Audience/Tone of Voice

The target audience is anyone interested in learning the basics of sacred geometry. The website is to inform and educate people about sacred geometry and ancient design. The site is almost a 'learners guide' which will affect the overall design. It will need to be clear and minimal and easy to navigate. Someone suggested the use of gif's to explain elements could be interesting (gif's can be produced in photoshop) 

The tone of voice will be informal and easy to understand. A basic outline explaining the symbols. Someone suggested that I look at existing websites on sacred geometry.

existing websites on sacred geometry

Below are some existing websites on sacred geometry they are pretty awful, too busy and not very clear. This raises the questions, How can I make mine more clearer and more informative? Also, how can I make my website easier to navigate around for a beginner.

Scamps

Below are some initial scamps for my website. 

I think my website will scroll left to right which links to how you read hieroglyphics

User Experience Design (UXD)

In today's session we were taught what the User Experience is and how it relates to the development of a website design.

“Experience” NOT “usability”

We then went into some practice using Garret's model of UXD and UXD methods such as:

• user research
• personas
• content strategy
• site maps / task flows
• wireframes
• a/b testing

Web Workshop W3

This morning we had our first web workshop. 

HTML - hyper-text markup language
XHTML - Extended hyper text mark up language
CSS - Cascading Style Sheets
SEO - Search Engine Optimisation
FTP - File Transfer Protocol
URL - Uniform Resource Locator
HTTP - Hyper Text Transfer Protocol
UI - User Interface
UX - User Experience - (you design to consider the user experience)

Limitations are governed by this language

Web safe colours

 Only 216 colours which work across all devices. When colour first arrived on the web computers could only support a maximum of 256 colours on their 8-bit monitors. A list of 216 "web safe colours" were identified. These colours were reproduced consistently across the web using HTML, specifically a six or where possible a three digit hexadecimal code. 

Red               

#FF0000
#FF0

White 

#FFFFFF
#FFF

Black

 #000000
#000

Red 256 x Blue 256 x Green 256 = 16,777,216

The RGB colour mode is capable of reproducing 16 million different colours.

A wider range of colours can now be reproduced using CSS rather than HTML. These colours are identified using the same principles and Photoshop and Illustrator, by specifying the percentage of 255 per RGB. For example 100% red would be: rgb(255,0,0)

Web Safe Fonts
For a chosen font to display consistently across different computers a standard font must be used. Further to this a font family is chosen giving several "fallback" options to ensure maximum compatibility between browser and systems. For example a browser that doesn't support the first font it tries the next one listed.

CSS font-face allows you to install fonts to a website, meaning the font choice remains consistent regardless of the browser or system.However using font-face breaches licensing and copyright laws related to specific font foundries. Simon told us about free font websites which include free license usage for @font-face kits including font squirrel.

Size, Dimension, Pixel Resolution
When computers were first created the pixels were 640 x 480 which is now tiny on Mac sizes.

800 x 600
1024 x 768 - (design with this size)
1920 x 1080
2880 x 1800 (220dpi)

File Format
PNG - Portable Network Graphic
GIF - Graphic Interchange Format
PDF - Portable Document Format
JPEG - Joint Photographic Experts Group

72ppi - is an outdated pixel ratio, computers could produce at 96ppi. We were told to lower it first as it takes a while to load and will cost bandwidth.

My stages in Dreamweaver: 

Running Website

Overall, I found the workshop really useful and I'm glad I read up on HTML & CSS beforehand as it really helped me. 

Canons of Page Construction

In this afternoons session we looked at grid systems in particular Muller Brockmann's grids. We were instructed how to make a threes column grid, the instructions are as follows:

1) Determine type area (van de graph)
2) Divide in to two or more columns, separate columns with intervening gutter
£) Divide text columns into 2-3 or more fields
4) Determine type size and leading
5) insert 'empty lines' field lines must be separated in order to accommodate gaps between images. Separate field lines (must be same width as 1 line of type heading)
6) Each field should contain a number of lines of type while each empty line should be able to contain single line of type. Images places on the adjacent column will perfectly align with the type as will the image captions. It needs to be 2:3 to be harmonious.

Below are two examples I have tried to transfer the technique by looked at existing layouts from a magazine. Similarly both pages there is definite a three column grid. What I didn't realise is there is a lot behind magazine design that we don't necessarily see straight away. I find I can spot these grids a lot more easier now. 

visual content for my website

I spent a lot of time on illustrator vectoring the logos to use on my website, shown below. I also managed to get my content sorted for the website.  

The Egg of Life symbol is composed of seven circles taken from the design of the Flower of Life. The shape of the Egg of Life is said to be the shape of a multi-cellular embryo in its first hours of creation

The Flower of Life is the modern name given to a geometrical figure composed of multiple  evenly spaced, overlapping circles. They are arranged to form a flower-like pattern with a sixfold symmetry. The most common form of the Flower of Life is hexagonal pattern (where the center of each circle is on the circumference of six surrounding circles of the same diameter), made up of 19 complete circles and 36 partial circular arcs, enclosed by a large circle.

Metatron’s cube depicts the five platonic solids which may be derived form the flower of life. The five platonic solids are geometrical forms which are said to act as a template from which all life springs, according to  spiritual belief. The Platonic solids are five structures that are crucial because they are the building blocks of organic life.

Many forms observed in nature can be related to geometry, for example, honeybees construct hexagonal cells to hold their honey

The ‘Seed of Life’ Is formed from seven circles being placed with sixfold symmetry, forming a pattern of circles and lenses, which acts as abasic component of the Flower of Life’s design

The Seed of Life is a symbol depicting the seven days of creation in which the Judeo-Christian God created life; Genesis 2:2-3, Exodus 23:12, 31:16-17, Isaiah 56:6-8.

The first step in forming the Seed of Life (or Flower of Life) is to begin with a circle (as in a 2D model) or a sphere (as in a 3D model).According to some religious beliefs, the first step in building the Seed of Life was the creation of the octahedron by a divine creator.

The Tree of life is a concept, a metaphor for common descent, and a motif in various world theologies and philosophies. The Kabbalistic form of the Tree of life has historically been adopted by some Jews, Christians, Hermeticists, and pagans. Along with the Seed of Life, in New Age Qabalah it is believed to be part of the geometry that parallels the cycle of the fruit tree. This relationship is implied when these two forms are superimposed onto each other.

The Tree of Life is most widely recognized as a concept within the Kabbalah, which is used to understand the nature of God and the manner in which he created the world ex nihilo. The Kabbalists developed this concept into a full model of reality, using the tree to depict a "map" of creation.

Grid

Over the workshops on canons of construction, I have developed this grid to work across all my webpages. It has been developed using the golden ration and harmonious mathematical proportions. This ties in so nicely with my subject on sacred geometry as it is alway about mathematical ratios, harmonics and proportion that occur through life complexities. 

Web Brief: Possible Colour Schemes

I used Adobe Kuler to pick a possible colour scheme for my website. I used a photograph of the orion constellation from the hubble space telescope. 

Romek Marber Grid

In 1961, a Polish graphic designer by the name of Romek Marber, conceived a grid layout for Penguin book covers that became one of the most praised and recognised layouts of all time. Today, Marber’s design is synonymous with Penguin books. Many people I’m sure could recognise a Penguin book from the layout alone, simply because they’re so well recognised as ‘classic Penguin’ designs. It’s stood the test of time due to Marber’s careful consideration of it’s application and requirements, the fundamentals of any good design.