The Good the Bad and the Ugly

The client I am re-branding for owns a  company which engineers and sells cake decoration materials (random I know). As it is such a specified business, there is a limit to the inspiration I can gather from its competitors alone. Therefore I will look at companies further afield from that specific area.

Here are a few links to competitors sites, I don’t find any very appealing and hope to produce something a lot better:

http://www.thecakedecoratingcompany.co.uk/catalog/index.php?cPath=198

http://www.cake-craft.com/

http://www.almondart.com/

http://www.windsorcakecraft.co.uk/rolling_pins.html

Here are my favorites:

These sites obviously have a clear theme… pink! However they are not serving the same purpose of what my client is needs, so will not necessarily need to make my website the same colour, although I think light colours will be needed (will be discussing colour scheme with client). Cake craft have a very nice slideshow as their man feature on their page which I believe is effective, while Ruth’s brownie kitchen uses large images throughout the website to show off it’s products. The only thing that slightly puts me off Cake Craft’s site is that they have not used grids, and most things are out of line with each other throughout its pages. I like using grids in my designs as I believe it makes them more aesthetically pleasing to the viewer!

Logos are very important when it comes to a brand, it can make or break a business. Logos can be really simple, or very complex and still be effective. I like the one below as it is memorable and has a nice colour scheme, for me that makes an effective logo!

Cake Craft Shop

Ruth's Brownie Kitchen

Leslies Cakes Logo

Business Card

Final Idea!

I finally decided to base my project on a re-brand of a company, with the website being the main feature.

I have a client who believes his company is being dragged down by his competitors and wants a website, and a new brand identity. I will need to produce the following in this project:

  • Website (main feature)
  • Logo
  • Business Cards
  • Posters

 

Choosing a Project

My next step is to choose something to base my project around. I have to think long and hard about this step as I know that it must be something on a large scale that I wouldn’t be cut short/run out of ideas for!

Here’s a few possibilities:

  • My own site? Creating a site based around myself and what I offer to customers. I can then use this when I finish Uni! – Can also include things such as business cards
  • Sports Site, my main interest is sports, so maybe I can make something to do with that?
  • Client Site/re-branding, find a possible client as re-brand there business, creating new logos, websites, business cards etc..

 

Web Design, present and future.

Me and two people in my course have done a presentation looking at new technologies in web design. We focused on 2 buzz words in the area, HTML5 and CSS3. I have wrote about HTML5 in the post “Web Design, A brief History”.

CSS3

Instead of defining all features in a single, large specification like CSS 2, CSS 3 is divided into several separate documents called “modules”.  The old specification was simply too large and complex to be updated as one, so it has been broken down into smaller pieces – with new modules added. These include:

  • Hyperlink Presentation
  • Multi-Column Layout
  • Speech Module
  • Backgrounds and borders
  • The box module
  • Lists module

Once it’s fully adopted as a standard and Web browsers and user-agents begin using it, CSS 3 will be a powerful tool for Web designers.

Image Hover effects
Drop Down Menus

Here are a few more examples of what you can produce in css3.. impressive stuff! :

Where are we at now?

Me and two people in my course have done a presentation looking at new technologies in web design. We focused on 2 buzz words in the area, HTML5 and CSS3. I have wrote about HTML5 in the post “Web Design, A brief History”.

CSS3

Instead of defining all features in a single, large specification like CSS 2, CSS 3 is divided into several separate documents called “modules”.  The old specification was simply too large and complex to be updated as one, so it has been broken down into smaller pieces – with new modules added. These include:

  • Hyperlink Presentation
  • Multi-Column Layout
  • Speech Module
  • Backgrounds and borders
  • The box module
  • Lists module

Once it’s fully adopted as a standard and Web browsers and user-agents begin using it, CSS 3 will be a powerful tool for Web designers.

Image Hover effects

Drop Down Menus

Here are a few more examples of what you can produce in css3.. impressive stuff! :

Major Practical Project Idea.

