Thursday, 29 November 2012

business tips - lecture (Andy)


Freelancing & Setting Up Your Own Business

As part of this brief we had a lecture about setting up your own business. This fit in well with designing a website which is what our brief is because if you have your own business you will more than likely have your own website to go with it.
These are some points that I took notes of in the lecture.

-The earlier you start freelancing the better chance you have when you graduate.
-Its a business not a hobby.
-It isn't just about talent.
-Be nice but not too nice.
-Do you want to be successful?
-You will have to work late nights, early mornings and all weekend.

Sole Trader- Owned business and run on own.
Partnership- Two people in business together.
Limited Company ect.- Personal assets protected if company runs into financial difficulties.

-You have to register with HM revenue & customs.
Flat Rate Scheme- Only pay for what you get.
-You will have to set up a business bank account.
-Find an accountant you can trust.
-Overheads need to be as low as possible.
-Do you need to buy a studio or rent one?
-Indemnity insurance.
-Have good time management, not just including projects but calls, emails, reply to most important emails first then others throughout the day.
-Keep on top of everything.
-Perceptions- how you portray yourself, and how other people see you.
-Set targets-financially and production.
-How long will it take for the business to make a profit?
Brand Identity-Create a strong brand (not just logo) the more your active the more people will remember you (twitter, facebook).
-Make people remember you!
-What can you get for free? Get everything you can for free.
-Don't use a hotmail email, it's not professional.
  -Mention what you do on your website.

-Do you want a timeline of your work on your website? Where you started at to where you are now.
-Do you want a quote on your website? Something you've said or something that's inspired you.
-Infographics- displaying info visually, not just text.
-In your contact page show personality.
(bestaboutpages.com)
-Networking, everyone has at least 200 links somehow.
-Social networking (twitter, facebook).
-Referrals, cold calling-selling stuff, direct mail- database of emails, send people newsletters?
-PR people- newspapers, press releases, do you need one?
-Freelance for companies, they may take you on full time, get to no other inside studios.
-Tenders-Against people to get the job, Pitches-Get the job or don't (already seen work).
-Experience!!
-Are you cheaper, determined, fresh?
-Go to placements, free live, seminars, go online, face to face, have variety of work, a lot of work, follow the right people on twitter and facebook.
-If people don't reply about a job, email asking them.

ExposureProduce a website.
1. Celeb > Impressive to everyone.
2. Active Networker > Refer you if you do the job well.
3. Active Social Networker > Someone with 500,000 followers, good advertising.
4. Big Brand > Impressive, Respect.

-Brand awareness.
- Your product/service is amazing- always say and think this.
-Networking is important.
-SEO- Search Engine Optimization.
-Portfolio- Work experience, attach work to the email, 50% of people make mistakes in emails, check spelling, check emails! catch the persons attention, have your web link or digital PDF.
-Time management.
-Print your material or digital or both.
(newspaperclub.com)

Pricing1. Day Rate.
2. Hourly Rate > More than day rate.
3. Discount Per Job > Set a discount (20%).
4. Family Discount.
5. Referral Fee's > (10%)
6. Licence's, Expenses, Prints.

Is it worth it??


Invoicing
Professional
Consistant
Use a system (digital, printed?)
Colour Coded
Credit Note- Balance Books

Contracts
Deposit payment
Amendments
Deadlines
Payment Terms
Later Payment Terms

Contract in place and use when necessary.

Interview
Think positive (they like your work).
Show you can handle the job and show your personality.
Research them and the job before going.
If you don't no an answer to a question, start talking about something relevant and they will forget they asked it you.
Talk about yourself to start off the interview.
Show examples of your work and show them prints while talking.
Ask them questions.

Communication
Keep talking to clients.
Reassure clients your doing the work for them (send email updates).
Finished a job for someone, email them asking how it is and how its going.


Next level- Always try to improve on what you do.
Continue learning all the time- Read blogs, books twitter ect.
Don't be put off if you don't get a job or pitch.

Tuesday, 27 November 2012

more experimentation






Here I tried using subtle colour and pattern, I looked to see how it would look when toggled to black and white (should the user prefer) and I tried it with images on top also.
There are elements of this I don't like at all however I am not quite sure what they are. I am certain that I like my added feature which you can see on the top right. the there boxes which will give the user the ability to see the image on it's own on a plain background with a choice of frames.
This feature plus the option to hide the menu are both things I am certain I wish to carry forward in the design. Additionally I am certain that I want to keep my logo on screen at all times and that this will be a link back to the home (landing page - not splash) upon click.

