Cracked - Icons

Just found some really cool socail and other icons.

Lava Lamp Jquery

Here is a few screenshots of an example of the jquery toolbar(navigation) that we intend on using for the cilent site. It has a very smooth following highlight feature to the the links.

Final Colour Scheme

Here Is the set colour scheme for the final website and what will be used throughout the whole website.

First draft Mock up

My first approach at the mock up of the website homepage and how it will look.

Exsiting AJC soft website

Since we started the brief the cilent website has been updated a few of our ideas and improvements have been put forth into the new design. Luckily we have plenty more ideas too put forward and add to make a more efficent and fit for purpose website.

New and old logo design. As the logo cant been changed the intail idea was to fine tune it. Such as a slight tone change for the colours and thining the thick black lines. This had the effect of making the logo have more edge whilst using the same colours and design. Also Ive added a reflection to the image.

Software Box Mockup

This is a software box mock up for use on the website.

Colour Schemes

Color Swatches -

http://kuler.adobe.com/#themes/newest?time=30
Below is a variety of color selections. Each Image consists of a different variety of colors that work well and complement one and other.

Akashi

This is a box shaped font, with a technology/digital look to it. Which fits in with the technology theme of the software website. This is has a futuristic touch with angled cuts.

Flux Architect

This is a font that has a structure with a fun element. Which would add a bit of character and interest to the website whilst fitting in with the genre.

Crimson

The reason for this font was that I believed It looked professional whilst looking strong graphically.

Archery Black

It has the same effect as Akashi typeface but with a different edge. Whereas Akashi is more futuristic theme this is more retro theme, contrasting between modern and past technology.

Group Blog URL

Our group blog for the Cilent project is http://ajcsoft.posterous.com/

Microsoft

I chose to analyses and research into this site to not only gain background knowledge of existing software sites but give me a better understanding of the layouts and how they approach the market.
I began by trying out all of the websites features. Seeing what the website consists of and what it does to make it personal whilst meeting the goals of the task in hand.
From first appearances I first noticed how although the software it was selling didn’t leap out straight away. On first glances it had the color scheme and their brand built into the site. Although the structure itself with complex transitions from category to category. It didn’t have Microsoft heading the page, with it subtlety being feed in later on reading. The main structure is produced with a basic drop down bar with a more advanced search bar below to give an easier way of navigating through the site. The homepage has the software at the heart of the design. Consisting of two different homepages. One for the Home version of the software and the second work/office. Giving the option to switch between the two by the click of the mouse. Using a very effective jquery transition. Overall the structure is fluent and has a balance between software details/info and layout design. With few images the text content is broken up with visuals and well placed borders.
Given the genre and basis of the site it is hard to keep the audience interested whilst capturing their imagination, whilst trying to show them the purpose of the site. This being the advertisement t and purchase of the specific software.

Adobe (software website)

Adobe is one of the other software websites I looked at. This was too see how different companies selling different software approach the market in their own way. This website structurally followed the same pattern as all the other software sites I had looked at including the Microsoft site. with the homepage having the logo, links and a search bar being the header. The only thing that really different between the software websites wasn’t the structure it was how the showed the content. Even this was similar the only reason for variation was for the content to be portrayed through their unique style and design. For example windows/Microsoft have always used basic designs with block shapes and primary colors such as blue with their logo being at the heart of the visuals. compared to adobe that use brushes and different tones of greys on the backgrounds to make the red logo and name pop out from the page. After looking at the different websites the layouts are very similar, navigation the same, with different visuals and graphics specific to their trademark logo and design.
I believed to succeed in a useful software website that is fit for purpose the main factors are simplicity in the design with basic but bold graphics and few images and icons with the focus being the software in hand.

USC (Poor Example)

