Little video

Portfolio page and contact us

This is my portfolio page for the Designers on Demand site and by using my grid the structure of the layout is exactly as I wanted. its a simple roll over button on either of the left arrow or right arrow fading to pink or purple. 






Once the buttons are clicked I want the image to fly into the next design. I have written about who I and my friend have had the chance to work with and I have started putting together images to put into the portfolio page of the site.

This is my contact us page and on this page I have kept the main text detail on the left like on all of my pages and I wanted to only use type on the contact us page to help even the site out. This is so the viewer isn't over loaded with flash animation. I have used the colours from the top banner in the content to keep the page looking even throughout.



The next step is to look animating my pages and making each page work without any errors.

Designers on Demand new layout and grid

This is the new, more slick looking flash site I have created for Designers on Demand. I have used pink and purple as I have found from researching lots of different designers portfolios that it isn't a colour used much. I feel the colours I have chosen have just enough impact and lots of professionalism of which I have been looking for since starting my visual designs.

I intend on making my home page animate and the image you can see in the main content area of the logo with the lines to fade in and out and animate the lines to move in and out, hopefully creating a nice feel to the site leaving viewers wanting to see the rest of the website.

This to the left is my services page. I want to make the text fade in using a button with a brief explaination of what services we offer on the left hand side of the page. I want the links to all roll over to purple from white when they are clicked on every page.

I want to keep this final layout really clean and minimal and I think it works the best against all the others I have designed and uploaded to this blog so far. Its the most user friendly of all of my designs and I now intend on designing the rest of my pages which will be portfolio and contact us.

The logo up close

Hopefully from reading my last post you will understand my logo design made for Designers on Demand.

Make myself look like an agency

As part of my brief I have to create a website which advertises myself and my work to the world. I wouldn't want to go free lance so I have decided to make a website based on me and my friend going into business together so I have came up with a name (Designers on Demand) and I intend on making this site live and going to GBBO (getting british business online) who will help to get us a business plan etc to make us into a real business. I created charatcers on illustrator to help give the site a nice warmly welcoming feel to it.

The idea of designers on demand is explained more in the screen grab above starting from "Hello". I have created a logo which I feel is quite strong and could work on a professional level. It is basically made from me being smaller in height to my friend. So the big circle making the 'O' from ON is actually a stick figure of a head with glasses on from the side view and in side the 'N' I have a smaller figure who represents me looking up at him. The glasses could also be interpreted as a mouse.

This page to the left is the about us page, again you can see from the design I have used my little illustrations to help to keep people on the site or at least to flick through it. Inside the white box is everything we can offer the public.

The portfolio page is very simular to the previous designs and the only animation would be the images sliding in and out. Each page that slides in would have its own piece of text below in the space at the bottom of the page outside the portfolio content box.

I havent yet finished my contact page but when I do I will upload it.

my grid

Here is an example of my grid which I made while designing my website. The idea is to line everything up to the same point throughout the pages to create a nice structured flow to my design.

Making my site more personal

After sitting down and looking through lots of different idea's and designs I think that I have found a layout that I like and like I said in my last post I think that I don't have enough information to have such a big looking site (looks like an agency site) So to break my site down about I have designed images to use on each page of my site that act as an enterence instead of a blank screen with useless text. 

The main content area is that big because I intend on my portfolio being the strongest part of my site which is quite obvious being a designers website but I wanted my main content area to stay there throughout my site.  

From previous posts I wrote about having a tool box to show what programs I can use to a professional level. Instead of taking up unessessary space on my site I have put the tools at the bottom right of my screen.

This here is my portfolio page and I feel it is my strongest page on my site, which I intended from the start. I want the design which you can see from the screen shot to fade out into my first piece of work to fade in and in the box which says portfolio I would have text explaining each project in abit of detail.

contact me

Here I have designed my contact me page with a very simular contact enquiry box to one of my original designs on an earlier post. Again it's simple but this design is starting to make me see that I don't have enough information to put on my site so instead of putting the enquiry box that I won't be able to have active I am going to add designs which act as an enterence to each specific page. As you will see from my next post very soon.

Alternative to my last idea

I have kept the same kind of layout to my last design for this one but I have changed a few things around like the logo to the left is much smaller and I would want this to jus pop out once everything else has loaded for maximum impact for people to just see it and remember it once they have left the site. At the moment I havent created anymore pages for this idea but I have managed to put up how I want my buttons to show up. I have added the tool box feature to make my site look more professional to look at and maybe a conversation starter for people who don't know what the program logo's are there for. They are also there for potential employment so if a agency finds my portfolio they instantly know what programs I can use.

My next layout idea

This is my next layout idea that I have came up with but I have only got up to the stage of making the basic layout. This idea is more structure and nice colour than splashing things on screen. If I take this design further I would intend to use minimal flash and maybe only have work or what I do sliding out and in.

I really like the red that I have here I think it's strong enough for people to remember my site when they leave but professional enough for people to ring me.

my first design

I have managed to take the things I am learning in class time into my own website layouts and designs below is my first design which I think is quite rough and wouldn't look professional enough to work on the net.

This is my splash page my intentions would be for this page to load very quickly and the splashes of page to splat on screen and my logo be made out of the mess in the middle leaving this as the finished screen to the left. I have been quite simple with my link names so people wouldn't get confused.

My about me page is basically information I have typed up making myself look abit more professional with possibly a booklet to show more about me and where I came from all of which from a design perspective. I intend this page to start from the logo in the middle of the page the red shape to move quickly out and splat the ABOUT US onto the screen.

My portfolio page is simular to my about us page apart from the colour and the text really. I want the viewer to be able to use my site really easily without losing interest so I have kept my portfolio scroll left and right very simple.

This is my idea of the what I do page and as you can see I want every page to be a different colour where the animation is conserned. I have kept everything straight to the point on this page so the viewer can get off this page onto my contact page. Basically all my animations are going to start from the logo in the middle of the screen and splat out to the name of the page.

My contact me page is an enquiry box which I think I will change because I don't think I have the knowledge or time to create the coding for this box to work so this is just an idea at the moment. The animation on this page is the pencil on the screen flying out of the splat.

I am going to explore other layouts and designs and post them up as soon as I can.

The practice site

In the Computing B module we have been given a practice site to build which helps us to understand flash and actually put into practice a working website. I have learn't alot from the lessons so far and have took what I have learnt in class and made designs of my own from looking at lots of different portfolios on the net as inspiration.

This is a screen grab of the practice site we have been working on in and out of class. I have learnt how to make buttons and how to make them roll over buttons so when you roll your mouse over the button it animates or changes colour. 

I have learnt how to link each page up and how Flash works on levels from 0 to 2 which means everything that doesn't change so the main layout of your site stays on level 0 and anythiny that changes from page to page like text goes on level 1, finally anything that is an image for example which would be on a flick through slide show would be on level 2.

Dislike this one.

http://vuletici.com/

Here is a portfolio I really dislike because I feel there is too much going on but the work produced is very nice which is a shame because I almost just clicked the red X. 

The reason being there is quite alot of work on the site and lots of links but it is quite annoying that the only way to get on the next piece of work is to click the back button on the internet browser, I also dislike that the pages have been put into circles and the background blue is an awful looking colour. So I won't be using this layout for inspiration.

Online portfolios

After looking online at lots of types of design portfolios I found many laouts and designs that I liked e.g

http://digitalmash.com/

I like how Rob Morris has created a concept from his name website name and incorporated it into his pages. He has tutorials and journal titles all next to each other creating a nice simple design. 

 When you click on them the rest fade out leaving your selected title in colour. I really like the grey used throughout the site. I can't fault anything about the website its nice and clean and the work produced by Digital Mash is outstanding.

He has worked for the likes of Coca Cola, Jay Z the rap artist and has had his work featured in magazines and design galleries world wide. His website is very clever and the use of type is fantastic.

Digital Artist

I have just came across this website for Digital Artists because I don't actually know what my style of design is so I just wanted to see what comes under the catogary for them.


http://www.digitalartistdaily.com/show_image.php?imageID=6411

There is some really good designs on this site.

Designers and agencies who inspire me

http://www.davidfoldvari.co.uk/Site/home.html
http://www.jaspergoodall.com/
http://www.paulinsect.com/editions/pow/pow.html
http://www.lukeinsect.com/
http://www.creativespark.co.uk/


