Easy-to-read web content

The text on your website should be easy to read – at all times. If you have more copy than the designed area would accommodate you should consider optimize your website design for the quantity of the copy . To accomplish an easy-to-read content there are some basic rules so consider:

• Use short headings – your headline shouldn’t be longer than 8 words
• Avoid extra-long sentences – try to keep it under 20 words. Overcomplicated sentences might confuse or mislead your readers or simply be boring.
• Break your content into paragraphs – built up your content logically and make sure it’s broken into paragraphs not more than 80 words.
• Optimize the length of your pages – don’t try to stuff all the content into one subpage,  don’t make your visitors to scroll for hours to get to the good part. Unless your are publishing your memoir, try to keep the length around 250 words per page.
• Additional formatting options – optimal use of white space, readable font type and font size.

Keep the content simple and friendly

Keep it simple - unless it’s relevant to your business you shouldn’t show off how extensive your vocabulary is or how many slang you speak – your future clients might not be on your level and simply won’t understand it.
Make it personal - if you know your target audience, their age, education, interest etc. you have a clear vision who you are writing for. While creating your content, consider to write in. After all a huge component of any purchase decision is emotional, not rational.

Writing for the Search Engines

Alright, I guess we all have seen websites stuffed full of keywords an in many cases the sentences don’t even make much sense… Try to find the balance between a keyword driven content and a perfect description of your products services. To include relevant keywords on your pages are truly important, but if that means that you have to sacrifice the meaning of your copy you will definitely will drive more clients off then you catch. Select your keywords wisely, build it into your content logically without overusing them and without getting an impression that you targeted the search engines instead of the human beings.

The rule is simple: include your selected keywords into without sacrificing the quality.

Guide your audience

Besides breaking the copy into parts (headlines / lists / paragraphs) and using the formatting options a website has to offer ( bold / italic / underline etc.) you could think about what happens if your reader finished the page. Give some options to them where to go next – you could include related articles, call-to-action buttons, links, galleries or anything you think it will fit.

Use SpellCheck

Built in spelling check, your own head or professional help – up to you -just make sure your website doesn’t have spelling mistakes, grammatical errors. Mistyping happens to all of us and I’m not saying it’s unforgivable, but you should put some effort if you wish to convey a professional image.

The News /Article How to Write Effective Web Content appeared first on @designPINK.

“The paper density of a type of paper or cardboard is the mass of the product per unit of area. The term density here is used somewhat incorrectly as density is mass by volume. “Paper density” is more precisely a measure of the area density. Paper products that let little or no light pass through (e.g. poster board) are considered dense or heavy. Paper products that allow some light to pass through (e.g. tissue paper) are considered lightweight.” – from Wikipedia

When it comes to printing one of the first thing you need to decide is which paper type you choose. The thickness of the paper is quite important. Thicker paper is more durable, conveys different message and of course in most cases more expensive. To find an optimum solution look at the list of the general usage of different paper density:

• 90 – 100 gsm – used for stationery, text for magazines and booklets, flyers and brochures.
• 120 -170 gsm – used for text for booklets, flyers and brochures. The heavier the weight, the more “upmarket” the feel.
• 200 – 250 gsm – ideal for magazine and booklet covers
• 280 – 420 gsm – used for cards of all sorts and book and booklet covers.

Lamination / Celloglazing

Lamination offers a substantial protection to your printed materials.  It’s waterproof and makes the paper more durable. As a finishing option you can choose from matt or gloss celloglazing to give your designed cards or brochures something extra.

Raised Printing / Embossed Printing / Foil Stamping

The raised print is a specialised process which involves applying a fine  powder to the wet ink and passing it through a heat tunnel which instantly creates the raised effect. Yyou can feel the text on the card, rather than just see it. Raised print can only be applied to one side of the card or paper.

Embossed printing will add elegance to fine patterns you want to  integrate into your corporate image. By adding an extra dimensions to your imagery it will change the nature of the material you present to your viewers. By giving it a quaint look your image is enhanced by a blank impression onto paper.

Foil stamping uses heat and metallic foils to create a shiny metallic eye catching finish on goods such as packaging, wedding stationery, invitations, personalised stationery, corporate stationery, gift cards, brochures and presentation folders. You can choose from different foils including black, gold, hologram and silver foils.