After some thought I decided that my Major Practical Project idea should be based around what I find most interesting, what I believe I am good at, and what career aspirations I have for the future…. Web Design.

In the project I will hope to build upon the skills I have learnt from the previous two years to create a masterpiece of work!! However to do so I must improve my knowledge web design technologies such as HTML5, Css3 and Jquery.

Web Design, A Brief History.

The history of the Internet is short, but so much has changed within that time. It has radically changed how we live our lives. Also, the internet has created thousands of jobs that did not exist a decade ago. These include jobs in SEO marketing, online telemarketing, freelance writing, blogging and perhaps mostly in web design.

HTML – First Generation

The World Wide Web came into being in 1994, created by Tim Berners-Lee. HTML was the only coding language for web design back then, and there wasn’t much freedom when it comes to design. Because of this, web designers could only create simple layouts, text, tables and links with little or no graphics. It is considered the ‘Bronze Age’ of Web Design. Even if web sites were not design-centered back then, developers were already thinking about how they can make their sites more visually appealing.

Earliest HTML Website

The World Wide Web Consortium (W3C) was created to prevent large companies from monopolizing web design code. If only one company is able to control web coding and design, the story of internet and web design would have been different. W3C is still responsible for governing the coding techniques, rules and guidelines. They also update web designers to any changes they will make. It is important for designers to follow the guidelines set by the body so that the site will work cohesively in search engines and browsers without errors.

Mosaic

In the 1990s Mosaic was introduced to the public, which was a free browser program. Mosaic was the first commercial browser that allowed the public access to online content. It was designed by Marc Andreesen and Eric Bina, and originally ran on the Unix system. By 1994 the Mosaic web browser became available to other OS such as Mac, Windows and Amiga OS.

Second Generation

It was during 1992 to 1994 that other developers started adding their own bits of HTML codes. Preventing confusion of the ever-increasing HTML 1 tags, the HTML 2 was born. The internet has become faster, and web designers are now given more HTML capabilities. Coding has become a bit more complicated, and graphics have become more frequent.

Third Generation

In 1995, more HTML tags emerged and HTML 3 was born. Designers had option to use HTML B tables and style sheets. That same year, Microsoft released Internet Explorer.

During this time, designers have more freedom to customize and beautify their web design. Third generation web sites can now have colourful or patterned backgrounds. They also had animated images, thanks to .gif. Flash was also introduced, which is a fresh breath of air. It changed the whole landscape of web design, from static to dynamic.

Fourth Generation

Today’s web sites are classified in the fourth generation. Aside from HTML, web designers can play with other coding tools such as JavaScript, Flash, XML, CSS, etc. HTML 5 is the 5th revision of the HTML language, and this is the one currently used now. HTML is the solution to most problems and syntax errors found in HTML 4 and XHTML 1.1. HTML 5 attempts to define a mark-up language for both HTML & XHTML syntax. HTML 5 also added plenty of new syntax features, including the integration of SVG content, and adding <video>, <audio> & <canvas>. This means it is now easier to add multimedia content without any more plug-ins, etc. Other elements designed to improve the semantic document content are: <header>, <article>, <section>, etc.

Because of the remarkable additions, the need for other plugins such as videos, flash and Java is greatly reduced. HTML is improving and moving towards every direction. HTML5 is compatible with various web browsers such as Mozilla Firefox, Apple Safari, Internet Explorer or Google Chrome.

This is an example of a 4th generation website using html: 5http://www.parasol-island.com/

Web Design Work.

I produced this website last year for a one of my assignments. I enjoyed the project as it helped me gain experience of web design and I learnt a few new web techniques along the way. It was based on my brothers aquatic company as he needed a new website:

This slideshow requires JavaScript.

I used a j query slideshow/gallery on this project which I had never used before, I had a sliding image on the header of each page, as well as an effect on the gallery images. I really liked the effects they had so I think I will carry my knowledge on these into my next project. I had also experimented with contact forms which use php, I found this a very useful feature as well.

I will be looking at Web Design during this PPIC project