For the research I tried to look at both ends of the spectrum looking at both good and bad examples. This is one of the weaker websites I found. This website is really what not to do. From the start their is no structure or layout, making it impossible to find anything. It is like a jumble sale with so much content and links on one page it is confusing. With them going across both Y and X axis. The graphics aren’t much better with Arial fonts with no character and random placed images. The site uses colors that clash and don’t work well together all minor problems that add up. This website helps show how their is certain things that can destroy a webpage and make it impossible for users to navigate.
http://www.usc-b2b.com/

Ezgenerator (software website)

Ezgenerator is a software website that sells a device to make websites easily. The website itself is fully functional and easy to use. I believe the design is a bit plain though. Which could possible be improved with a few typefaces and small layout changes. It still follows the same pattern as Adobe and Microsoft, but more a simplified version of the two.

Xsite Pro

xsite pro.com (software website)
This is a software purchase website within the same genre as the client website. I looked in detail at how they capture the ardencies attention and appeal to the niche market. The thing I have noticed about all of these types of websites from big corporation’s to small companies is that they have a certain way of organizing the content and they split them into sub sections to make the information understandable in bite size chunks.
Graphically I have noticed a specific color scheme throughout the website. Using borders, gradients with modest textures giving it a professional look to the finished site.
Personally on this site I believe there is a few features that don’t match or work well. Such as the toolbar which looks as if it should do something, for example light up when the mouse hovers over. Instead it doesn’t interact with the user. Also one of the other faults I found was a delay between pages where it paused momentarily with a blank white screen before moving to the next page. These may only be small problems but they make you doubt the reliability of the software as the site itself has problems. Which is an idea to bear in mind when creating our client site. That it isn’t just a tool of advertising/info or purchase but a reflection of the software itself.

Design Chart

This website has a running chart of their top 40 websites on a weekly basis. The site itself is a straight forward flash website with the major content being a large chart table. The best thing is the sites in the chart and looking at the different variety. It seems that from looking at the sites in the chart that the high scoring ones are more flash based with animation.
http://www.designcharts.com/

Graphic Design Novel- Asain Graphics Now

Asain Graphics - Published by Taschen
The editor of this graphic based novel, was himself a graphic designer also involved in marketing. He is based in brazil with experience in art editing for digital and design magazines in Tokyo.
The book itself is a graphic design book packed with visuals from designers from Mumbai to Tokyo. In parts it blends tradition with a forward looking approach to contempary culture.
My favorite design is the Bruce Lee typography design. It uses strong typefaces serif and san serif in different colors and contrasts in a variety of sizes. All acting together to make a well-rounded image that is identifiable as Bruce lee even though it is just words.

Zerofractol studios

This practical site stood out for its interaction and numerous sound effects and motion throughout the site. There is so many different things happening on the site itself the homepage is a penthouse kind of room. which if you don’t click on a page or different link every so often a random interaction or character will walk across the screen with added sound effects. The other thing that was good was when clicking on their interaction work it gave a POV shot walking through the room and doors to the balcony and zooming into a PSP. Which the PSP was interactive and itself the portfolio of their work.
This site is very different and interactive. I believe the site works well as a whole but a few of the motion effects are a bit much and too random. Apart from that the navigation is good and the transactions are amazing.

Groundwave Design

I thought I would leave this blog pretty brief as if you check the site its pretty self explanatory. It is basically a design company in website and mobile. Their home website is very user friendly with lots of detail and clever ideas used for mouse over parts and other interactive factors. All of which built into a simple and organized design. Below are a few screenshots to show you their website and some of their work.
http://www.ground-wave.com


This is an example of one of the websites they have created.

Mindmap

This is a smindmap of the exsiting pages for the AJC website.

Software Website Wireframes

After gathering research and looking at numerous software websites. These are the wireframes I created fitting in with the genre.

Software website - Illustrations

Here is a few illustrations sparked by the idea of making a software website.

Techno website structure

Ideas and structure for my portfolio site.

Facebook/Twitter Icons

I have been researching into different websites recently and wanted to add some icon buttons to my page giving more feedback and purpose. Here is three images I found of them, using a stekch method which I intend to develop creating my own original designs.