Premium Textured and Metallic Papers

For your printing products you can choose from a wide selection of specialty papers to give that extra something to your printed collaterals. Take a look at some of the specialty papers we recommend:

Linen paper stock - This is a sensible paper characterized by a subtle, calm grid woven fabric pattern, and the material has a sturdy surface with a soft color.

Tant paper stock - Unevenly embossed – only front side

Nouveau paper stock – Neat, warm, and simple looking

Silky Matte paper stock - bright white surface,  excellent color results,  excellent text legibility

Particles paper stock - Natural heavy environmental friendly paper, antique and lightly textured

Vintage Craft paper stock - Natural heavy environmental friendly paper, antique and lightly textured

Star Dream paper stock - Metallic glitter two-sided coating, elegant and luxurious look.

Star Gold paper stock - Gold glitter pattern with metallic and pearlescent two-sided coating.

Light Gold paper stock - balance of soft gold and pearl. Metallic light gold with gold shimmer.

Light Silver paper stock - Quality smooth uncoated with subtle silver glitter.

Chameleon paper stock – The sublte metallic color changes depending on the angle of the light.

Concept paper stock - Mystic metallic feel.

The News /Article Paper Types and Paper Stocks appeared first on @designPINK.

What is QR Code?

“A QR code (short for Quick Response) is a specific matrix barcode (or two-dimensional code), readable by dedicated QR barcode readers and camera phones. The code consists of black modules arranged in a square pattern on a white background. The information encoded can be text, URL or other data.” – Wikipedia

Who Can Use QR Codes?

Basically anyone, who has a mobile phone with camera. By scanning the codes you can access, images websites and text, code and much more. You just need to install a code reader on your mobile and you are ready to take advantage of QR Codes.

Add them to any print advertising, flyers, posters, invites, TV ads to use it for promotions, vouchers, registration, advertising simply providing additional information  for example:

• Product details
• Contact details
• Offer details
• Event details
• Competition details
• A coupon
• Twitter, Facebook, MySpace IDs
• A link to your YouTube video
• A link to you website

Can it be customised?

Yes! It can be easily customised to match your branding colours. You can even include your logo or other symbols. Of course, more information it contains more complex the QR code becomes and you have less freedom for customisation. But changing the colours to match your corporate branding is the easiest way to make them unique. The recommended minimum size is 32mm x 32mm although you could make it smaller, just don’t forget to test it before you launch your campaign.

If you need assistance with customising your QR Codes, we are happy to help, just send us an email. 

Free Online QR Code Generators and what they can do

Google QR Code Api – With the help of Google’s Api you can integrate easily to your web applications e.g. online proposals, invoices

ZXing Project - Calendar event, Contact information, Email address, Geo location, Phone number, SMS, Text, URL, WiFi network.

BeQRious - URL, Email address, Phone number, Text, Contact information, SMS, YouTube, Services, Graphical (to put an image into your QR code for a URL),Google Maps.

Delivr - URL, Services (such as Twitter, Facebook, Flickr, etc.), Google Maps, Contact information, Email address, Phone number, SMS to phone number, SMS to short code, Text, RSS feed

Azonmedia - Text, URL, Phone number, SMS, Email address, Email message, Contact details (vCard & meCard), Google Maps( location search is available), Social networks (such as Facebook, Twitter, Delicious and some other services).

Maestro - Phone number, SMS, Google Maps （location search is available, URL, Contact information (MeCard, BlackBerry Pin and BlackBerry vCard), Text (RAW), App Store (for Apple, BlackBerry, Android or customized), Calendar event (vCal).

goQR.me - Text, URL, Phone number, SMS, vCard.

Mobile-Barcodes - URL, vCard, Text, Phone number, SMS, Email address

KAYWA - URL, Text, Phone number, SMS.

The News /Article QR Codes Revealed appeared first on @designPINK.

Common folding type for 4 pages documents

Single fold or half fold or book fold

This type of fold is mainly used for brochures, postcards and I actually saw some creative business cards with half fold as well.It is usually constructed by folding an 8.5″ x 11″, 8.5″ x 14″, 11″ x 17″ or 11″ x 25.5″ sheet of paper once, creating 2 equal halves. The inner pages are usually used for the content, while the front and the back page presents some company information.

