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
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.
Unsplash
Gratis stock fotografie. Perfect te gebruiken in je webdesign projecten.
http://unsplash.com/
Place 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/
SubtlePatterns
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
Screenfly
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/
GuideGuide
Met de Photoshop Extentie GuideGuide kun je snel en eenvoudig Guides maken en beheren in Photoshop.
http://guideguide.me/
PremiumPixels
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:
- Picjumbo
- Gratisography
- Splitshire
- Public Domain Images
- Free Images
- Rgbstock
- Stockfreeimages
- Morguefile
Het bericht De beste webdesign image en icon tools verscheen eerst op Internetbureau Elephant.