Bokeh Background Textures

TEXTURED backgrounds

GOOGLE FONT DIRECTORY

The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers.

PURE CSS TEXT GRADIENTS

With the latest advancements in CSS, we now have access to powerful styling techniques, including box shadows, rounded corners, background gradients, etc. However, we don’t currently have the ability to apply gradients to the text itself. Luckily, with a bit of trickery, we can force this effect — at least in webkit browsers! I’ll show you how in today’s video quick tip.

INSPIRATIONAL DESIGNERS

JARED MICKERSON
BEHANCE PROFILE





DIEGO MACHADO
BEHANCE PROFILE




TOM KITCHEN
BEHANCE PROFILE




BRAM VANHAEREN
BEHANCE PROFILE

OLYMPIC MASCOTS

WENLOCK AND MANDEVILLE
video
Very clever concept, and great design work have been used for these mascots. they work much better than big teddy bears like all other olympic mascots

RODRIGO FRANCISCO

Rodrigo Francisco is a 20-year-old freelance graphic designer and illustrator from Brazil
http://www.runandshout.com

ARTEFACT 6

for this artefact i looked at group participation and the furthered my research into the format of instruction


VIDEO TUTORIAL
FLASH TUTORIAL

EVALUATION
For artefact 6 I created a piece instructional design for a Dreamweaver tutorial. The aim of this test was to find how user participation, and the format of instruction affected learning.
I created a roll over button tutorial. I used 2 versions of the same tutorial, the first was a video tutorial form the Internet, and the second was a Flash tutorial I created.
I asked 12 people to complete this task. (6 people using the video tutorial, and 6 using the flash tutorial). Below is how the groups were spit up.
• Individual
• 1 to 1 (myself helping the participant if necessary)
• Group (consisting of 3 people)

I analysed the results from the tests. I looked at
• Time taken, from each group
• Accuracy of final product
• Whether any issues arose in the task

Looking at the time for the task I found that the video tutorial took longer to complete. This was a surprise as I assumed that the participants would find watching the process of the task being completed easiest to follow. However I found that being a short task, users found the flash tutorial quicker to follow.
All the final products worked correctly.
I found that only the participants that worked individually came up with issues, reasons being they had no one to discuss their problems with.
Finally I found that the most efficient group was the 1 to 1 group. They completed the task quickest, and if issues arose I was there to help as I have experience on this type of task.
Through this test I found that users learn better in a 1 to 1 situation, as they can ask questions. Also in terms of efficiency a flash tutorial is better than video tutorials for a simple, shorter task.

ARTEFACT 5

EVALUATION
For artefact 5 I created an instruction manual on how to install a wireless router.
My aim was to observe whether the appearance of instruction affect the users understanding of the task.
I designed a flash based instructional manual, which showed users how to install a wireless router. I chose to do this task, as it is a multimedia-based task, however it is a physical task unlike the previous tasks.
I redesigned a current wireless router installation guide. I used the factors I found from my previous tests to produce an improved instruction manual. To improve the appearance of the instruction manual I used-
• Larger images
• Only meaningful text (Less than 150 words per step)
• Fewer colours (to make the instructions looks simpler)
• A navigation bar (to work at a desired pace, and skip or repeat steps dependant on the individual)
• Illustrations. To gain users attention
I asked 10 people to complete this task. 5 using manual1 (original manual), and 5 using manual2 (redesigned manual). All the participants had no previous experience of installing this particular product; I asked this group of people so I got a fair result.
I compared the results from both manuals, the first comparison was the time taken to complete the tutorials. I found that-
• Manual1 took 6minutes (on average)
• Manual2 took 5minutes (on average)
The second comparison was the how well the users understood the tutorials. I found that-
• 80% of the participants found Artefact 3 easy to follow
• 88% of the participants found Artefact 4 easy to follow
From I results I discovered that the appearance of instruction does improve how the task is completed, in terms of efficiency and understanding of the task.

ARTEFACT 4

EVALUATION
For artefact 4 I developed a flash based instruction manual. This manual was a revised version of the instructions I created for artefact 3and taught the users how to create a webpage layout.
The aim for artefact 4 was to improve artefact 3, using the ADDIE (analysis, design, development, implementation and evaluation) model. As this is the most commonly used instructional design process used.
I began by analysing the feedback from artefact 3 and finding the steps users struggled with I then reworked these steps using
• Help boxes containing more detailed instruction
• Screenshots
• Illustrations
I then designed a new instruction manual and resolved the issues from the previous instruction manual.
After carrying out this test I compared the results from this artefact and the previous artefact.
The first comparison was the time taken to complete the tutorials. I found that-
• Artefact 3 took 4minutes 45seconds (on average)
• Artefact 4 took 3minutes 48seconds (on average)
The second comparison was the how well the users understood the tutorials. I found that-
• 73% of the participants found Artefact 3 easy to follow
• 83% of the participants found Artefact 4 easy to follow