Common folding types for 6 pages documents

C-Fold or Letter Fold or Tri-Fold

This common fold, used for mailings and brochures, is much like a letter folded by hand for inserting in an envelope. Basically folding an 8.5″ x 11″,8.5″ x 14″, 11″x 17″ or 11″ x 25.5″ sheet of paper twice. The inside right panel folds to the left and the inside left panel folds to the right on the top, forming the cover page.

Double Fold or Gate Fold or Window Fold

The gate fold is very attractive as the succession of message presentation is dramatic. It requires either handwork or specialized equipment. Lining up images that cross over the inside flaps can be very difficult. The left and right edges fold inward with parallel folds and meet in the middle of the page without overlapping.

Z-Fold or Fan Fold or Zig-Zag Fold

The “Z” style offers an advantage for multi-page letters to be collated and hand inserted for mailing. Because the pages nest together, the letter is opened with the pages in sequence. Folding the sheet of paper twice (the outside left panel folds to the left and the inside right panel folds to the left, forming the brochure cover)as a result it shapes as the letter “Z”.

Common folding types for 8 pages documents

Parallel Map Fold / Double Parallel Fold

The Double Parallel Fold & Parallel Map Folds require a four panel design (8 pages). An 11″ x8.5″ sheet is folded into a 2.75″ x 8.5″ brochure. This fold is commonly used for larger sheet sizes such as 14″ x 8.5″ which yields a 3.5″ x 8.5″ brochure and 17″ x 11″ sheet which yields a 4.25″ x 11″ brochure. The two inside panels are slightly narrower than the two outside panels. This fold is popular for programs and promotional pieces.

Parallel Roll Fold / Barrel Fold

Popular, although sometimes tricky, the barrel fold “rolls up” a multi-panel brochure. Each panel must be slightly longer than the preceding one. It may or may not be a good design for a given brochure as the message tends to unroll rather than open up to the reader. Consists of 4 panels: two panels that are the largest size, a short panel, and an even shorter panel.

Accordion Fold / Triple Fold

This is the four panel version of the previously mentioned “Z” fold. It makes a nice presentation. Zigzag type of fold, opens in the manner of an accordion, permitting the paper to be extended to its full size with a single pull. Used for travel brochures, direct-mails.

French Fold orquarter-fold or 8-panel right angle fold

A french fold brochure is made by folding a page in half in one direction and then folding the folded page in half again in the opposite dimension. After folding it consists of eight panels, four on the front and four on the back. Eight-panel french folds with even panels are commonly used for greeting cards and wedding invitations.

Common folding type for 10 pages documents

Double Accordion Fold

This is the five panel version of the previously mentioned “Z” fold. It makes a nice presentation. Zigzag type of fold, opens in the manner of an accordion, permitting the paper to be extended to its full size with a single pull. Used for travel brochures, direct-mails.

Common folding type for 16 pages documents

Parallel Booklet

This is the eight panel version of the previously mentioned parallel map fold.

The News /Article Folding Types Explained appeared first on @designPINK.

Basic Printing Terms

Artwork

All original copy, including type, photos and illustrations, intended for printing.

Bleed

Printed colors that run to the edge of a the paper. To accommodate the bleed, the printer must make the bleed image area larger than the final trim size. The page is trimmed through the bleed area.

CMYK

Acronym for the four process color inks used in 4-color printing: Cyan, Magenta, Yellow and Black. The “K” in CMYK does not necessarily stand for black, but rather, for the “Key” plate. The Key plate is the plate that holds the detail for the printed image, and in 4-color printing this is usually done with black ink.

Halftone

A method for screening to simulate shades of gray. Darker tones are created with larger dots; lighter tones with smaller dots. This reproduction method contrasts with stochastic screening (same-size microdots) in a controlled random placement within a given area.

Layout /Mock Up

A drawing that gives the general appearance of the finished piece and usually indicates the relationship between illustrations and copy.

Offset printing (also called offset lithography)

