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

FINAL PIECE #3 – VICTORIANWEB.ORG – SKEUOMORPHIC STYLE

Image

Image

Image

The sliding content effect can be seen on the online version at http://www.onebigegg.com/college/victorianweb.html  (note: the links on the category headers don’t actually initiate the sliding content/articles – instead the 2 buttons at the bottom of the list need to be used on this prototype version).

Reflection:

The Skeuomorphic version of the site is based around a central viewing ‘folder’ that all content and article pages are delivered to.

This is an improvement on the original site for the following reasons:

·         Now visually interesting

·         Improved user experience – appealing to use.

·         Easier navigation between categories and articles.

·         Content page behind article page serves as visual breadcrumb trail back to source of article being viewed

·         Separation of main site navigation (about / links / contact) from content, and ‘Home’ link available at all times

·         Message and Twitter feeds encourage communication by users regarding site (should serve to advertise site to wider field therefore increasing hits, and also the content of the messages themselves should serve as quality content in themselves (users leaving posts relating to query, analysis, referrals and recommendations) and also helps to make the site feel active and live as opposed to static data.  I will particularly please with the headers for the Message and Twitter feeds.  The Twitter logo was grabbed from the internet, but I custom made the Message one using the Twitter logo as a template.  I ‘filled in’ the Twitter ‘T’ so that I effectively had a blank template logo, then created the speech bubble inside.  A CSS3 transform-rotate function was used to have them sit at an angle,

If this were a real project to be seen through to completion, I would need to address the following considerations:

·         The prototype I’ve designed loads separate pages for each content and article page.  This creates a lag in the sliding effect as each of the images that make up the cardboard folder reload.  By the time all have reloaded, the content / article page is already in place.  Ideally I would like to have the site operate as a single page where all content is loaded though Javascript.  I have developed something along these lines when digitising my Grandfather’s war diaries (www.dunfordandwest.co.uk/diaries).  However, that site loads content into the main page from a single page of javascript arrays.  I would need to figure out a way of loading text from individual javascript pages (a javascript page per article), and for the links within the text to contain links to further javascript pages in themselves.  If this were achievable, the content would then be able to move fluidly left>right and bottom>top. I updated the page 08/12/13 so that a jquery command is now used on the landing page to slide in the content and article.  The initial loading page is very slow though.  In a real life project I would see if I can get the speed down by optimizing the images further, and maybe consider introducing an interesting loading graphic (as the slow load period would onlt be experienced the first time that the site is loaded).

·         There is some overspill of content on the content and article pages before they have loaded.  This is a result of the margin around the div area to allow the drop shadow to show.  This would need to be overcome if the project was to be delivered to an actual client.

·         The current prototype does not consider how articles will be viewed when the height is greater than the viewing pane.  I would consider either adding a down arrow to scroll down to remaining content, or a ‘curled page’ in bottom corner to indicate that page should be turned.

·         A responsive version of the site should be created as the sliding folder format would not work well when viewed on mobile devices.  A much simpler version would need to be delivered where the content/article pages are the main feature (rather than the visual folder).

·         In my original analysis of the original website, I mentioned that a feature to view a random article would be very beneficial to this site, and this is something I would definitely add were this a real life project.  This would probably be a tab to the left of the ‘Home’ tab but separated by 10 pixels or so, and in a completely different primary colour (red?) – it could be called ‘Lucky Dip’ as everyone recognises the meaning of this phrase.

FINAL PIECE #2 – VICTORIANWEB.ORG – DATABASE STYLE

Image

Image

Reflection:

I designed this one early on in the project, and intentionally started on the content page first as I knew that the rest of the site (including the landing page) would have to be based around the design concept for the content viewing pane.

However, when it came to working back to the landing page, I could not think of a design solution that sat comfortably within the viewing pane format, so scrapped the right hand side bar for the landing page.

This opened the page up visually, and gave me the opportunity to start thinking of landing graphics & text that will greet the user to the page.

Using the fantastic marketing campaign for Babingtons Tea Rooms in Rome as inspiration (http://2012.effectivedesign.org.uk/corporate_brand/babingtons.php), I created a Vector mascot of a man on a penny farthing.  I wanted to inject some of the daft/eccentric imagery used so effectively by Babingtons, and  a man on a penny farthing never fails to look ridiculous, while perfecting conveying the Victorian theme at the same time.

For the text, I wanted to achieve an effect often seen in newspaper & magazine advertisements from the 1960’s and 1970’s where a short, direct statement is placed either centrally or in a visually compelling location in relation to the image / page.  I had a clear image in my head of how these adverts looked, yet found it surprisingly hard to find examples on the internet.  In my mind they usually consisted of phrasing that spoke directly to the viewer – like “Because he knows time is an asset.”  Or “Go on. Make someone proud today. ”

Having placed the mascot in a visually interesting location (tight in the bottom-right of page), I decided to place the text off-centre  and in good balance to the mascot.  I have chosen a serif font because I think this gives the text a sense of authority and class, again evocative of the adverts from 60’s and 70’s.

If this were a real life project, I would consider developing this landing page further by hiding away the category navigation boxes into a collapsed header or footer, and have this hero image & slogan text fill the whole page.  It would also be interesting to see if I could come up with a number of different slogans that are informative yet slightly ridiculous (in a similar vain to Babington’s Teas). A different slogan would be displayed each time the landing page is opened.

In a real life project, I would also want to add social media feeds as I do believe that this would be a welcome addition to the site.

Final Piece #1 – victorianweb.org – Flat Design

Image

Image

Image

Image

Image

Image

Image

Image

Reflection:

The background image to the header on this site has had a blur effect added.  If I were to develop this into a fully functioning site I would gather more images from the Victorian era and have a variety load into the header – either alternating each time the page is loaded or fading from one to another as the page is viewed.

Much like the skeuermorphic site, the real benefit of this redesign is ease of navigation between the categories.  All of the main categories are always accessible at the top of the page (the reduced header/navigation area and footer would be ‘fixed’ and therefore always showing.  The clutter of about/contact/link have been removed to the footer as these are only likely to be referred to once by the viewer.  There is no need for a link to home as all categories are always available to click on anyway.

The articles ‘pop up’ and appear in front of the main content and appears in a viewing window that is visually suggestive of an ipad.  The colour theme of viewing window border and article header is consistent with the category selected.  When an article is being viewed, the main content behind has significant opacity added to mimic the appearance of an overlay / lightbox.

The beauty of a flat design like this is how easily adaptable it is when creating a responsive version – the creation of which would be a very interesting project in itself.

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