These comparisons show that the developed instruction manual for this artefact improved users learning. I found that the following factors help produce good instructional design-
• Easy to read font. So that the instructions are easy to follow
• Use only the necessary amount of text and images to complete the task successfully.
• Help boxes with extra instructions. To support users of all abilities to complete the task.
For the next artefact I will use these finding on instructional design, and test them on a different type of task. This will show me whether these findings work on all types of tasks.

ARTEFACT 3

EVALUATION
For my 3rd artefact I reworked my previous instructional design from artefact 2. I created an improved Photoshop tutorial. I looked at the ADDIE model (a commonly used instructional design process). Which involves analysing previous instruction and developing it until it matches the user’s needs.
I analysed the feedback I received from my previous test and made changes to resolve the issues.
The changes I made were
o Less text- because the more advanced Photoshop users found that there was too much unnecessary text to read.
o Help boxes for intermediate users who needed extra text on the instructions they found hard to follow.
o Change of font and layout to look simpler. Influenced by IKEA because they have successful easily followed tutorials.
I made these changes so users with varying skills can use the tutorial and work at their own pace, whilst also receiving
enough instruction to complete the task successfully which allows efficient, individualised learning.
I carried out my test using 6 participants of varying Photoshop skills.
I found that the users completed this tutorial quicker on average by 4 minutes compared to the previous tutorial. Also
67% of the participants found that this tutorial was more understandable that the previous. My participants said that they preferred this tutorial more because they only had to go through steps that were
necessary for them, for example if an advanced user already knew how to import images then they could skip that step. Also the intermediate and previously unskilled Photoshop users found the help boxes helpful as they had more detailed
instruction. And the extra help in the boxes were instantly viewable.
For my next artefact I will look at the sections of the tutorial the participants found difficult to understand and improve
them, via either illustrations of screen shots.

COMPUTER ARTS- TYPOGRAPHY ISSUE

If your into your typography this is a really good issue, with really good tutorials and over 600 free fonts!

CLIENT PROJECT SURVEY

survey for my client project evaluation
http://www.surveymonkey.com/s/JQQ7FGK

New IloveDust website

Ilovedust
Not as well designed as there previous website, in my opinion
but theres alot more new work on the new site

IE-Only Stylesheet

LINK

help on creating IE only style sheets, because IE always causes problems for us web designers.

New features for Dw CS5

LINK

CLIENT PROJECT - FINAL SCREEN SHOTS

Screenshots of the final website.
Fairly pleased with the outcome however i think it would have looked better if i had more HQ images to work with.

CLIENT PROJECT - FAVICON

Favicon- taken from the menu, with a slight colour change to match the webiste

CLIENT PROJECT - COLOUR THEME

Colour theme- Thai Food Rox, i added a darker shade of red to this theme as it was the red used by the restaurant

Client Project- Font choice

Type face- Vegur
I used this font for my website as all the current type faces on Dw didnt work for the theme of my website, i wanted a type face that looked clean, neat, simple and modern as these are a few of the characteristics of the restaurant i am designing for.
I found this font when i was searching for type faces on google
heres a link to the site


Using a font like sIFR i had 2 options

• using images for all the text
• or more simply using a font replacment programme

I decided to use the second as i though it would be something new to learn.
sIFR did make my site look much better, however i came up with a few issues

• loading times are a bit longer
• on a slower system you can see the original font before sIFR loads vegur
• sIFR and lightbox didnt work together on PC, with the sIFR rendered text overlapping the images
• styling the type faces were more difficult than i expected
• EG- you cant make text LIGHTER on sIFR, you can only have it normal or bolder
  
• cross broweser issues, IE had the text about 15px higher on the page than all other browsers- including firefox, safari and opera.
  

Client Project- Font reserach

Fh_Lenti- slightly Asian influenced but still easily readable.


AvantGarde BK

Helvetica Neue Ultra Light- on most Mac's i think. this was the original font i was using however i fount it a bit too light and difficult to read on the bold background colours of the website
Titillium

SPP3 PART A

Here are the final 9 images I submitted for spp 3
I wanted images that showed:

• Web Design
• Flash
  
• Graphic Design

I used images from Uni projects and freelance work over the past 2 years.
I used a white frame around each image, apart from the montage to keep them consistent.

VP-design- my current logo

Flash game
Portfolio website
Shimla Pinks restaurant website
Gold factory website and logo
PRP artefact 4
Freelance piece- a business card I made last year for a DJ group


Live client project- Spice fusion
image 9- A montage image of all my best work over the past 2 years, i used the Mac monitor as the background because i use a mac for pretty much all my work