A method of mass-production printing in which the images on metal plates are transferred (offset) to rubber blankets or rollers and then to the print media. The print media, usually paper, does not come into direct contact with the metal plates, which prolongs the life of the plates. The flexible rubber conforms readily to the print media surface, allowing the process to be used effectively on rough-surfaced media such as canvas, cloth or wood.

Resolution

How resolution is defined in electronic imaging will depend upon what item is being referred to. Output devices, including presses, print with dots, so the resolution in their case is described as being dots per inch (DPI). On the other hand, digital images, whether obtained with a scanner or digital camera, are made up of pixels, so their resolution would be defined as being pixels per inch (PPI). Monitor resolution is also defined as pixels per inch (PPI) due to its display of electronic files in pixels. Scanner resolution is referred to as samples per inch (SPI) due to a scanner’s method for digitizing reflective art and/or transparencies, which is to sample the original at a particular frequency – a higher sample rate (like 300 SPI) means a higher scanning resolution than 150 SPI, which is only half that of 300 SPI. The higher the sample rate (samples per inch), the more closely the scan will represent the original’s appearance due to it having more samples from which to construct its representation of the original.

RGB

Acronym for Red-Green-Blue, the primary colors of the additive color model, which describes how monitors and RGB digital images represent color by blending these three primary colors together. When all three are combined over each other the color of light is white.

Vector

A mathematically described object or path used to create images in drawing programs (or any program that includes drawing tools in its list of capabilities).

Technical Printing Terms

Crop Mark

Symbols placed in the margin outside the image area that indicate an area to be printed and/or trimmed from the image.

Die Cutting

The process of using sharp steel dies to cut special shapes from printed sheets either on flatbed or rotary presses.

Gate Fold

An insert where one or two pages are bound into a publication so that one or more pages will fold out from the publication.

Letterpress

The oldest form of printing, in which a surface with raised letters is inked and pressed to the surface of the printing substrate to reproduce an image in reverse. Examples of letterpress printing include carved wood or stone block printing.

Margin

Non printing area of a page.

Trim Marks

Marks that indicate where a piece is to be cut.

Printing Terms about Finishes

Coated Paper

Paper coated with clay, white pigments and a binder.

Emboss/Embossing

To press an image into paper so it is raised above the surface.

Gloss

A shiny coating on paper. Gloss coatings allow very little ink absorption, thus providing excellent color definition and contrast.

Matte

A coated paper with a non-shiny finish that inhibits ink from being absorbed by the paper.

Uncoated Paper

Paper that has not had a final coating applied for smoothness. Uncoated paper is absorbent and soft in appearance.

Varnish

A clear, liquid, resinous coating, either matte or glossy, that is applied to a printed product for protection and appearance.

The News /Article Important Printing Terms appeared first on @designPINK.

Free vector icon set containing 149 essential pictogram style icons for web or print projects. The set is a collection of usual user interface elements, generic icons and some social media icons. Plus some arrows, pointers, membership icons, office icons, bookmark icons, media icons, computer and phone icons and financial icons.

Free vector icon set – How to Download?

Download by clicking on the download button below the preview image. The zip file contains the editable pdf version (you can open it in Adobe Illustrator) and the .png version.

Terms of  Use

Feel free to use it for any personal or commercial projects but please, don’t sell, exchange, or in any way distribute… Backlinks are always appreciated. Enjoy!:)

The News /Article Free Vector Icon Set appeared first on @designPINK.

Design for multiple devices – Responsive designs

Smart phones and tablets are more and more popular. Slowly there will be more touch screen devices in use than desktops or laptops. This somehow triggers the need to optimise the websites for multiple devices. Mobile/ tablet websites or applications can take advantage of a full set of new interactivity.  In 2012, launch your mobile website to increase conversion rates from users on the go.

Minimalist designs with something extra

The new websites are moving away from cluttered designs, focusing on main messages and leading the user directly to some sort of conversion forms. Minimalist designs are still a strong trend, but I believe adding something extra could be a great challenge for this year. Custom, hand-made illustrations, full screen backgrounds would be the way to go.

Hand-drawn Illustrations

As I look around I can see more and more original art integrated into multimedia projects. It makes the website / presentation / brochure / poster  somehow more unique and personal. Moving away from stock graphics it’s a great idea to include hand-drawn unique sketches into the designs this year.

Bold Colours

Attention grabbing bold colours are great to emphasise the main parts of the site (e.g. your product). Of course it doesn’t have to be flat, it could contain shading, overlay patterns but overall it should be simple, brave and of course BOLD! 

Info-graphic style

Compress and visualise the details of your project or services with an info-graphic and  make it the main part of the design. If it’s a multimedia project, it can be even enhanced with animation and interactivity. Informative illustrations will grab attention and engage customers longer than a simple stock image and also provide a memorable experience.

Transparency, Animations, Layers

With HTML5 and CSS3 it’s possible to create stunning websites with animating different layers of the designs. This trend will grow further as soon as more tags/elements are supported cross-browser. Until then you can just take advantage of the new techniques and have a fall back design for the old browsers. Take advantage of CSS3 animations, transitions or includeparallax animation to make your website more visually engaging.

So, all in all we will see what 2012 brings in graphic and web design – all these seems pretty exciting. If you have ideas about the subject, I would love to hear what you think, send a tweet or drop a line.

The News /Article Web and Graphic design trends for 2012 appeared first on @designPINK.

It’s time to ReVamp Your Website!

Reasons for a Website Redesign:

Usually it’s recommended to upgrade your website yearly. For the search engines the consistent updates and the site popularity are essential. You can still keep the overall feel of your current website, with some small enhancements, usability improvements you can achieve magic!

Look at your competitors website… does it grab more attention than yours? Does it make better impressions or lead to more sales? If your answer is yes, you should consider implementing the latest online technologies to improve the efficiency of your online presence.

Other possible reasons to consider revamp or redesign is when your current website has usability difficulties: content is not properly organised, the website  is hard to navigate, the important message gets lost in the haystack.

The Process Your Website Redesign:

1. Information gathering about your business/industry/competitors/marketing strategy

2. In-depth evaluation of your current website.

3. Recommendations of cost-effective improvements.

4. Let’s proceed with the revamp process.

The News /Article Website Redesign – Is it time? appeared first on @designPINK.

Before you ask us for quoting please take the time and answer the following questions – it helps you and us to fully understand your brand, the services you might be interested.

Creative Brief for Web Projects

COMPANY-RELATED QUESTIONS

1. How would you describe your services and/or products?
2. What are the long term goals of your company?
3. Why do you want a new website? / What do you want your new website to accomplish?
4. Who are your main competitors?
5. How are you different from your competitors?
6. What’s the age range of your target customer base?

IDENTITY-RELATED QUESTIONS

7. Do you already have a logo and other graphics to be used? If not, do you want to have one created?
8. What keywords do you want to be found by in the search engines?

LAYOUT

9. Please provide a list of websites that you like and don’t like. Why do you or do you not like these sites?
10. Please provide a list of competitors websites.
11. Do you have ideas of the colors to be used, and colors you don’t like? Please provide example sites.
12. Please provide the main pages you need in the website.
13. Have you created the copy text for any of your pages?
14. Do you have existing business cards or other printed material we need to match?
15. Are you leaning towards custom drawn artwork or photographs?

TECHNICAL REQUIREMENTS

16. Do you need a domain name?
17. Do you need a web hosting service?

PROJECT REQUIREMENTS

18. What’s your preferred deadline, time frame or exact date of completion?
19. Do you have an approximate budget?
20. Would you like any addition design services to be packaged with your new website? Example: web hosting, domain name, logo design, printing, etc.

Creative Brief for Logo Projects

COMPANY-RELATED QUESTIONS

1. How would you describe your services and/or products?
2. What are the long term goals of your company?
3. Why do you want a new logo? What do you want your new logo to accomplish?
4. Who are your main competitors?
5. How are you different from your competitors?
6. What’s the age range of your target customer base?

PROJECT-RELATED QUESTIONS

7. Do you have a tag line? If so, would you like it stated along side your logo?
8. Do you have any specific imagery in mind for your logo?
9. Do you have any color preferences, or existing brand colors?
10. Do you have any colors that you do not wish to use?
11. What adjectives should best describe your logo?
12. What feeling or message do you want your logo to convey to those who view it?
13. How do you prefer your logo to be worded or written out?
14. How would you like the typography to appear?
15. Where will you logo be used? Example: print, web…
17. What’s your preferred deadline, time frame or exact date of completion?
18. Do you have an approxiate budget?
19. Would you like any addition design services to be packaged with your new logo?
20. What logos appeal to you and why?

