Showing posts with label design. Show all posts
Showing posts with label design. Show all posts

Sunday, 4 July 2010

KIACS Online - New Design

Here is the latest design for my website.

If you compare the new design with the current design, it's clear to see how much my design ideas and quality of design as developed in just under a year.

Originally, my logo had 4 different colours and the font wasn't very modern looking. I've decided to stay with the layout of the logo (the words under each other) but I've decided to use a clear, funky font and just the green because it looks more slick, more fun and less rough.

The logo on the far right is my official logo, the arrow with a blue circle underneath, reflects the cycle of design, development and deliverance. By crossing it over with an arrow, this connotates a different "direction" in my work, and reflects my approach to design being clear, simple and effective.

I've continued to use the green and blue as the main colours for the website, dropping the red and white as these offered too much variation and detracted from the website development as I was trying to work with too many colours.

In terms of content, the website will house my graphic and website design work I've created over the last 2 or 3 years. Not only will there be a portfolio section with live previews of my work, but the blog will serve the purpose that this blog currently does. This will all be backed up by my twitter page, where users will be able to access my latest tweets, straight into the website.

I will be using HTML, CSS, PHP, MySql and probably (hopefully) jQuery where I can.

Overall, this new website design is sleek, modern, clean and effective. It will serve its purpose to a great standard and will be a design I am happy to keep for years to come hopefully.

Thursday, 29 April 2010

I've Won an Award!

During my time on the NTU Pride committee as publicity officer, I've been given the opportunity to rebrand the society and create their new website.

Incredibly, my efforts have been recognised and I have been awarded with "Best Website" from the Societies awards.

This has been an incredible acheivement for me and I couldn't be happier!

Tuesday, 20 April 2010

Tribe Scuba - Initial Designs


These are my first few initial designs for the layout and colour schemes for the new Scuba Diving website. I've also created a mind-map to get some of my ideas down on paper before going about implementing any sort of initial design, either drawn or photoshopped.

Monday, 22 March 2010

PRIDE: Tweeks and alterations

The NTU Pride website has been playing on my mind a bit recently due to some little flaws in design and it not being graphically professional enough for my perfective nature!

So, I decided to do a bit of editing!

I've changed, on every page, the navigation menu from individual pictures to a simple text navigation, which has cut back on LOADS and LOADS of code but looks identical. The sub-menus still need converting, but it's starting to come together.

To make the NTU Pride brand more accessible, I decided to create the "badges" branding concept. This is where there are individual "badges" or "tiles" which indicate each sexuality or each different minority. These are refelected through the NTU Pride logo and pick up on each individual colour. This has also enabled me to create continuity throughout the website and printed media, especially as next year's fresher's fayre flyers encorporate this design.

In the realm of cleaning up code, I've also made the background image MUCH smaller and just repeated it on the Y axis, so that it loads much more quickly and can be repeated, meaning that text no longer over runs the end of the website, an issue I've been meaning to change for quite some time.

The auto-image changer has also been on my mind due it the images being quite old and dated, I've decided to remove those images and replace them with the "badges" idea to maintain continuity and it also gives the space to promote that NTU Pride is now officially sponsored by Propaganda.

To come: redesign of the committee section and ideas to cut down text.

LUCY: Website tweeks and development


I have gone through and tweeked various things throughout Lucy's website and added in a more secure login system to prevent hacking of the blog and gig updates etc.

Fixed various design flaws - including too much inconsistancy between headings and colours etc. Things are a lot more structured and userfriendly now, including headings, possitioning and other TINY little things in the code that usually wouldn't go noticed, but make a massive difference to the professional quality such as padding etc.

I've also made the add, edit and delete forms for the blog and gigs MUCH more user friendly by changing the text boxes to drop down menus.

You can now upload photos up the 3MB and the system will automatically downsize it to fit within the constraints of the website WITHOUT distortion, however the file size will remain the same.

The login procedure is now MUCH more secure. People can't edit the blog or gigs by accessing the individual pages, they MUST log in. (Which was previously a flaw in the last log in design)

I've added in a random image selecter on the home page so that it will randomly choose an image to display which is a photo of Lucy and a comment that someone has said about her. (Refresh the home page to see this working)

The alignment of the text is now justified so that it spreads evenly accross the page. (Small minor change, big difference!)

And finally, the MP3 player begins playing the first track when you load up each page.

I'm handing in my work on Thursday and doing my presentation on Friday... I think we're almost finished!!

I've talked to my brother about getting the website online at Lucy's own domain, and I hope to get that online by the end of March. Fingers crossed!

Monday, 8 March 2010

LUCY: Website complete!







