Coding issues with CSS3 transform-animation function

Although the hand-in for the previous project happened on Wednesday and we have moved on the next task, I decided to return to my redesign of victorianweb.org today because I wasn’t satisfied with the way the pages loaded when viewed online rather than locally.  

The content and article pages slide in from side / bottom using the CSS3 transform-animation, function.  However I found that the animation was happening before all of the img components that make up the cardboard style folder loaded.

After a bit of research on W3 Schools and StackOverflow I thought this would be a fairly quick and simple task by adding the animation-delay function, adding delay to the animation to give the img components chance to load first.

However, it turned out to not to be a simple task at all, and I spent most of the day trying to get the delay function to work properly.  The delay function worked as expected except for the fact that the content/article would disappear as soon as the animation had finished, which hadn’t been an issue before the delay was added.

I decided to isolate the slide function into some raw code, and have a play around with animation/delay functionality without the clutter of code of the project code.  However, it still suffered from the same issue.  

The result of the practice code can be seen here: http:/www.onebigegg.com/college/delay_practice.html  This little disappearing red box has been the tyranny of my Sunday!!!

I posted a query to Stackoverflow.com, and somebody did suggest that I add an ‘animation-fill-mode: forwards;’ command to css but this only seemed to work with Firefox.

In the end I decided to scrap the idea of trying to use CSS3 functionality to achieve the sliding transition and instead try to incorporate a jquery function so that only one page is loaded and the content and article slide in from a jquery command – and it worked – phew!

The result can be seen at http:www.onebigegg.com/college/victorianweb.html

I haven’t incorporated the commands into the category links – I have just linked them to two buttons at the bottom of the categories as I want to move on from this project now that I know that it functions OK.  However, I know that it’s going to bug me not being quite complete and no doubt I’ll try to link the slider commands into the <a href> links later in the week…..

 

 

 

Advertisements

PERSONAL DESIGN PROJECT – ARTIST AT WORK GRAPHIC

This week my Uncle gave me a digital photograph of himself sketching, with a request that I email it to the marketing department of the venue for his forthcoming exhibition for them to use in press releases and other promotional work.

Here is the photo he gave me:

Image

I felt that the photograph wasn’t very compelling artistically, and lacked impact.  Also, the placement of the tree in the background made the composition of the picture look quite unprofessional.  I therefore decided to artistically update the image before sending out.

First, I cropped out the main figure.  I’m getting used to using a combination of pen, magnetic lasso, magic wand and quick selection for cropping. I then added an outer glow to the cutout figure.

Image

Next, I added a grey background, with a rounded rectangle in the middle with out glow and stroke, and a graphical text header (the font for Sussex Artist was download from Dafont.com).The layer containing the sketching figure was kept near the top so that it appears above the background:

Image

This will form a template that can now be used for a variery of uses.  I will suggest to my Uncle that it be used for the invitation that are sent out in the post for the private viewing on the opening night of the exhibition.

This template also works well when an image of typical sussex countryside is dropped in behind the central rectangle:

Image

The image of the sussex countryside is a photograph I took in the summer, and you can see that the barn in the bottom left corner is an unwanted distraction.  I removed it using the clone stamp tool to fill it with copies of trees:

Image

This is now a much more engaging and professional looking image than the original, and will be sent to the gallery’s marketing department this week.

Also, I tried adding one of my Uncle’s own paintings as a backdrop but felt that the overall message of the image was now confusing, with the artist sketching his own art:

OLYMPUS DIGITAL CAMERA

 

 

I then gave the same treatment to a 2nd photograph provided by my uncle.

Before:

OLYMPUS DIGITAL CAMERA

 

After:

OLYMPUS DIGITAL CAMERA

Personal Design project – onebigegg.com

The recent poster run for my Uncle was my first paid job, and so I am using this small cash transaction to start an invoice and cashbook system under my website name onebigegg.com.

I created a homepage for onebigegg.com earlier this year, and had some business cards printed but had not until now created a logo that can be used for some consistent branding.

Previously I had plans to use a colour image of an egg on printed letterheads, using the image below that appears on my current business card:

Image

However, having colour printed letterheads would be a significant expense that can’t really be justified at this stage of my design career.

Therefore, I set myself a design project this evening – to create a monotone logo that can be used as a consistent brand across all paperwork (invoices, letters, receipts etc).

I initially sketched a few ideas:

xxxxxx

For 20 years now I have been a great admirer of the typeface used on the logo for the band “The Breeders” and I decided to have a go at recreating it with a plan to incorporate it into the onebigegg logo.  Here is the Breeders’ logo below – you can see that it is a transparent text with heavy stroke and tight tracking so the letters slightly merge into each other:

Image

The below image shows my development of trying to recreate this typeface:

Image

I now attempt to build this into a logo:

Image

As much as like this customized type, I didn’t feel that it was particularly suitable when incorporating into the required egg logo.

From the earlier sketches, I felt enthusiastic about the contrasting writing as the name transects the egg (black words “One Big”, white word “egg” inside black coloured egg) and decided to play around with this idea in Photoshop.  I decided on the Cooper Std font, which has seventies/professional/media feel to it.  After a bit of playing around with the positioning, and experimenting with the spacing between (and capitalisation of) the words, I was finally pleased with the end result.  Below is an evolutionary trail of the design:

Image

I feel that the final version (bottom of screenshot above) has good balance to it.

I was now ready to incorporate this logo into a stationary template that can be printed out in black and white, and these used for future printing of invoices, letters and receipts:

Image

And finally….. Photoshop is a great tool for making your Mum believe that you’re far more successful than you actually are….

