Webdesign en image icon tools

De beste webdesign image en icon tools

Als webdesigner loop je altijd tegen nieuwe uitdagingen aan. De technieken en eisen ontwikkelen zich razendsnel en je moet bij zien te blijven. Gelukkig zijn er online veel oplossingen waar je gebruik van kunt maken. Deze kleine set webdesign tools komen voor webdesigners goed van pas.

Webdesign icon tools

Icon tools - Icons

Iedere webdesigner gebruikt het: icons in je designs. Ze zijn erg nuttig, zorgen voor usability en kleden je interface op een bruikbare manier aan. Het probleem? Je moet je design later omzetten naar goede HTML en CSS. Daarnaast moet je constant goede icon sets hebben voor je ontwerpen. Gelukkig is dit in de loop van 2013 (met de opkomts van CSS3 en webfonts) enorm verbeterd.

De oplossing is icon fonts, wat ons betreft een belangrijke als het gaat om webdesign icon tools. Dit zijn (web)fonts die je in je design kunt gebruiken. Omdat het een lettertype is, kun je erg snel icons in je design verwerken. Daarnaast is het eenvoudig om het op een goede manier te vertalen naar een HTML/CSS element (het is tenslotte een font). En met ondersteuning van shadows, gradients, borders, etc. kun je met CSS3 iedere icon zijn eigen look en feel geven. Hiermee zijn al je icons ook direct Retina geoptimaliseerd. En dat is dan weer ideaal voor responsive webdesign projecten.

Hieronder een korte lijst van websites die icon fonts aanbieden:

Font set # Icons Type files Retina
FontAwesome 350+ Font, PNG, SVG
Entypo 250+ Font, PNG, SVG
Flat Icon 1000+ Font, PNG, SVG
Fontello 1000+ Font, PNG, SVG
The Noun Project 10.000+ Font, PNG, SVG

Image tools

Beelden hebben altijd een groot effect op hoe een website eruit ziet. Een slechte foto of visual zorgt vaak voor het ontkrachten van je website design. Daarom is het essentieel de juiste beelden te gebruiken in de presentatie van het design, en als het mogelijk is natuurlijk ook wanneer de website live gaat. Hieronder enkele webdesign image tools die te maken hebben met beeldmateriaal.

Webdesign tools - UnsplashUnsplash

Gratis stock fotografie. Perfect te gebruiken in je webdesign projecten.
http://unsplash.com/

Webdesign tools - Place ItPlace it

Tientallen placeholders om je website screenshots te uploaden. Perfect om een portfolio item mee op te bouwen of om je presentatie richting de klant net iets leuker te maken.
https://placeit.net/

Webdesign tools - Subtle PatternsSubtlePatterns

Subtiele Photoshop patterns om in je design projecten te gebruiken. De patterns zijn gratis te downloaden en je kunt het ook downloaden als Photoshop Extensie.
http://subtlepatterns.com

Webdesign tools - ScreenflyScreenfly

Heb je een responsive website ontwikkeld en wil je testen of het op alle resoluties goed werkt? Dat kan met Screenfly, een handige onder de webdesign tools. Ook nuttig wanneer je jouw product aan je klant moet presenteren!
http://quirktools.com/screenfly/

Webdesign tools - GuideGuideGuideGuide

Met de Photoshop Extentie GuideGuide kun je snel en eenvoudig Guides maken en beheren in Photoshop.
http://guideguide.me/

Webdesign tools - PremiumPixelsPremiumPixels

Op zoek naar specifieke UI elementen, icons, patterns of andere visuals? Grote kans dat je iets “Premiums” vindt op deze website!
http://www.premiumpixels.com/

Gratis stock foto websites

Ook al heb je de beste webdesign tools voor beeldmateriaal, je hebt toch een foto nodig om mee te werken. Naast Unsplash.com zijn er nog andere websites met gratis stock foto’s, die je meestal direct van de site kunt downloaden: