Tuesday, June 15, 2010

Client Website Progression

The client had built their own Wordpress website for their Promoting Jesus Campaign but they were unhappy with the layout and requested a change of colour scheme. Below is a mockup with the original design but with Earth-tone colour scheme. The Hex colour numbers were included.

The client was still not happy with the layout and so asked me to design a website for them. Here is a first mockup before I decided to go in a totally different direction. This is when I first started thinking about the paper textured background (used in the banner only in this image). This design was not shown to the client because I was not happy with the result. It was too dark and not very inviting but is the layout was simpler.

Not happy with this design I pressed on with a new approach. I decided to spread the background image across the whole browser window while keeping the content in the centre of the screen. This opened up the design and made it feel less clostrophobic. I added some custom navigation with a natural feel while keeping the simple comtent layout.

I sent some page mock-ups to the client who was very happy with the design. From there I went ahead to finish the site.

Client Website Influences

Here are a couple of links to some websites that offered some inspiration for my Website design for the Promoting Jesus Campaign.

The first is an article called 'Textures in Modern Web Design' from Smashing Magazine. I liked the rationale for including textures. Having a textured background on the Promoting Jesus website fit perfectly with the 'natural, down-to-Earth' feel requested by the clients.

The second example from 'The Best Designs' uses a simple clean approach. Not only does it have some great examples of websites but it's banner and content are laid out well. I liked the background speading all the way acroos the screen while having the content and logo etc in the centre at a viewable width. This is the style I used in the Promoting Jesus website.

Tuesday, May 25, 2010

Client Website Mockup

These three images are mockups for a form page, history page and home page for the "Promoting Jesus" website. The site is being created for Mitchelton Presbyterian Church for their "Promoting Jesus" 2010 campaign, the purpose of which is to offer resources to those who are wanting to investigate the Christian faith and it's foundation, the Jesus of history.
The site and other promotional material are to be simple and modern yet have an organic feel. The site will primarily feature video content and a couple of form pages.

Tuesday, May 11, 2010

Basekit Website Competion

Mockup of my website proposal for the Basekit website competition.
Classmates Comments
- Text Links at top too small.
-Site design a little too generic.
-Good choice of soft nuetral colours.
-Clean design matches clean baby.
-Copy maybe too corny.

Tuesday, April 13, 2010

Web Design Sem 2 - Template Test 13/4/10

1. What is a Dreamweaver Template?
A special file, created in Dreamweaver, that allows some content to be added or edited while locking other static content.

2. What are the advantages of using templates?
They allow consistantly styled html pages to be created quickly. They protect the neccessary page content from being edited by future page designers. With their nesting ability, child templates are able to be changed by editing the partent template.

3. What is an 'Editable Region'? How to set it up?
It is a special div in the template that allows for content to be added while satatic content is locked. Dreamweaver setup - Insert > Template Objects > Editable Region.

4. What is a 'Repeating Region'? How to set it up?
It is a special div or table that allows for content to be added as well as extra regions (eg table rows) while static content is locked. Dreamweaver setup - Insert > Template Objects > Repeating Region.

5. What is an 'Optional Region'? How to set it up?
Similar to an Editable Region in that it is a special div that allows for content to be added while static content is locked but differing from and Editable Region in that the region itself can be used or unused. Dreamweaver setup - Insert > Template Objects > Optional Region.

Monday, February 22, 2010

Any Font for the Web

In a previous post (Websafe Fonts) I mentioned that font choice for websites was rather limited if you wanted to have consistency across computer platforms but if you are into some pretty tricky and possibly time consuming workarounds then check out this blogpost by Louis Gubitosi entitled 'How to Use Any Font on the Web' at his site InteractiveBlend.com.

Marketing Website Mockup

I spent the morning laying out the home page for my Website Marketing assignment. I decided to create a clean design in darker tones.

N.B. The colour of the orange boxes is a little off due to the export settings in illustrator

click to see the image full size

Sunday, February 21, 2010

'ems' Explained - text size for the web

Points or Pixels? Which text measurement is best to use for the web? Before answering that question you'd better throw 'ems' into the mix.

"What are ems?" I'm glad you asked.

Traditionally ems were defined as the width of the capital letter M of a particular typeface. But now ems are determined by the default point size used in a variety of text display programs such as web browsers.

Web browsers, across platforms, use a point size of 16 as their 'Medium' default font size therefore 1em is equivalent to 16 points in browsers which have their text size set to Medium.

The benefit of using ems when coding text size for websites is that it is scalable when the browser's default font size is changed by the user. Practically speaking, when a user chooses 'Large' in the text size menu of their web browser, the default font size increases which in turn increases the size of the text on screen, when defined as em in the websites code.

This may not automatically happen if the text size is measured in pixels or points.

For example: If the size of some text in a website is coded as 1em then it will be displayed at 16 points in a standard web browser BUT if the user wants to see larger text and sets the text size in the browser menu to Large (eg. 20 points) then the 1em sized text will be displayed as 20 point type.

Using pixels and points, which are fixed measurements, may not increase in size when the default text size is changed in the web browser.

For those who are interested in learning more about using ems when coding web pages this article at 'clagnut.com' will be of great help. Here is a simple pixel to em calculator for those who want to fit text to a particular pixel size on their web page.

Saturday, February 20, 2010

Scribla Graphics Logo Progress

