Recommended
More Related Content
Recently uploaded
Recently uploaded (20)
Featured
Featured (20)
Transitioning from Print to Web Design
- 17. www.google.com/webfonts webfonts.fonts.com https://typekit.com www.fontsquirrel.com
- 27. Designing with web standards by Jeffrey Zeldman
Editor's Notes
- A little bit about myself.I am interactive art director in the agency called Creatage.Most of my time I spend designing websites, landing pages, banner ads, social tabs and emails.I was starting as a print designer and transitioned to web 8 years ago.I am here to share what I learnt about web with you.
- What do you a s a print designer need to know to do it well.
- First, you need to Understand that the web is different. And the way user consumes information online is different so you need to treat web design differently.Learning css html is a key to success. Even if you won’t end up doing coding your design you will understand how page is put together, how it behaves, how it renders in a browser. It will help you do a better job.Always try to improve yourself, learn new tricks, ask questions, google everything, network with people who can help you grow.And have fun…
- Another quote I like
- Let’s talk about layout.
- In print you know what space you are allowed from the start and that your finished product will look the same to everyone who sees it.In web you will be designing your sites to look the best on all screen resolutions and different devicesHere are most commonly used screen resolutions
- Here are most commonly used screen resolutions.You can see they are all over the place.The most common resolution right now is 1366x768.So, what size to design for.
- So, what resolution should we design for? 1024x768 Not necessarily.It all depends on how many devices you will want to cover and what are the common screen resolution sizes your potential audience using.For example if your site aiso going to be targeting mobile and tablet I would recommend designing for the lowest and the highest resolution. And if you won’t be doing development, sit down with your developer and figure out all the intermediate stages as you go.I will recommend designing mobile first and then designing for bigger resolutions
- Another challenge.Your website will look different in every browser. Older browsers don’t have support for new features.What can we do about it? Be flexible. You design doesn’t need to look the same in all the browsers.There are few techniques out there to deal with this problem. One of them is progressive enhancement. Basically PE is a way to make experience better for the users that have newer browsers. Like using using native drop shadows, small css3 animationsdoesn't work for everyone, but works for the people that have the latest browsersYou don’t need to create multiple layouts. You will sit with a developer and work on it with him.
- Let talk about type.A couple of major differences exist between best practices in print typography and those in digital typography.
- Serif fonts have traditionally been used for body text in print publications because they are easier to read on paper. But studies have shown that sans-serif fonts have higher readability on screen.
- Take into consideration readabilityAvoid going too dark or too light for your text copyDark grey is easier on the eyes. Going too light can make text hard too readSame thing if you reverse. White text is hard to read on black bacgroung. Use light grey.
- A font you selected for print may not work on the webIf you selected a font:Check few things:1. Look if it will be readable on the web.2. Also, not all the font foundries allow you to use their fonts for web. Check terms of use for that particular font. Look for alternative font if
- Here are few website I would recommend using to find fonts for the webFonts.com - good font selection starts from 410 m free from 3,000 total of 20,000Typekit – full library starts from 50 a year 729 fontsGoogle free – 500 font families
- Most print publications use a 10- or 11-point font (some even go as small as 9 points). This could work on paper, it is often very difficult to read on-screen. Increasing your font size to 12- or even 14-point type will make your articles much more reader-friendly.When you select font size take into consideration font complexity. Check to see how the fonts look on the browser at the right size. If you’re using an elaborate script or grunge font, you’ll want to increase the font size. Simpler fonts usually can be kept smaller.
- RGB generally produces brighter and more vibrant colors. Shades of just about any color can be affected and will generally appear duller in CMYK.Because images in digital publications are viewed in RGB, no conversion is needed (scanners and digital cameras both render images natively in RGB). This means that proofing on screen is adequate, without the need to print out individual pages.
- Design websites, emails inphotoshop or illustrator or fireworks. It’s up to you but check with a developer what he prefers if you are just designing.I found that most developers prefer Photoshop.If you are designing Flash banner ads use Illustrator or design right in Flash. Because they are both vector graphics.Avoid using inDesign for any web mockups. So, if you don’t want the person who’s going to be responsible for converting your mockup into an actual website to curse your name, don’t use InDesign.
- When you print out your web mockups. The color and size won’t be accurate and the design will be out of context.
- Designing for web you need to take into consideration usability principles
- Designing for web you need to take into consideration usability principlesUsability basically reminds designers to think about the needs of their audience. On many commercial and informational sites, web users simply hope to find things or do things as quickly as possible. They do not wish to be creatively challenged by a complex multimedia experience. They merely want to find what they seek and get on with their lives. The value in the Usability perspective is that it reminds web designers to create sites that people can actually use.Somewhere between these two extremes you will find the appropriate bal- ance for each site.
- Those were just few big differences you need to take into consideration while designing for web.Do you want to learn more?Here are few resources
- Those were just few big differences you need to take into consideration while designing for web.Do you want to learn more?Here are few resources
- That’s it. Thank you.