Whilst working in my job as a graphic designer I often have to collaborate with other people as my agency sometimes just manufactures and not actually designs a website (or an application) since some company like to stick to their standard advertising agency for the layout. This means, we are only responsible for the implementation ( in this case my job is to coordinate between the designer and our developers) and the other agency is responsible for the design and layouts. This sometimes really sucks as I often have to deal with designers which are not used to web- and screendesign and drive me nuts.
Therefore I thought I'll share some helpful tipps with the world. I hope I might reach some screendesign newbies and help them to not drive someone crazy:
​
​COLORS STYLE
For screen- and webdesign you should define colors in RGB and hex codes. Developers mainly use the hex codes, but sometimes the RGB colors is needed too.
IMAGE IMPROVEMENT
Many printdesigner also make a lot of mistakes with pictures. A main mistake is not saving files correctly. So if you like to implement pictures on a website make sure you prepare them as following:
color space: RGB
resolution: 72 dpi
size: prepare them exactly in the size in which they will be implemented on the website. You ask why? Some browser have problems with scaling, it will make your website load faster and it saves you a load of storage. Headerpictures wich apply on the whole width should at least have 2880x1920px but not exceed 600kb. Caution: If you have a responsive website make sure you covered the biggest size in which it will appear.
memory size: to scale down the storage size you can use tools like tinyjpg.com which compresses you pictures without loosing much quality. Also use the option "Save for web" in Photoshop to save pictures and scale down to a lower quality if the memory size is to big.
naming: for seo-optimization you should name the images with keyword. Choose keyword which are connected to the picture and also include the company name. Isolate the keyword bei using "-". For example: urbany-blog-wix- diy-shappy-chic-project-1.jpg
CONTENT IS KING
The biggest mistale print designers often make is trying to put as much content on the website as they can. This is wrong in many ways.
First: People visiting a website looking for imformation get easly overloaded and driven away by to much and confusing content. Break down which content is really interesting to the customers and which will make them come back again. Very important: 1. high-quality and capturing texts (short and significant) and 2. tempting and comprehensive images. You could also add multimedia elements (e.g. a videoheader), but please always consider: less is more.
Second: Print designers often just think in one dimension like they are forced to do on paper. Screen-/websdesign has the huge advantage and possibility to place content in different ways and on different locations. Following a few suggestions (there are many more):
THINK RESPONSIVE
Resposive Design is status quo and can't be ignored. As there are to many different divces, to many different developers of devices and also to many version you have to make your design flexibel. A friend of mine asked me: How is it that every modern site kind of looks the same? I'ts based on the restriction and requirements resonsive design has (but a clever designer know a way to work around a bit). Here is a guide for beginners.
TYPO IS IMPORTANT
Appearance: Only use 2 typefaces on one site (maxium 3): For Headlines you can use a playful font but for the running text you should use a readable font. If you use different font the difference should be easy to spot!
Font available as Webfont: Not every font is available as a webfont, please check first!
Source: font are often quite expansive, combine payable and free fonts (e.g. g free oogle fonts) to save money
Dimensions: Fontsizes appear not the same as they do in printed products. I would recommend to not get smaller than 13px for running texts. Better: 14px and above. It depends on the font you use, just try it out how it looks on the actual website.
Font Trends 2015: Modern Serifs ( e.g. free Google Font: Playfair Display), Lightweight Fonts ( e.g. free Google Font: Open Sans > I use it here on this blog), Increased Letterspacing
My tipp for fonts: Its all about the look and feel ;) Just try it.
FILE TYPES​
jpg: for photographs you should use jpg's, it keeps the file size small (should not be used for logos!)
svg: for logos and icons use svg's (it's vector and scaleable), do not prepare a file as eps! FYI: If you save logos/icons in Illustrator make sure you adjustet the drwaing area to the borders of your icon/logo with no free space around
png: are really great, they have full color spectrum, a loosles compression and can be itransparent. But they have a bigger file size than jpg and are not supportet by all browsers. Use for logos and icons if you cant use svg's (use png 24, the png 8 is a reduced version)
gif: u can use ist for images with simple illustrations or blocks of colors (as gif only show 256 colors) and it als can be transparent
I hope you liked this post, but be reminded: it's not a completed listing of everything you have to be aware of in web, it's just the point i ran into a lot. Feel free to leave a comment If i missed out something or if you got a question! Carina