Thanks so much to everyone who has given feedback on the Scribla Graphics logo design ideas so far. I was surprised to hear that almost everyone chose the 'scribble ball' design as their favourite or one of their favourites. After spending time tonight reworking the concept I have this new incarnation for your analysis.Any thoughts and ideas would be REALLY appreciated.

Thursday, February 18, 2010

Websafe Fonts

You've designed a website mockup - banner, logo, colour scheme, layout, navigation....but Which Fonts do you use?

When designing for print the choices are limitless as long as you remember to embed the fonts or convert them to outlines. But when it comes to the web it is an entirely different story.

If every Mac, Windows and Linux machine came bundled with every font ever created then there wouldn't be a problem. You could let your imagination run wild but the simple fact is that there are a limited number of fonts that are installed, by default, and even a smaller number that are common to all three platforms.

If you really do care how consistently your webpage displays on all computers then you need to check out:
"Common Fonts to All Versions of Windows and Mac Equivalents"
"Font Families & Web-safe Fonts: The Point of Penultimate Resort"

Tuesday, February 16, 2010

Logo Ideas

Settling on the name 'Scribla Graphics' it's now time to come up with a logo. Here are some ideas so far.

click on the image to view full size

Wednesday, February 10, 2010

Flash Logo

Even though this logo for 'Scribla Graphics' is just a first idea, I decided to use it in a Flash animation class exercise. Animating the line was tricky but through the use of 'animation along a path' and a 'mask' I was able to pull it off.

To watch the animation again, right click on the logo and click PLAY.

NB. If you still use Internet Explorer rather than Firefox you will have to reload the page each time you want to see the animation. Thanks for that Microsoft.

Tuesday, February 9, 2010

Bad Website Design

This may not be the worst website ever created but it may come close. Let's see how it stacks up to our criteria.

Site: http://belladesoto.us/

Content: There is enough content on this website to "fill a spacecruiser" but it is laid out so badly there is no motivation to read it. From the title it is clear the author wants you to "THINK" but.......think about WHAT???

Structure and Navigation: Imagine laying 50 magazine pages on the floor and trying to navigate to some interesting information by looking through a cardboard toilet roll. The site consists of a single page about 40 000 pixels wide. There are a gazillion links to other sites but many of them are broken.

Visual Design: If using every font known to man, every colour in the spectrum and overlapping one image with another is good design, then this site should be winning all the awards. There is no issue with page consistency because everything is stuck on the one page.

Functionality: This site functions as a brain dump for someone named Bella. That's all there is to say.

Interactivity: Here is where this site really shines. If you can find some blank space where the background image is visible you will be able to entertain yourself for hours with the floating blue balls which follow your mouse pointer. No need to visit Miniclip.com when you have belladesoto.com.

Overall Experience: If it wasn't for the fact that I had to review this site for College, it would have been visible in my web browser for less than 5 seconds.

0.5/10 (0.5 for the pointer animation)

Tuesday, February 2, 2010

Webdesign Criteria

When analyzing the quality of any website there are six important areas to consider.

1. Content: Content is the information provided on the site. It is not just text, but music, sound, animation, or video -- anything that communicates a sites body of knowledge. Good content should be engaging, relevant, and appropriate for the audience. You can tell it's been developed for the Web because it's clear and concise and it works in the medium. Good content takes a stand. It has a voice, a point of view. It may be informative, useful, or funny but it always leaves you wanting more.

2. Structure & Navigation: Structure and navigation refers to the framework of a site, the organization of content, the prioritization of information, and the method in which you move through the site. Sites with good structure and navigation are consistent, intuitive and transparent. They allow you to form a mental model of the information provided, where to find things, and what to expect when you click. Good navigation gets you where you want to go quickly and offers easy access to the breadth and depth of the site's content.

3. Visual Design: Visual design is the appearance of the site. It's more than just a pretty homepage and it doesn't have to be cutting edge or trendy. Good visual design is high quality, appropriate, and relevant for the audience and the message it is supporting. It communicates a visual experience and may even take your breath away.

4. Functionality: Functionality is the use of technology on the site. Good functionality means the site works well. It loads quickly, has live links, and any new technology used is functional and relevant for the intended audience. The site should work cross-platform and be browser independent. Highly functional sites anticipate the diversity of user requirements from file size, to file format and download speed. The most functional sites also take into consideration those with special access needs. Good functionality makes the experience center stage and the technology invisible.

5. Interactivity:Interactivity is the way that a site allows you to do something. Good interactivity is more than a rollover or choosing what to click on next; it allows you, as a user, to give and receive. It insists that you participate, not spectate.
It's input/output, as in searches, chat rooms, e-commerce and gaming or notification agents, peer-to-peer applications and real-time feedback. It's make your own, distribute your own, or speak your mind so others can see, hear or respond. Interactive elements are what separates the Web from other media. Their inclusion should make it clear that you aren't reading a magazine or watching TV anymore.

6. Overall Experience: Demonstrating that sites are frequently more -- or less than the sum of their parts, the overall experience encompasses content, structure and navigation, visual design, functionality, and interactivity, but it also includes the intangibles that make one stay or leave. One has probably had a good overall experience if (s)he comes back regularly, places a bookmark, signs up for a newsletter, participates, emails the site to a friend, or stays for a while, intrigued.

Info from www.webbyawards.com

My first portfolio website mockup.