Lucy's website has been one of the most exciting, rewarding and challenging projects I've worked on to date.

Not only has it been a great chance for me to express myself and my skills, it's also been great to create a website for someone I care a lot about and deliver something of high quality to the end user.

I've managed to create 2 flash MP3 players, video content, a banner, a gallery and an interactive side bar with links to twitter, facebook and myspace. Along side this, I've developed two databases where Lucy can update her own personal blog and a space where she can post up all her upcoming gigs. Not only can she do this, but she can also edit and delete every post and add a photograph alongside her blog entries - quite a brilliant accessory to keep herself and her fans up-to-date on her progress.

I've also included a Twitter feed onto her home page where fans can access the site and get an instant update without having to access her blog first.

This is the first website I've created which uses Flash AND PHP, MySql together. They have worked very well together and their seamless interaction benefits are going to be very beneficial to Lucy's promotion.

Overall, I'm overly happy with how this project has gone and I'd rate it the best website I've made, so far.

The next step is to create the login page and get Lucy to check over it all to make sure everything is how she wants it.

http://www.kidinacandystore.co.uk/lucyward/index.html

Saturday, 27 February 2010

LUCY: Flash MP3, Banner and Photos


If you click on the photo, you'll be able to see the latest design ideas I have for Lucy's website.

The MP3 player was entirely made by myself using photoshop and flash with action script.

I've created a DIV with a background image which includes the pins, and then created a DIV inside that with the Flash content, making it look as though it's a single image. I've also done this with the "Lucy Ward" title banner.

By using action script 3, I've been able to create a simple music player that can player up to 4 external songs, with skip feature, play/pause and volume control.

Where the photographs are on the right hand side, it is infact a flash banner, where the user rolls over each photo and some information is displayed about Lucy herself.

Future design ideas:
I want to create another box above or below the main content text area in the centre to include either a regular twitter feed or her latest video news. This may be an area where I can include my PHP database.

Friday, 26 February 2010


I created an interactive banner for the LG phone, GW520. I used the current advertising promotional colours and branding to create a banner in-line with their promotion.

It's fairly standard and some of the design decisions I made look ok, but there's too much going on, too quickly.

Not bad for a quick exercise.

Original promotional video:

Monday, 22 February 2010

PRIDE: Finally online and active

After working on the new NTU Pride website for several months, the new website, logo and brand image was launched on 15th February 2010 and it went off to a roaring success.

To celebrate the new branding, we had a massive house party where guests could watch a firework display, let off Chinese lanterns and enjoy cake and music.

I really wanted to bring a brand new image to NTU Pride, making it much more professional looking and making it stand out from the crowd, not blending in at all.

Through using the bright colours against the dark background, this has really worked well and will continue to look fresh and bright for years to come.

To see the website online now, check out http://www.ntupride.org.uk

In addition to the website, 2 large new banners were printed and various t-shirts were made too. As I'm on the committee for NTU Pride, I've been working closely with the bar, Propaganda to create a strong sponsorship and NTU Pride is now pleased to be officially sponsored by them.

LUCY: Project application and design

Brief 2 states that we need to create a website for an artist or organisation. This is no more than the perfect opportunity for me to finish off the website I started creating for Lucy as a project.

This way I'll get marked on work I produced outside of Uni and I can get feedback and create the site as professionally as possible.

I have to include 3 interactive Flash elements and a PHP MySQL database profile page.

At the moment, I've managed to get the whole basic template of the site online and the first flash element included. However, as the flash has to be interactive, I am unsure as to whether or not this is possible to use.

I am currently going to start designing the flash MP3 music player that will set in the menu section. I'm also hoping to have the side pictures revolving and use video through Flash as well.

Sunday, 7 February 2010

NG1 Logo Design











Here are some logo's I've designed for the gay club in Nottingham, NG1. I've chosen quite a few variations depending on the client's requirements.

Friday, 5 February 2010

Digital Mash - What would you do?

So, Digital Mash is a portfolio and an online resource for web designers to gain inspiration and ideas from designer, Rob Morris.

His website consists of his own work, a journal, biography, photos, contact page and even a client login area. The structure has been thought out around then content. The text and photos sit happily next to each other, using a lot of "white space" to distance the information apart from themselves. In doing so, the site feels light and "breezey", enabling the user to "fly" through the website without having to concentrate hard on the content and to understand the layout.

I really like the use of the bold text, block of colour and thin dark line for the navigation. This design removes any "fat" from the site, keeping it streamlined, visible and airy. In otherwords, there's not big thick buttons or fancy fonts that are either too small or too excentric.