The News /Article How to Create a Creative Brief appeared first on @designPINK.

When creating or planning your website you should pay attention on website usability. It’s one thing to put a website together which has a stunning design and even great content, you most likely won’t achieve your targeted goal unless you consider the basic rules of website usability. To keep your visitors on your site and ultimately convert the visits into sales (contacts) there are a lot of things you should take into account.

Navigation

Logically build navigation is essential to avoid that your site’s visitor get lost and give up on continue reading your site. With the lack of optimised navigation you can loose potential customers to your competitiors.

Logical navigation for better website usability: you can include home button in the navigation or back to the top link at the end of the page, the relevant category link on the sidebar, related pages link at the bottom of your page, breadcrumbs, clear where you are links etc. to make it easy and logical to your visitors to get from “A” to “B”. Don’t forget, not all your visitors will enter your site from the home page. It’s more likely that the starting point will be an article or a subpage introducing your services – you should guide them to reach the important contents from all the possible pages.

Don’t waste other’s time

Be clear and simple. Most users have limited time to get to the important information, you should consider if your links or content is hidden or hard to reach most likely your visitors won’t take the time to look for it. What may seem selfexplanatory for you it may not be simple for others to figure out.

Avoid Cluttering Elements

You might think it’s a good idea to put your favourite song in the background or automatically starting video cast, which might not be the best solution for your website usability. If it is your personal website and you don’t consider usability issues – well, it is up to you. But any other case give your visitors the chance to choose if they are really interested to watch that video, download that plugin or listen to that audio file. For some pleople (including myself) nothing is more irritating than arriving to a website where there is no clear guide what to do next or how to stop some annoying animation or advertisement.

Include Tag-lines

Statistics show that a website has 5 seconds to capture visitor’s attention before they leave the actual page. With a clear tagline you could help to summerize what is your site’s main focal point. Achieve higher website usability by making it clear what your website is all about.

Include Site search

Especially if you have an extensive content on your website, you can help your visitor to get to the important data by implementing a site search. Consider some main rules for the search box: make it 27 character wide, place it on top of the page and include a clear search button.

Graphics

Use it wisely, it should add some extra meaning to your website. Avoid using generic images which just take up the space and doesn’t have any website usability value. Don’t forget that sometimes less is more.

Use Site maps

Site maps in essence are a structural representation of a website’s pages and architecture. It can be a help for your visitors to get to relevant page they are looking for.

Create easy to scan pages

Most of the users they don’t read the webpages word by word, they just siply scan though for relevant details in bold titles, empahised text or lists. Studies conducted by Jacob Nielsen shows that users read the content in an F shape, which means they start form the upper left corner, than they move to the right and then move down starting from the left again.

Nielsen also states the implications of this reading pattern:

• Users won’t read a web page content word by word, they will extract important paragraphs, bold text, etc.
• The first two paragraphs are essential on a web page. These must contain the most important information that your visitors are looking for.
• Sub headings and lists stands out from the regular paragraphs. Use these elements to notify users on important information.

Take the traditional printed paper for instance. Catchy headline and first paragraph makes the reader to continue to read the whole article. To apply this method, simply put the most relevan, important content on top of the page, and breaking the rest of the content down logically.

Avoid misleading UI (User Interface) controls

Make sure that the web page elements, components (buttons, tabs, drop-down lists, link formatting, etc.) are consistent. Don’t underline text or don’t inlcude button-like elements in your webpage which are actually not clickable.

New Technologies

There are always some very attractive solutions what the modern web browsers are capable of handling. You should always consider the fact that your visitor might use an older web browser or visit your website on a smartphone. Inlcude degradation, special style sheets for different media, fall backs for these cases. Test your site on different browsers and devices to make sure it will be usable for everyone.

Whitespace

Blank space on your website could help keep a clean structure, and avoid cluttered design. It could improve your website usability and provide a more open appearance. Using white space to group elements.

The News /Article Website Usability Tips appeared first on @designPINK.