mini

Non-college design work – Exhibition posters

Earlier this year I designed and created a website to showcase my Uncle’s artwork (www.davidwebbartist.co.uk).

With an exhibition coming up in January, my Uncle asked me to design three posters to advertise the show.  This was my first print based project.  The three designs are shown below, and this week I had them printed using the college’s Print Room.

A4_1 A4_2 A4_3

 

 

 

Tutorial – 27/11/2013 – Dreamweaver & Image Optimization

In this week’s tutorial we learned how to

  • Optimize images for the web
  • Create a new site on Dreamweaver
  • Create a template on Dreamweaver
  • Import images to a Dreamweaver template

I used one of my ‘redesign’ projects in photoshop to practice optimizing the associated background and header images to import to Dreamweaver and create a webpage using Dreamweaver templates.  Here’s the result:

screenshot3

(Note: the header graphic is not actually a complete logo at the moment)

As I am happy coding directly in html / css I decided to work on transferring my 2nd photoshop-based redesign to a live web-page, but straight into the code editor (rather than template).  This is the first time that I have composed the design in photoshop then transferred into html/css element by element.

My redesign of the victorianweb.org site is based around three distinct layers:

  • A background layer for the back of the ‘cardboard folder’
  • A Foreground layer for the front of the ‘cardboard folder’
  • Content sheets sit between the two layers

To achieve this, I performed the following:

  • Optimised images in photoshop and saved in website directory
  • Created new site in Dreamweaver
  • Created an html and corresponding css page in dreamweaver
  • Wrote code in html for content of page (see below) – including Unordered list for category links and image anchors for composition of cardboard folder (2 parts – front and back) and content
  • Wrote code in css for styling – including absolute positioning for image of rear of cardboard folder and relative positioning for image of front of cardboard folder, and also the sheets of ‘content’.  These elements were all stacked on top of each other by giving a z-index value to each.
  • Text-shadow added to list item texts, and alternate colour added to hover on the list items

During the lesson I only had time to add an active link to the first category (Victoria and The Victorias).  When clicked this reveals a page of content.  In the final version, I hope to have this slide in from the left using the webkit-transform tool.  At the moment though, it just opens a new page with the content showing.

Below are screen shots of the 2 pages in progress so far.  However, the actual sites can be viewed online at http://www.onebigegg.com/college/home1.html

Image

Image

Here is the html code for the above page:

<body>
<div id = "container">
<div id = "folder_container">
<div id = "nav_list">
 <ul>
 <li> <a href = "home1.html">Victoria & Victorians </a> </li>
 <li> <a href = #>Social History </a></li>
 <li> <a href = #>Politics </a></li>
 <li> <a href = #>Economics </a></li>
 <li> <a href = #>Gender Matters </a></li>
 <li> <a href = #>Philosophy </a></li>
 <li> <a href = #>Religion </a></li>
 <li> <a href = #>Science </a></li>
 <li> <a href = #>Technology </a></li>
 <li> <a href = #>The Arts </a></li>
 <li> <a href = #>Architecture </a></li>
 </ul>
 </div>

 <div id = "folder_back">
 <img src="images/vicotorian-folder-back.jpg" width="960" height="614" />
 </div> <!-- end folder back -->

 <div id = "folder_content">
 <img src="images/vicotorian-content-one.jpg" width="585" height="561" alt="victorian_content_one" />
 </div> <!-- end folder content -->

 <div id = "folder_front"> 
 <img src="images/vicotorian-folder-front.png" width="960" height="614" /> 
 </div> <!-- end folder front -->

 </div> <!-- end folder_container --><!-- end container -->
</div>
</body>

Tutorial 20/11/2013 – Flat Design

In today’s lesson we looked at Flat Design principles.

Flat design is an area that I have looked into previously and is design style that really interests me.

Earlier this year I created a web-site for my Uncle to showcase his paintings, which while not entirely ‘flat’, was influenced by flat style sites before I realised that this was an actual design principle.  

When designing the site (www.davidwebbartist.co.uk), I had just seen the new Windows 8 operating system and really liked the UI idea of using big, colourful tiles, and decided to use this idea as a starting point.

Since then I have followed the trend, mainly though the regular features in Web Designer magazine and various blogs, and have observed the colour / whitespace getting bigger and bolder, and an increasing use of parallax scrolling (varying layers scrolling at different rates) which adds highly versatile and dynamic visual options, and is something I would like to explore in the near future.

I have also noticed a trend for flat sites to make use of BIG footers that hide away nicely to a narrow bar, or indeed the same principle for the main header nav options.

Resources to check out:

  • designrazzi.com
  • pinterest

In today’s lesson Phil introduced us to UI Kits – an option I’d never heard of before.  There are some really beautiful design packages available, and I’m really looking forward to deconstructing some of them and attempt to recreate to get some practice and experience with creating UI graphics of this nature.

We were set a task to create a ‘flat-style’ home page for our current project sites, while adhering to the current ‘flat’ principles:

  • Bright colours / pastel colours
  • Consistent colour schemes
  • Big bold buttons / links
  • Big type for site title
  • White text / white icons on coloured backgrounds
  • Lots of ‘white’-space

WIth these principles in mind I created the following design for Victorianweb.org in photoshop:

Image

 

 

I gathered the icons from various sources (via google searches).  Some were already white.  For those that were originally black, I inverted the colour (CTRL-I) then removed the background and positioned into place.

For the hero image, I removed the colour tint to make it more monotone, then added a gaussian blur.

The screenshot below shows the same site but with the footer expanded:

Image