These designers and agencies inspire me because they produce the type of work that I do and work a similar style to how I work. All of the above are very good at what they do.

Web site analysis - Creative Spark - Design agency in Manchester

Overview and Aims

www.creativespark.co.uk

The main aim of the Creative Spark homepage is to give the viewer a relaxed feeling  by using cartoons which help to show off their creative designs. It tells you where you are straight away and where you can get to using clever cartoons with text to let you know what they have been upto lately to make you feel involved. The colours are bright and stand out well together. The site shouts out creativity and in my personal opinion would make me wonder what the agency is like and what the staff are like. It is definately a website aimed at clients and it would have many viewers applying for jobs and they offer students opportunities to improve their portfolios and get agency experience e.g:

Placement Diary: Ben Brand

February 21st, 2011

Any interview anxiety was put at rest when I first visited for a look over my folder, sat at a picnic table surrounded by a grassed floor and animal life illustrations on the walls. It became clear from then on that they were focused by what motivated me as a student designer, therefore making my time at the studio as fruitful as it can be. In what can be a busy studio, there is a colorful and warm atmosphere, everyone seems happy to offer a hand with a smile on their face.

Its obvious that the studio’s open minded personality has a strong influence on the work. It will definitely live in my memory as the most pleasant placement experience, as I am now just finding my feet I leave with a intent of returning in the near future.

A big thankyou to Neil and all the “sparks”.
Ben

________________________________________________________________

The website layout looks like it has been carefully mapped out and has many pages for you to view but you always know you can go back to what ever page you like at what ever time you choose. They have positioned themselves as a strong competing design agency who have worked with the likes of... Manchester United, Oasis, Salford City Council, Peter Kay, Lily Allen and many more.

They come across as a very helpful design agency offering knowledge of design and a complete in depth process to get the outcomes the client are looking for.

http://www.creativespark.co.uk/about/how-we-work/

People looking for Creative Spark will land on the site mainly through word of mouth and internet search engines like google and will be able to find them on Facebook and Twitter.

Content

Spark seem to keep the audience "in the know" at all times throughout visiting the site. There are new cartoons on every page with info speech bubble and they seem to know alot about the industry and where they are or want to be. They even have a meet the team page where you can read a little brief into what the staff "love." 


As I mentioned before the clients who have worked with Spark are big named household names so they clearly are good at what they do.


The whole look and feel of the website is inspirational. From other design agency sites I have seen this is definately the best and the most unique looking. It is a very powerful site with minimal flash. This gives the impression to me that they are good without flashy animation. They do offer animation though so they do cover this and all other sides to the industry that I can think of.


They have a play page which is a very nice finishing touch to a great site. It offers free wallpapers for your desktops, some quirky designs and has an office music play list adding to the relaxed feeling they have gave off throughout the whole website.

Structure 

The work is arranged into project thumbnails with a brief discription of what the project was and what was asked for and what was delievered. Each page is broken up nicely and there is plenty of internal links to go back to preview pieces of work and they specify "new work" with a little yellow tag.

 

If the work they have been working on is animation or a website they have a video showcasing it the overall website is a deep structure but very well mapped out and nothing changes size when you load up a new page it automatically fits perfectly to the screen using both Mozilla Firefox and Internet Explorer.

Navigation

The navigation is simply displayed the same as any other website really with the link names easily regognised and straight to the point, all of which are one word. When you hover over the pages they change from black to white with a black box around the text. Unfortunately they could lose a few viewers as you do have to scroll down to see the content of work etc which is mis leading to some people who don't have all day to find where the page content they are looking for is. They should introduce into the cartoons a SCROLL DOWN bubble so you instantly know where to find the content.

Notice on the right hand side that you have to scroll to find what you are looking for.

Visual design

The look of the site is very impressive and the colours are instantly recognisable which is very clever effect they have chosen to use. I love the cartoon characters used throughout the site and how when there is an important event happening e.g when England play a football match they stick a cartoon of the team or a football sinario up. They are very up to date from what I have seen especially with there blog as you can see from the example I shown earlier. They are very good with the colours they choose to use on their cartoons they blend well with the rest of the site. 

The site is very easy to use is fun and warming the colours are striking but in a good way and the cartoons are very cool over all the website is fantastic and if I was a potential client I would definately choose Creative Spark.