What I like about his journal is that the audience (other designers) for his site can comment and ask questions about his work, which is then responded to as you would a blog, but it's catagorised to keep things organised and relevant.

His simple organisational design in itself is something to admire. In his archive of previous posts, he's used small images to illustrate his post, but kept them simple and frequent enough to create an identity between each post that's most pleasing. However, he hasn't gone too far by adding too many images. One per post is enough to keep it eye catching, yet clean and simple.

Rob's style is to use text as a way of communication. Instead of having bright, over-powering images, he's kept them very small and minimal and used text, varying in size to keep the content structured and visual. He's kept a large word or phrase to title each page, an image to illustrate and then a simple small paragraph to explain the section you've entered.

His chatty sense of vocabulary in his design keeps the site friendly, personal and accessible. By saying "Say Hey" or "I'm the guy" makes you want to read on as the lack of formality in his choice of words makes the reader smile and feel a connection between designer and a real person.

I personally love his navigation design. I think navigation should be the main thought when it comes to web design. If the navigation looks great and works well, you should design your site around that. If the user can't understand how to use the site or the menu is too complex to understand, you've got no hope of anyone staying on your site or exploring further. Good navigation is essential, and I feel Rob has hit the nail on the head here.

Not too sure about his use of colour.. the bluey gray is a tad dull..

Using less images is another design technique I'd like to experiment with. Currently, I use a lot of colour and imagery in my designs, I'd like to try using soft gradiants and just text to see if I can create a site that connects the user with the content, because at the end of the day, text is alternative symbols and symbols can be logos right? And we all need a logo...

http://www.digitalmash.com

Wednesday, 3 February 2010

iPad and Beyond..


To discuss the ways designers have to think cross-platform, I've chosen design for magazine, digital billboards and buses. I feel each one offers a different complication and solution in the design and advertising world.

For example, design for magazine is very common. As you can see from the cover on the left, various codes and conventions will look familiar to you. For example, there is a main image and the title of the magazine is large and behind the main focus. The magazine cover provides the consumer with quick puffs of information, explaining that they can get "bigger pecs now" and that there's just "5 steps to the perfect body". All these techniques are to engage the consumer and get them drawn into the magazine. Politically, by producing a magazine cover using these codes and conventions the designers can use these guide lines to their ability, making their magazine sell to the consumer and therefore gaining profit.

The layout between this magazine cover and many others are very similar as they follow these strict rules. Even just using the direct mode of address in the main photo is enough to draw in an audience. Socially, the consumer feels as though they can gain something from owning this magazine, they will feel empowered as this book has the answers they need to get that perfect look.

The content can easily be replicated through scanning (as I have done here) or even reproduced on a half decent editing application on most computers, such as Photoshop. Scanning each individual page however, may not be an attractive option to those individuals wanting to steal the content and distribute it illegally, instead they may be more inclined to take the content and design their own media from it.

Design across other platforms, such as on this bus for example is where designers have to think more strategically about how they promote.

With each bus having similar but possibly different sizes to promote their products on, the design of the advert has to be flexible. Being able to scale the advert to fit different dimensions is important, and the main content should fit into the constraints of the bus architecture.

On many buses with this style of advertising, the main title or most important information is usually stuck on the horrizontal section between the two floors, quite often a picture or logo is then placed in the vertical section and the smaller, legal details are pushed to the end where space is limited. Designers have to consider this when desigining across different platforms. For example, the same layout of an advert would be useless on a magazine if it were taken from a design for a bus.

Design for a bus is an interesting concept politically, as designers need to think creatively, getting their point across very quickly as a bus can roar by in just a few seconds. In those few seconds the consumer has to see the advert, recognise what it's for and be convinced that they need to buy into it. Therefore, keeping the design simple and short (to the point) is a crucial technique that should be deployed here, like in the image above.

Digital billboard design is an area that is high for competition. Take this photo for example, in a place like New York or London where there can be up to 20 or 30 different digital billboards, getting the consumer's attention is always a difficult task.

Here, the main advert is of a woman and underneath is stats about the weather over the next few days and a news feed. By having data displayed that is of public interest, the community will be drawn in as they may want to know the temperature, in the process, noticing the advert for Garnier above. Using public interest as a technique, Garnier have drawn in the attention of the public subconciously, and are being fed these advertising ploys without realising. Through this, the consumer doesn't get as infuriated with annoying adverts, as they feel as though they're being informed of matters that are important to them, and are therefore more open to the subconcious advertising.

As far as having content stolen by using digital billboards, the effect of having a massive billboard that grabs people's attention is more important if it manages to sell your product. Stealing other designer's work, would only have an adverse effect in this situation, as having multiple billboards looking the same would only turn the consumer off and result in your advert being missed or unnoticed. Instead, the more creative and different the design, the better it will work in this situation.

