Ostrich

head in hiding

SVG

Posted on: March 26, 2018 at 3:17 pm Posted in: Uncategorized

Scalable Vector Graphic

  • Defines the graphics in XML format
  •  Graphics do NOT lose any quality if they are zoomed or resized
  • Every element and every attribute in SVG files can be animated
  • Is a W3C recommendation
  • Integrates with other W3C standards such as the DOM and XSL.

Why SVG?

  • Advantages of using SVG over other image formats (like JPEG and GIF) are:
  •  images can be created and edited with any text editor
  •  images can be searched, indexed, scripted, and compressed
  • images are scalable, can be rendered in any size and resolution without reduction of quality “Worry free” resizing,  you might think of it as.
  • SVG quality images helps vision impairments. a tick for accessibility.
  • Controlled with CSS and JavaScript

How do I create an SVG?

Graphic made in Adobe Illustrator

The Scandinavian symbol for something worth seeing.

SVG In Html5 using code

In HTML5 you can embed SVG elements directly into your HTML pages

For example: Circle

Code explained:

  • An SVG image begins with an <svg> element
  • The width and height attributes of the <svg> element define the width and height of the SVG image
  • The<circle>element is used to draw a circle.
  • The cx and cy attributes define the x and y coordinates of the centre of the circle. If cx and cy are omitted, the circle’s centre is set to (0, 0)
  • The r attribute defines the radius of the circle
  • The stroke and stroke-width attributes control how the outline of a shape appears. I set the outline of the circle to a 4px green “border”
  • The fill attribute refers to the colour inside the circle. I set the fill colour to aqua
  • The closing</svg> tag closes the SVG image.

Other shapes Rectangle, Ellipse & Line.    

 

Code for each shape:

Posted by: Lyla

Good website examples

Posted on: October 3, 2017 at 6:52 pm Posted in: Design

 

Investopedia 

http://www.investopedia.com/uk/

 

 

 

 

 

I find to be very informative, displaying all sorts of topics on the homepage for you to choose. The navigation around the site seems relatively simple and straightforward. There is a search bar option to which you can type in key words bringing up different articles perhaps relevant to your chosen topic of choice, a tick for SEO. In terms of the visual aspect of the of the site, the ratio of picture and text is good, the size of the pictures are not too overpowering and of high quality. It is very responsive strengthening the accessibility of the site. Overall I feel the user experience is sound. When accessed on another device such as the phone it adapts well to the size of the screen adjusting the text font but still very readable, the menu is condensed and features like the search bar is still included.

 

 

 

Tate modern 

http://www.tate.org.uk

 

 

 

 

 

 

 

I feel the site is a reflection of what the tate modern itself showcases, displaying the range of artists old and new, upcoming and ones to watch out for. I must admit that I like the busyness of the site in terms of picture orientation and text layout ,it mirrors the feel of tate modern itself when you visit.  Events are clearly shown. The navigation is relatively easy, on the mobile device the sites features such as the search bar is clear. Minimisation of the site reacts well and the navigation buttons to screen size adjust accordingly. Important importation such as transport variations on how to get there and location is displayed appropriately. It is also compatible with different browsers giving the user good consistency.

 

 

 

Keishi Jewellery 

https://www.keishijewellery.com

 

An absolute favourite jewellery brand of mine. The aesthetics of the site are clean and simple, this I feel reflects the nature of the brand and shop layout. The fonts are readable and work relatively well together. The drop down menus are simple and each category is spilt to make it easier to find a product, a tick towards intuitive navigation. Most recents are displayed on the page so you can keep up to date with trends. The search bar is convenient. The opening times are clearly displayed, this is hard to find normally so for me, it may sound really silly, is a bonus. High quality images are used and if you hover over items it tells you the prices and still displays the image behind with addition to its availability straight away. It is very irritating clicking on a product to find out it is not in stock, you wished you didn’t go through the hassle of clicking on it, adding to bag and then receiving an ‘out of stock’ error message.

 

 

 

 

Posted by: Lyla

Good design examples

Posted on: at 6:24 pm Posted in: Design

These three examples are objects I use most days if not everyday.

Simple, functional and very convenient . To me, good designs.

 

 

The Pen (latin: penna feather) 

We no longer have to top up our quills with ink..

 

 

 

 

 

 

The modern type of pen comes in various sizes, it can have many different uses, to colour, to write, to highlight and it can dispense different types of ink. Able to write on different types of surfaces. There are inexpensive and also more pricey types to reach different target audiences. It is the most common tool for everyday writing. It is accessible to majority of people. This particular pen is protected by its very own lid. It is sturdy to write with good grip. It is also easily portable. You can choose to keep most things on the computer but arguably there is something special about writing that can’t be wiped out.

 

The Thermos 

Coffee or tea on the go… yes please.

It consists of two flasks one inside the other and joined together at a point at the top.  The gap between the two layers is partially removed of air producing a space which reduces heat transference. It is easy to travel with, it is not too heavy even with contents inside, it keeps your contents warmer or cooler for a reasonably time whilst acting as a container. It is relatively easy to clean and dishwasher safe. It can hold a range of food and drink products. The design of the screw on lid prevents any leakage. A great size for me personally, you can store it easily inside a bag, it supplies a sufficient amount of liquid and is refillable. There are also more creative uses of a thermos, according to ehow.com it can also be used as s stationary holder in the office or for the budding gardeners out there, a place to grow a vining plant.

 

The Rucksack (backpack, knapsack…)

A cloth sack secured with shoulder straps…or is there more to it?

It is designed to hold several items at one time, it can be used as a method of transporting items in an easier and more convenient way. It has the capacity to hold various weights for longer periods of time. It can come in a variation of colours and sizes dependant on the use it is intended for. It is lightweight, waterproof and made from durable long-lasting material. Aims to disperse weight evenly to prevent from harm on the body. There are various pockets and design features to enhance organisation and safety of valuables such as a laptop.  Can be used for a range of activities. Reflective material is also included as part of the design enhancing safety at night time.  It is relatively malleable and can be folded down to store easily. Cleaning should not be a problem.

 

 

 

 

Posted by: Lyla

Hello world!

Posted on: September 27, 2017 at 3:59 pm Posted in: Uncategorized

Capturing my personal journey into web design.

Posted by: Lyla