Looking at subtle patterns in greys and black and white.

Looking at subtle patterns in greys and black and white.

images on colour

Since I had ruled out bold colours in the background I decided to look back at previous designs with more subtle coloration to see how my images could sit alongside.

Sunday, 25 November 2012

design idea


Some more examples I did to see how colour backgrounds work with images. Although I do not like this design it was useful in the elimination process as I now know colour fill backgrounds will not work for my site so will look at ways of intro ducting colour in a more subtle manner

Thursday, 22 November 2012

design sample 2 - floral

here's another design example I created in photoshop using a custom pattern which i changed the transparency of and added a transparent colour filter also. Again I have used this transparent side menu which has the option to be hidden however the logo would permanently remain in the corner of the screen almost like a postage stamp (on the wrong side) I have added two icons on the top left. These will be a full screen option and also a button which turns the design from colour to black and white (as pictures show) should the user wish to.

Wednesday, 21 November 2012

design ideas


With these images, I payed around with using different backgrounds. Although I like them I feel they could potentially take away/distract from my images


With the one below, although the textured background is problematic as mentioned previously. I liked this idea of using different shades or colours to indicate a subconscious hierarchy of pages.
This is something I will think of when putting together my final design.

geometric design splash page

I quite like the idea of having a geometric design
I created this as an idea for a splash page to see how strong lines look when combined with text.
I like the minimal look, especially here as it has some character without being overwhelmingly colourful

design sample - floral 1

  

here's another design example I created in photoshop using a custom pattern which i changed the transparency of and added a transparent colour filter also. Again I have used this transparent side menu which has the option to be hidden however the logo would permanently remain in the corner of the screen almost like a postage stamp (on the wrong side) I have added two icons on the top left. These will be a full screen option and also a button which turns the design from colour to black and white (as pictures show) should the user wish to.

Tuesday, 20 November 2012

comic sans must die


Comic Sans Must Die!

Love it or hate it, Comic Sans is one of the most popular fonts in the world.
Vincent Connare designed the font for Microsoft in 1995. He described it is best being used for “new computer users and families with children”. Despite this it has constantly been misused and can be seen everywhere from school letters, e-mails from government officials and even in documents about the discovery of the Higgs Boson.
Since it was unleashed on the world there have been multiple calls by designers for the font to be abolished completely.
Comic Sans Must Die is a project that satisfies every designer’s dream: to see Comic Sans die a slow and painful death. Every day the individual glyphs of Comic Sans will have their demise displayed for all to see.

Bents - garden centre site

I found a site which utilises the same transparent vertical left aligned menu as I propose to create.



initial design samples











This was my first digital wireframe, I created the above 4 pages.
The bottom was an idea for my splash page which could be changed on a regular basis.
then from the top down after selecting a project from the main menu you would have got a screen with a text overview of the project followed by another click to get into seeing all the thumbnails, followed by another click to get the images into a full viewing mode. 

I instantly realised this was too many clicks and so illuminated the project overview page which came before the imagery at this stage.

Monday, 19 November 2012

10 tips for a successful site


Tip 1: Sections

Before starting it up, properly plan out the sections of your website. Your website must not drive the visitor crazy; rather make him/her to explore more. Your website can give an impression of clarity, simplicity or complexity, the choice is yours. Popular photography websites usually don’t have headers, footers or tabs. All they have is an about us section, image galleries, with the possibility of some text and a call to action portion for the clients or customers. How you engage your visitors with these is up to your creative skills.

Tip 2: Target Audience

The most important factor in impressing a target audience is to fulfill their requirement. For example if you wish to impress tourists, then bring forward the pictures of tourist spots, restaurants, landscapes, nature and culture, as these are most likely going to get their attention. Play around, you might not get their attention at the very first attempt but slowly you will understand their interests and that’s where you will win their hearts. Similarly portrait photography can help you achieve better results in the relevant field.

Tip 3: Designing Software

Look around, there is a variety of templates are available for you to select from. The website design software is selected on the basis of the operating system you are using. There are many online web designing platforms offered by different websites. Remember not to use the tools which you don’t know anything about. Experiment, explore and engage. These are the three E’s to your success.