It is hard to predict what the major digital platform in one year's time will be for design, technology is developing and advancing all the time. However, I do think with things the way they are at the moment, the internet is going to become a necessity of life, and having it portable and with you all the time will slowly become something you can't live without. Therefore, design for small media such as mobile phones and netbooks may become a requirement over the coming year.

I predict that desktop computers may start to dissapear and laptops will take over, due to their portability and size over this decade. Consequences for designers are important to consider. I feel that you'll be able to get the same performance from a laptop as you can from a computer within the next couple of years. I currently use a laptop to do all my design work, which includes design for big platforms such as banners and posters as well as web design and other mediums. Designers will need to consider how to use as little content as possible to get across their message as quickly as possible if mobile phone sized screens are the way forward, this will make design harder, especially as we're seeing many websites designed for the browser, but when it comes to the phone, they have cut down versions. Facebook is a good example of this.

One thing is for sure though, this decade is going to be very exciting in terms of development and standards are concerned.

Tuesday, 2 February 2010

Carphone Warehouse - UNI Mobile


I've finally finished my website project.

Here's the website I've made for UNI Mobile as part of a promotional offer from the Carphone Warehouse store in Nottingham.

UNI Mobile is a fictional company I've made as an illustration purpose. The Carphone Warehouse store in Nottingham, however, is real and therefore fits in with the retail establishment as stated in the brief.

I have used CSS, Flash, Javascript and HTML to create the website. I'm very pleased with how it's turned out. The colours are very eye catching and the site is simple to use and serves its purpose.

Monday, 1 February 2010

Project: Carphone Warehouse - UNI Mobile


I've finally settled on a brand new idea for my website project!

I decided not to do Saltwater, but instead the carphone warehouse. I didn't want to redesign their website, but instead offer a website that is promotion for the store in Nottingham AND as a promotion to a unique mobile phone network.

This is my initial design idea. The section with "Calla Texta Surfa" written on it is goingto be flash content.

Friday, 22 January 2010

Mini-Project - Saltwater Initial Design 2

Mini-Project - Saltwater Initial Design


Here's my first design for my Saltwater project.

I've really been struggling for inspiration on this project, so this is the best I've made so far.

I'm going to continue playing with designs over the weekend and hopefully be settled on an idea early next week, so I can build it in HTML and CSS for hand in on Friday.

Sunday, 17 January 2010

Mini-Project - Saltwater


For our first project back, we have two weeks to create and develop a website for a retail establishment, which includes restaurants, bars, shops, pawnbrokers and dry cleaners!

I decided to create a website for the bar/restaurant - Saltwater. I've been in quite a few times so I know the environment well, it's one of my favourite bars and I think I'll be able to do the company justice through their new web design.

Their current website is online at: http://www.saltwater-restaurant.com/
As you can see, it's very basic and uses a multitude of Flash and HTML/CSS. I currently don't like their website as the design of it covers the text in some cases and the colours don't contrast enough, making it hard to read and not very user friendly.

I've looked through their website and image gallery and have begun my research for the project. These are the two files I have so far. The logo I created (first image) takes into account their current logo, but for this project, I thought I'd replicate it and produce the website around it.

Wednesday, 30 December 2009

Trent Barton Review


Well well well! It's about time Trent Barton revamped their website!
Their old site was very outdated and was quite unfriendly to use, it felt as though it was stuck in the mid 00's with their simple drop down menus and confusing bus time tables, however the story is different now.

Their new site offers the user a modern soft design, with the use of sliding menus and databases to remove unwanted clutter. Their new features removed all the excessive and unrequired data, and presents the user with options to find what they're really looking for.

Diverse menus that are simple to use and easy to understand have turned this website around. Their graphics have been improved a sense of strong brand has been created through their graphic design and web management. Check it out!

10/10

http://www.trentbarton.co.uk/

Wednesday, 2 December 2009

KID IN A CANDY STORE: New site design

Well after having my current website online for about 6 or 7 months, I've decided it's time to give it a refresh to fit inline with my new portfolio, so that I create a new brand image and have business cards printed along the same lines.

Here is my new design for the site. It will be made in HTML and CSS as I feel my new skills in these areas will be able to create the site I want, which is an exciting opportunity for me to put my new skills into a design that will actually be used online. Also, producing the website in HTML and CSS will make it a lot easier to update and change when required, unlike using Flash, which takes a lot of time and concentration when adapting it to fit in new content.

However, I may still use Flash elements, depending on how the website forms over the coming months.