For those of you that haven't discovered Firebug yet, well, shame on you basically. Anyone that is still adding background-color: red; seriously needs to get with the times because tools like this make your life so much easier - as a designer or a programmer.
Firebug basically worked on the idea of being able to edit the code of a page whilst looking at it. What litmus have done is try to take this a step further by allowing you to edit the code of a page and actually save it to the original file meaning you can make changes live, see how it looks and save it. Amazing stuff. I'm still trialing it at the minute so I'll let you know my opinions but, so far, so good. Although, it would take a lot for me to stop using Firebug - I feel I have a loyalty to it as it has, literally, improved my life.
The other intersting product form Litmus - the one you actually have to pay for - is the testing program. This allows you to test what email bulletins and websites would like like cross browser and cross email program. There are loads of other features as well and we'll be doing the 30 day trial at work so I'll keep you posted.
For those of you who want this kind of stuff in your own product / site there is also an API buy in section with more info.
This site has been around for ages now, and undergone a re-design to make it much more usable - but I reckon this is probably the most useful web design links site at the mo:
Thanks a lot to Reece over at guerrilla-gorilla for this little link. Pictogame is a fun and easy way to create several flash games with the faces of all your friends. Simply select a flash game from the extensive list, upload an image of a friend, use the easy crop tool to select their face from the image and enter a few messages (such as 'Well done you killed Andy!')and voila.
Hello all, I'm really sorry it's been so long since my last post. I hope to get some more useful links and tutorials up soon but I've been so busy lately I've not had chance. I've added a few new projects to my portfolio section that have gone live recently and will be adding loads more soon.
Just wanted to add a quick note about a stripe generator I've recently come across. Although striped backgrounds can be an absolute mind frying disaster if done badly they do, occasionally, offer a nice texture if done subtly.
It was only a matter of time before someone made a 'Create your own MySpace' site and ning have done an amazing job. Not only does the site function like a dream but the sample designs they have created are really nice and you have quite a lot of customization available - such as the repeated background I have created on Creative Writing. You can also use firebug to find id and class names and then upload your own stylesheets.
I have created 2 networks so far - one for the company i work for which allows only employees and is a central pool of resources, nice sites, good reads and general things web and design. The second is an open network you're free to take a look at (and join if you'd like) which will, hopefully, be a resource for budding novelists. There is little content there so far but more is to come.
Manchester is My Planet brings together the ten Local Authorities, organisations, businesses and individuals across Greater Manchester to address climate change and energy efficiency. We were approached to revamp their current site and to create a full CMS. The results can be seen at www.manchesterismyplanet.com
They're flying out of the door now. Tameside Prospectus provides an online database of courses for adults and employers in the Tameside area of Manchester. The site contains many features including a course shopping basket, google map integration and a PDF generator. The look and feel was designed as a more adult oriented view of the existing Tameside 14 - 19 Prospectus that went live earlier this year.
Once again the guys at idaho did an amazing job of developing the CMS and implementing the design.
In keeping with the run of sites I've been posting here as they've gone live I thought I'd add a couple more - Urbis (made live earlier this year) and Routes Online (beta made live last month).
Urbis We have worked with Urbis, Manchester for some time now and were recently asked to re-design the site to tie in with the new print and branding materials. Located at the heart of Manchester, Urbis is an exhibition centre focusing on city life. Urbis' exhibition programme explores the culture and dynamism of cities around the world, covering photography, design, architecture, music, contemporary art and much more. Work involved the design of the entire site and the creation of the content management system by the developers at idaho. (Work did not involve any flash that appears on the site).
"...a web based portal for route development professionals. It will be the primary source of daily airport / airline interactivity in the future.
Using innovative 2.0 web technologies it is an integrated data platform for today’s air service development professional working within an airline, an airport or a service organisation.
At its core will be a facility for airlines and airports, through secure, user editable profiles (including video and web casting) to actively campaign their air service development programme 24/7."
The original homepage design concept was supplied by the client which was then adapted and subsequent pages created. The CMS was developed by developers at idaho who did a great job. There is also a banner management system for allowing advertisements to appear on the site.
Phase 2 is currently underway which will be fantastic when completed.
Another site through the door. LIVING-i was designed for Persimmon to showcase their new innovative homes built in Irlam, Manchester.
The LIVING-i project was conceived to help Persimmon try and assess various materials and modern methods of construction for the future. Persimmon strive to improve all areas of house building, with focus on quality control, increasing the speed of build and addressing the skills shortages within the industry.
Work involved the design of the completely content managed site including icon creation.
After a complete branding revamp, idaho technology were asked to look at the 2007 site for the Manchester Pride Festival. Having worked on the site for several years we instantly knew the kind of approach they would be after and set about creating a neon-on-black look. This was a nice change for me as it is actually the first black background site I've designed. The neon colours are effective against the background and the tile grid structure works well.
The site is completely content managed - even down to the text link over the big star image which uses a .png gradient overlay on top to ensure the text is readable over any image or graphic they might add.
Design of the site was developed in conjunction with Stuart Newton (Director / Developer of idaho technology).
For anyone who has already seen the London 2012 Olympics logo my sympathies are with you.
To my surprise it was created by Wolff Olins. I'm not one to openly criticize other designers work as there are always pressures and direction from clients and, quite often, reasoning behind things a lot of people miss but I have to say this is far from my favourite logo creation. He is responsible for some great branding exercises spanning over 40 years and is considered a legend in the design community. That is the reason I was so surprised when I discovered he created it.
I understand that you need to appeal to the younger audience with the logo but you also need to appeal to a very general demographic as well - not to mention potential high status sponsors.
'It will become London 2012’s visual icon, instantly recognisable amongst all age groups, all around the world. It will establish the character and identity of the London 2012 Games and what the Games will symbolise nationally and internationally.'
In a way I suppose it is definitely easily recognisable. Maybe it will be like the new Adobe CS3 icons. At first you think 'what the hell are they?' and then as time goes on and you see them in use alongside the now weak looking Microsoft Office 2007 icons in your quicklaunch bar you start to love it.
It was described by AnotherWestie (BBC 606 user) as looking like:
...a logo designed for young people by old people who don't understand young people.
There seems to be quite a large online backlash against this logo. There is even a petition to get rid of it here which, at the last count, had 19267 votes.There is also a petition to support the new logo here which, at the last count, had 1 vote. As mentioned on Design Week [06/06/07] there has been a large amount of camaraderie amongst designers who feel that the task is a big one to live up to. The logo had to be 'dynamic, modern, flexible, distinct, different and inspiring' whilst being '...inclusive, and avoid using images of sport or London in order to to increase its appeal to non-sports fans and those outside the city'. Like any major project it is hard to see what goes on behind the scenes and the influence from the clients (of which there are often several as part of a committee) so please don't see this post as an assault on Wolff Olins and the work they create - as mentioned before they have done some great work.
Personally I just preferred the old logo but, then again, how many times has the swooshing, interweaving coloured lines been used now? It is certainly not an easy job.
Maybe, as mentioned on the BBC Sports Editors Blog this is just all a big media campaign and they have released this logo only to retract it in favour of one submitted by the public through their website. The London 2012 website is asking for people to download their templates and create a design which sums up the 2012 Olympics. This is a great idea and gets people to air their creative side (whether naturally artistic or not). I have submitted one which uses their template and incorporates the old London 2012 logo (see below). It is supposed to sum up the carnival atmosphere that comes with the Olympic Games and, bearing in mind this only took 15 mins on my lunch break, it is far from a great design and I'm sure the Olympic Game Committee would rip it to shreds.
Let me know what you think. I am quite interested to see the general reaction to the new official logo and how you think Wolff Olins should react to this outcry - it certainly isn't a nice situation to be in but definitely highlights the power of online speech in todays society.
Well, as promised here is a quick breakdown of the flash video player and how to create a custom skin.
First of all, there are several ways to import your video into flash. I have mainly been using the src and the import method. Import Method
File > import > import video…
You will be asked how you would like to deploy your video. I have been using Progressive as using the Flash Communication Server to stream it is a little pricey.
You will then be given several options for encoding your flash video. You can have a mess around with these settings to find exactly what you’re after.
When you get to the Skinning screen you need to select ‘None’ if you want to create your own player. Alternatively, there are plenty of built in ones you can choose from.
SRC method
This method uses the FLVPlayback component and references the actual .flv externally. Place an instance of the FLVPlayback component
This says the content path of the flvPlayback you just created is the src. This is the src referred to in the html you use to place your video player in your web page (more about this later).
Adding controls
Right, you now have your FLVPlayback component it is time to start adding some controls. Open the components palette again
window > components > FLV Playback custom UI
and you will see a selection of controls available. Simply drag the ones you want onto the stage. In the actions layer you created earlier add:
This assigns each control to the flvPlayback instance. Obviously you might not need to add all of these. It depends on which controls you intend to use. You will need to give each control an instance name. These need to match the names to the right of the equals sign in the code you just entered above. For example, the Play / Pause button would have an instance name of playpausebtn etc etc.
That is pretty much it for the basic flash player. If you export your movie (ensuring the flv is in the same location as the exported file) you can now add it to a page.
Adding the Timer
The timer isn't actually a component you can add to the stage but a small piece of actionscript you will need to add yourself. One thing with progressive download is the fact that until the entire movie is downloaded you cannot show the total time. You can, however, show a play head time by adding a movie clip to the stage. Inside that movie clip add a dynamic text box and give it an instance name of 'time'. Now, you want to check the play time every second so, in this movie clip, add a frame at 24 frames (or whatever you have your frame rate set to).
In the first frame add an actions layer and add the following actionscript:
This basically takes the playheadTime of the FLVPlayback, rounds it and displays it in the time text box. The bit towards the end styles the time in 0:00 format. For example, with minutes, if there are less than 10 minutes then it adds a 0: else it adds nothing.
Firefox and Internet Explorer embed the flash in slightly different ways which is the reason behind using the Object and Embed to do effectively the same thing.
The code marked in red is the source of the .flv file. This is also the same src that is referred to in the actionscript we added earlier. The code marked in blue is the swf you just exported of the player.
Customizing the flash player
Now you have your basic flash player working you can start adapting it to suit your needs.
Each of the controls is a simple movie clip. By clicking into each control your have the ability to alter the background shapes, sizes, colours etc of the buttons and icons.It's as simple as that.
For example, double clicking the stop button gets you into the StopButton movie clip. Note, the movie clip name is StopButton but the actual instance name refered to in the actionscript is stopbtn. It is important not to mix these up.
Here you will find an actionscript layer and 2 frames. The first one is the basic stop button, the second frame holds all the possible states of that button. E.g. hover, down etc.
Clicking in another level takes you to each individual state movie clip. For example, clicking on the hover movie clip opens up StopButtonOver clip where you can adapt the icon and background shape. If you keep clicking into the background shape and alter it it will affect all other places where that instance is placed on the stage. E.g. If you keep clicking into the stop button background until you can go no further then alter the colour, the background colour of all the other buttons will also change as they all use the same graphic as a background.
In conclusion
Well, I hope this has been useful. I noticed whilst typing that it is all a bit rambley so sorry if you have trouble following this but it shows the possibilities of customizing your own flash video skin. If you have any advice or tips please don’t hesitate to add a comment by clicking on the number of comments below and clicking ‘Post Comment’.
Just thought I'd do a quick post to let you know what I'm up to. I've been experimenting with flash video recently and have created a custom flash player. I realised there is a lot to video encoding and formatting I knew relatively little about before embarking on this current project. I have, however, learnt quite a lot of nifty techniques along the way and am over the moon with the outcome. I will be posting the player here to view once the site goes live and will probably do a bit of a tutorial as well.
Well, a big thank you to everyone who took part in this poll. I've decided to cap it at 200 441 votes as it just keeps on rising. A big thanks to Cameron Adams who featured a link to this poll on his homepage and to Dan Lindop for your kind comments. Well, onto the results. I discovered quite a few programs in the 'other' section that should probably have been in the initial poll such as Indesign(2), eMacs(1), UltraEdit(2), TextWrangler(1), Lotus Notes(1), VIM(1), VI(1), PaintShop Pro(1), ZEND Studio(1), GoLive(1), Coda(1), XARA(2), TextMate(10), skEdit(1), CSSEdit(1), OmmiGraffle(2), Notepad(2), Smultron (1), Quanta Plus(1), jEdit(2), PHP Designer 2007(1), Homesite(1), Inkscape(2), CrimsonEditor(2), SCITE(1), Textpad(1).
I also discovered after posting the blog that it is difficult to decipher between designers, developers and people who do both so the poll should probably have been split into separate elements really. For example, coming from a very technical company I assumed programs like Edit Plus and Visual Studio would feature higher than Dreamweaver but it was probably Graphic Designers as opposed to Web Developers who checked this box. I have analysed the results and split them into the two separate elements.
As I've never created a poll before I thought I'd try it out here. In response to a comment I received regarding my post 'Web design Good Practice - the basics' [09/02/07] that disagreed with me that Photoshop is probably the most used program for creating web layouts I thought I'd find out. Please feel free to complete this simple poll and add any comments if you want to expand on the subject.
A big thanks to Patrick McNeil for including my site on Design Meltdown - it was a nice surprise. Nypo:creative has been added to the new 'Muted' colours section which features many toned down sites with splashes of more vibrant colours to add emphasis.
Patrick says
"...the goal of Design Melt Down has become to collect and categorize sites into classifications that you simply can't search for. In addition I aim to provide additional links and resources to follow through and implement the given subject. My hope is to inspire and challenge, both myself and my readers."
You can view the Nypo:creative entry here. It is 4th down on the left.
Just wanted to say thank you to the growing number of people who have been visiting my site and subscribing to my RSS feed. Fell free to forward any links onto anyone who may be interested in the stuff I'm writing about and also to make comments on any of the posts here - whether you agree or not.
"The Design links and RSS feeds" [posted 23 March 2007] has now been updated to include some sites I overlooked. There is also a bookmarks file for you to import straight into your bookmarks / favourites and an updated OPML RSS import file.
Enjoy - and add your site in the comments section if you feel it should be up there.
After reading an article this week I thought I'd write a post on Adobes plans for an online future. Following in the footsteps of Google - or realizing that Google may well take over the world if someone doesn't stop them - Adobe recently announced it is planning on making an online version of Photoshop. The plan is to create a hosted version of Photoshop that would be free to use. At first I couldn't imagine the stress I would cause with the memory intensive tasks I so regularly put Photoshop - and my machine - through working well online but the plan is to create a stripped down version.
With CS3 available now with it's fancy new features it will be interesting to see just what tools Adobe can offer for free online and how their products might stack up against Googles ventures into this area with Picasa. Bruce Chizen (Adobe CEO)recently stated:
"If we offered a host-based version of Photoshop that's Photoshop branded and potentially better than Google's Picasa, you'd probably go down the Photoshop route because of your belief in the brand and the quality associated with it"
While this may be true of designers and developers I think Joe public might be more familiar and at home with Google. However, Adobe have a great track record for creating quality products and, with Flex looking very interesting now, I don't doubt they'll create a great product that will have many of the existing photo-editing startups losing sleep.
Came across this letter on Digg today. The author is unknown but there are some funny comments which, if you work in the world of the web, you'll probably be able to associate with:
Dear Mr. Architect:
Please design and build me a house. I am not quite sure of what I need, so you should use your discretion. My house should have somewhere between two and forty-five bedrooms. Just make sure the plans are such that the bedrooms can be easily added or deleted. When you bring the blueprints to me, I will make the final decision of what I want. Also, bring me the cost breakdown for each configuration so that I can arbitrarily pick one.
Keep in mind that the house I ultimately choose must cost less than the one I am currently living in. Make sure, however, that you correct all the deficiencies that exist in my current house (the floor of my kitchen vibrates when I walk across it, and the walls don’t have nearly enough insulation in them).
As you design, also keep in mind that I want to keep yearly maintenance costs as low as possible. This should mean the incorporation of extra-cost features like aluminum, vinyl, or composite siding. (If you choose not to specify aluminum, be prepared to explain your decision in detail.)
Please take care that modern design practices and the latest materials are used in construction of the house, as I want it to be a showplace for the most up-to-date ideas and methods. Be alerted, however, that kitchen should be designed to accommodate, among other things, my 1952 Gibson refrigerator.
To insure that you are building the correct house for our entire family, make certain that you contact each of our children, and also our in-laws. My mother-in-law will have very strong feelings about how the house should be designed, since she visits us at least once a year. Make sure that you weigh all of these options carefully and come to the right decision. I, however, retain the right to overrule any choices that you make.
Please don’t bother me with small details right now. Your job is to develop the overall plans for the house: get the big picture. At this time, for example, it is not appropriate to be choosing the color of the carpet.
However, keep in mind that my wife likes blue.
Also, do not worry at this time about acquiring the resources to build the house itself. Your first priority is to develop detailed plans and specifications. Once I approve these plans, however, I would expect the house to be under roof within 48 hours.
While you are designing this house specifically for me, keep in mind that sooner or later I will have to sell it to someone else. It therefore should have appeal to a wide variety of potential buyers. Please make sure before you finalize the plans that there is a consensus of the population in my area that they like the features this house has. I advise you to run up and look at my neighbor’s house he constructed last year. We like it a great deal. It has many features that we would also like in our new home, particularly the 75-foot swimming pool. With careful engineering, I believe that you can design this into our new house without impacting the final cost.
Please prepare a complete set of blueprints. It is not necessary at this time to do the real design, since they will be used only for construction bids. Be advised, however, that you will be held accountable for any increase of construction costs as a result of later design changes.
You must be thrilled to be working on as an interesting project as this! To be able to use the latest techniques and materials and to be given such freedom in your designs is something that can’t happen very often. Contact me as soon as possible with your complete ideas and plans.
PS: My wife has just told me that she disagrees with many of the instructions I’ve given you in this letter. As architect, it is your responsibility to resolve these differences. I have tried in the past and have been unable to accomplish this. If you can’t handle this responsibility, I will have to find another architect.
PPS: Perhaps what I need is not a house at all, but a travel trailer. Please advise me as soon as possible if this is the case.
This is amazing. Not only does the initial homepage go back to the roots of great search engines (ie a just text box and simple options) but the scripting and linking between results is great. It was described by adobe as:
“A relation-based search engine for Amazon.com that is made with Flash and ActionScript 3.0. Visualize a relation network of products from the data of "customers who bought this item also bought" by digging related products again and again. Amaznode is not only for searching but also good for researching and making an associate link.”
Is it the future of online shopping? Maybe not or, if it is, then a suitable method of finding one specific item without loads of options appearing should be sought. What it is, however, is a really nice visual method of viewing relationships between products. It’s like Thinkmap Visual Thesaurus for the online retail world.
Visit the site here: amaznode.fladdict.net/ or check out Takayuki Fukatsu (designer and developer of Amaznode) and discover some of his great flash experiments.
Let me know if anyone has any other examples of really nice ActionScript3.0 stuff.
[update: v2.0 is available now] After discovering you can add your own stylesheets to the Firefox RSS reader Sage I set about trying to make it a bit nicer than the blue boxes that currently come as standard.
Click here to open the nypo stylesheet. To install simply do File > Save Page As and save it to your desktop. Open Sage options > settings > and select 'Use Custom Stylesheet'.
Although you do not have the advantage of viewing lots of posts in one window that you currently get with the standard stylesheet you can view the entire list in the left hand column as text links.
[update - 13/04/07] Some new sites (and sites I forgot to add) have now been added below. I have now included a file to be imported into your Favourites / Bookmarks if you want the entire list. Click here to download it. You will then need to save it to your desktop and import it into your browser. Don't forget you can import the entire RSS feed list into you reader below. The OPML file has now been updated so you may want to download them again to include the new sites and feeds.
After seeing several sites offering collections of design links and feeds I thought it might be useful to bring them all together into one mammoth list of ones I currently subscribe to or visit. Hope this proves to be useful.
You can import the entire list of RSS links into your reader using the OPML format. Click here for the entire mammoth list and select File > Save As to dump it on your desktop. There will be an option in your reader to import RSS feeds.
Feel free to add comments with sites you think are useful or just good and I'll add them to the list. This is more of an ongoing thing which I hope will grow into a useful resource for designers / developers.
For those of you that haven't discovered Firebug yet, well, shame on you basically. Anyone that is still adding background-color: red; seriously needs to get with the times because tools like this make your life so much easier - as a designer or a programmer.
Posts
2 comments:
Post a Comment