Tip 4: Make it Flexible

Allow for dynamic content in the website. So that later on you can modify the contents easily. The layout should also be flexible enough to change the outlook of the website, if required. Categorize your photographs as you deem suitable.

Tip 5: Use High Resolution Images

Stock photography always demands high-resolution imagery to attract the interest of the buyer. With the modern day digital cameras high-resolution photography is not a big deal. Although the high-resolution images are larger in size and therefore slow down the website in loading, there has to be a tradeoff and you can never compromise on quality.

Tip 6: Adaptability to Different Platforms

With the increasing trend of smart phone usage a website should also be able to correctly show its contents for different resolution. Sometimes an alternate website is created for smart phones or iPads. Another popular trend is to use responsive web design.

Tip 7: Colors

Often neglected, background color in a photography website is as important as the contents. White, gray or black colors are usually recommended for photography websites. This is because neutral backgrounds don’t affect the colors of the photos itself. Try any of these colors in your website and have a feel of how it looks. Shades of grey can sometimes give a fascinating look.

Tip 8: Easy Access for User

If the website is not explicitly used as a portfolio then you can add e-commerce tools in it to enable the user to directly buy from the website. A contact us page with useful information will easily tell the user how to contact you or your organization. If you ask a user to fill form for details then do visit the database regularly where those forms are stored.

Tip 9: Showcase Your Best

Any organization will put its most cherished accomplishments at the forefront. If you are too afraid for your images being stolen then you can use the second string images in the website. But then the impression on the visitors isn’t that great. Rest assured that everyone is not a thief. If you properly watermark the images then it is difficult to get the real image. Other than that Copyrights would do a great job for you.

Tip 10: Test Before Launching

No matter how adept you are in web designing don’t take anything for granted. Preview your website through different browsers and their versions. It is better to divide the whole process into stages and then preview each stage and after integrating all the components take a look at the final outcome.
There are many dimensions to care for when you create a photography website. Although looks are the most important factor in such websites but having an effective communication with the visitor is also critical.

(http://geekszine.com/creating-a-photography-website-10-tips-to-a-successful-website-589.html#ixzz2CiA2KbhK)

Free Font Sites



Fonts are one of the most important aspects of the work of designers, and a lot of man-hours are spent searching for just the right font for a particular project. Sometimes the designer will be fortunate enough to find a free font for the job, which will inevitably keep the price down for the client. Other times only a premium font will do.
Here we have selected 20 of the best sites offering free fonts and 10 of the best sites offering premium fonts, including a couple of independent type foundries.

Free and Premium Font Sites

The Best Free and Premium Font Sites

Free Font Sites


Dafont
Dafont

1001 Free Fonts
1001 Free Fonts

Fontsbytes
Fontsbytes

Font Squirrel
Font Squirrel

Abstract Fonts
Abstract Fonts

Urban Fonts
Urban Fonts

FontSpace
FontSpace

Acid Fonts
Acid Fonts

Search Free Fonts
Search Free Fonts

Google Web Fonts
Google Web Fonts

Premium Font Sites

Sometimes a premium font is required for a project, and you could spend anywhere from around $20 upwards for such a font. Usually premium font sites offer more facilities and extra applications for purchasers, such as custom text previews and direct-to-web usage.

My Fonts
My Fonts

Fonts.com
Fonts.com

FontShop
FontShop

Linotype
Linotype

Type Together
Type Together

Font Haus
Font Haus

Ascender Fonts
Ascender Fonts

Adobe Fonts
Adobe Fonts

Cool Fonts
Cool Fonts

Commercial Type
Commercial Type


Choosing the right fonts for your website


Choosing the right fonts for your website

Choosing the right fonts to represent your business is a key part of your branding, both online and offline. For leaflets, business cards, posters or any other offline material, it's easy — pick a font, print it and you are done. Online, things can be more complex, and it is worth ensuring your fonts will work online before you finalise your font choices.
It is also important to choose fonts that match the feel of your business — are you aiming to portray a fresh and modern persona, a well established and formal look or something else? Picking the right fonts is a large part of how your business is perceived by others.
Most websites use two to three fonts — one for body (i.e. normal paragraph text), one for headings, and one for the logo. Sometimes the headings and logo are the same, and sometimes the headings and body are the same. It works best if these fonts are picked to work together, and are used on all documents produced by the business — the website, any other advertising including posters and leaflets, business cards and any formal documentation or letters that are written. The body text is usually a clear easy to read relatively boring font, whereas headers and logos can be more fancy. Often very fancy fonts are matched with simpler ones in order to keep things easy to read.

Choosing cross platform fonts

There are only a small number of fonts that are available on Windows, Apple's OS X, iOS (running on iPhones, iPads and iPods), Android and Linux. Microsoft released a core set of web fonts between 1996 and 2002 which can be assumed to be on any system. If they aren't, there are usually some very similar fonts to be used instead — many Linux installations don't include these, but do include similar open source clones. These core web fonts are:
Font name A sample using fonts on your computer/device
Andale Mono“The quick & brown fox jumped over the lazy dog!”
Arial“The quick & brown fox jumped over the lazy dog!”
Arial Black“The quick & brown fox jumped over the lazy dog!”
Comic Sans MS“The quick & brown fox jumped over the lazy dog”
Courier New“The quick & brown fox jumped over the lazy dog!”
Georgia“The quick & brown fox jumped over the lazy dog!”
Impact“The quick & brown fox jumped over the lazy dog!”
Times New Roman“The quick & brown fox jumped over the lazy dog”
Trebuchet MS“The quick & brown fox jumped over the lazy dog!”
Verdana“The quick & brown fox jumped over the lazy dog!”
Webdings“The quick & brown fox jumped over the lazy dog!”
You'll likely notice a few things straight away — of these fonts, the monospaced ones (Andale Mono and Courier New) aren't really appropriate for logos or body text. Comic Sans MS is very pixelly at small sizes, and is very over used (see the Ban Comic Sans web site!). Webdings is designed to provide symbols for signs and things, so isn't that useful either. Impact looks really horrible at small sizes, leaving us with only 6 versatile fonts that we can rely on. These are the two serif fonts, Georgia and Times New Roman, and the four sans-serif fonts, Arial, Arial Black, Trebuchet MS and Verdana.
In 2007, Microsoft released their "C" fonts — Calibri, Cambria, Candara, Consolas, Constantia, Corbel. Though these are quite common on Windows computers (they shipped with Windows Vista and Windows 7, and are included in Windows 8), elsewhere they are unusual. They aren't included on iOS or Android, are only on Macs that have bought Microsoft Office 2011 and are only on Linux machines where the user has copied them from a Windows installation. Hence we can't really use those fonts either.
Coming from the other side, many well known fonts that are installed on Macs and iOS are very rarely available on Windows: Helvetica, Futura, Gill Sans, Optima, Baskerville and many others are on a negligible number of Windows machines.
This means that if you have picked any font other than the six above, without using the techniques below, your website won't look the same on different operating systems.

Fallback fonts

For areas of the website where it isn't critical that the font is the same across different computers (most body text falls into this category), fallback fonts can be used. For instance, Helvetica and Arial are very similar, so the site can be built so that if the user doesn't have Helvetica the text is drawn using Arial instead. Calibri could be used, with a fallback to Trebuchet MS. This works well, but can cause problems as each typeface isn't exactly the same size — the letters can be higher as well as wider, so text might not flow in the same way. For longer sections of text this can mean the text takes up a significantly different area. This does let us use fonts such as Adobe Garamond Pro that are expensive and only come bundled with high end software if the user has them, while dropping down to more common fonts for users without.
This is usually referred to as a font stack. The web designer simply provides a list of fonts with their preferences first. This font stack can contain as many fonts are as required, so it is possible to use a fallback for a fallback for a fallback if needed!
For headers and logos, this often isn't ideal as most businesses don't expect that their logo will look different across different computers, which leads us onto the two ways to get unusual fonts to work online…

Ensuring Consistency - Option 1: Using images of text

The traditional way to do this is to simply make an image of the text. Although this is quick and easy, and guarantees it looks the same everywhere, there are a number of problems with this method, making it only really appropriate for logos. In no particular order, the problems with using images of text are:
  • The text can't easily be changed afterwards, and is hence unsuitable for text that can be edited, for instance titles of blog posts or product names on a database driven site.
  • When the user zooms in, the image will look pixelly and grainy - this isn't good for touch screen devices where people frequently zoom in, or for people with poor vision who may zoom in to help them read the text.
  • The image can have a much larger file size than the font - particularly if the text is big. This causes the website to load more slowly.
  • People can't select the text, meaning they can't easily look words up in a dictionary (double tap with three fingers on most Macs), or easily quote your text on Facebook or Twitter. Some users also highlight text to help them keep their place while reading longer sections. Safari also offers a "Reader" feature that extracts the text and lays it out in an easy to read fashion - features like this can only work on real text.
  • Google and other search engines can't read this text, meaning that any thing it says won't be indexed and searchable. This is very bad for SEO. There are a variety of techniques to try to get Google to index this text, but they all involve typing the text, hence making the user download it twice - once as an image and once as text!

Ensuring Consistency - Option 2: Embedding fonts

Thankfully, within the last few years every browser now supports a technology known as @font-face. This allows us to embed fonts into the webpage, allowing us to use a much wider range. The downside is that when a font is embedded any user can download the font and use it. This means that only fonts that have an open license can be embedded. Fortunately, there are many font foundries producing free fonts that are often of very high quality. Picking a font that allows embedding is very sensible as we can then guarantee that it will look the same on all computers, making sure your online text matches your offline text. Because less people are using these fonts (though that is starting to change!) it also means your business will be able to have a unique look, which can often add a subtle professional feel to your design.
Google have helpfully provided a website that catalogues many of the best fonts that can be used in this way. It can be found at Google's webfont directory, and is definitely worth looking through before settling on a logo design. There are over 500 fonts available here, and the number is increasing all the time. We would recommend that you use a font from this website where ever possible to guarantee things can look the same across all of your marketing.

A selection of different ways to style the same text — all have a very different feel. The fonts come from Google's font directory, and have been embedded in this page. Click on the text and type to change it.
Embedding fonts allows you to get the best of both worlds - consistency across different platforms, whilst also using interesting and defining fonts. We have used font embedding in almost every website we have designed - here are some interesting examples where we feel that the design would not have worked without using this technology.

Case studies

Alison Philps

Alison Philps For Alison's site, we wanted to create a welcoming, feminine classy feeling, reminiscent of the design of glossy wedding magazines. To do this, we picked a very readable, yet distinct font for the body - Droid Sans, produced by Google for their Android range of phones. This font was designed to be read on screen, and is hence heavily optimised for this use case. It is modern and clean without being distracting.
For the headings and the logo at the top we picked Prata, an interesting serif font. Rather than opting for either Times New Roman (too reminiscent of writing essays at college!) or Georgia, Prata provides a clear identity, particularly with it's calligraphic ampersand (&). It's lowercase letters are nice and high, giving the rounded letters lots of open space which makes it clear and easy to read.

Waterside Network Group

Waterside Network Group The Waterside Network Group use the Screengem font in their existing leaflets - it's a fun and quirky font that we wanted to incorporate into the design. We used it for the text on the sliders, as well as their phone number and the speech bubble from the bee. We paired this with Ubuntu a font designed for all the menus and dialog boxes for the popular Linux distribution with the same name. This font was commissioned to provide Ubuntu with a modern, clean and easy to read interface, so it seems clear that it would work for the body text on a website.

Hi-Q Building Services

Hi-Q Building Services When we designed the website for Hi-Q Building Services we wanted to ensure that the keywords describing what they do were very clear. The text in the top left is real text, styled using Crimson Text. This means that those keywords are readable by search engines, as well as giving visitors a quick idea of what they do.
For this website, their logo on the right is also using real text, again, helping to ensure the words "Building Services" and "Plumbing & Heating Specialists" are both in the first few phrases on the page.

Summary

Without embedding fonts, there are only six fonts that you can guarantee will be available. While you can provide fallback fonts so that things can look as good as possible, this often isn't an ideal solution. Choosing a font that allows embedding in websites (often referred to as @font-face) before getting anything printed is a great idea to ensure consistency.
At Focal Strategy, we always think carefully about which fonts to use, whilst ensuring that the site loads quickly and has its content available to search engines.
Do you have an example of a site that has particularly good font usage? Perhaps you know of other sources of fonts that can be embedded? Feel free to share in the comments below!

(http://www.focalstrategy.com/blog/1288/Choosing-the-right-fonts-for-your-website)

initial planning and research into good and bad design