Tools, Tips & Tricks
Een kijkje in onze keuken
Omdat wij weten dat goed design niet duur hoeft te zijn en omdat we vinden dat iedereen gebaat is bij een mooi en bruikbaar web bieden wij hier een kijkje in onze keuken. Onderstaand vind je een greep uit de tools die wij dagelijks gebruiken om uitingen te maken voor onze klanten. Ook staat er bij vermeld waar je ze voor kunt gebruiken en het kennislevel dat je ongeveer nodig hebt om de tool te gebruiken. (Zie hiernaast voor een uitleg van de levels.)
Succes ermee en als je vragen hebt schroom dan niet en stuur ons ff een berichtje!
Canva
Voor professionele banners en drukwerk
Level: Beginner
Met een gratis account op Canva kun je gemakkelijk binnen een vooropgezette layout ontwerpen maken voor drukwerk, social media en allerlei uitingen voor je bedrijf. Met een Canva For Work account kun je je eigen huisstijl en logo’s uploaden in je library voor nog meer gebruiksgemak. Supertip voor non-designers: Wijk niet te veel af van de bestaande layouts. De designs die er als voorbeeld staan zijn misschien generiek, maar wel professioneel. Heb je dus geen budget om een designer in te huren, gebruik dan een van deze designs, pas de kleuren aan naar je eigen huisstijl en zet je eigen tekst erop!
Divi
Voor snelle en professionele websites
Level: Gevorderd tot Pro
Divi is een thema dat je kunt installeren op je WordPress website. Met het Divi thema kun je in principe elke layout maken die je maar wilt. Het thema is eigenlijk een soort site-builder waarmee je met een soort modules je hele website ‘in elkaar klikt’. We gebruiken Divi al meer dan 5 jaar en zijn nog nooit teleurgesteld in de mogelijkheden. En dat zegt best veel, want we bouwen nogal diverse websites. Natuurlijk helpt het wel dat we zelf ook kunnen programmeren, dus wat er niet is bouwen we zelf, maar ook zonder deze kennis kun je met Divi een zeer nette en professionele website neerzetten. Als klant van Roadbear Studios zit een Divi abonnement inbegrepen bij je hosting, maar mocht je zelf aan de gang willen dan kan dat natuurlijk ook. Wil je Divi zelf kopen? Via onderstaande link kun je zelf Divi aanschaffen en help je ons ook nog een beetje mee :).
WPML
Voor meertalige websites
Level: Gevorderd tot Pro
WPML is dé plugin wanneer je je website in meerdere talen wilt aanbieden. Je kunt kiezen of je alle content wil vertalen of bijvoorbeeld voor verschillende talen verschillende pagina’s wilt serveren. Ook kun je er bijvoorbeeld voor kiezen om nieuwsberichten of andere vluchtige items (zoals agenda-items) niet te vertalen. WPML is de enige meertalige plug-in die ook over een goede automatische vertaling beschikt. Ook kun je externe vertalers opdrachten sturen om jouw originele teksten te vertalen. Zo blijft je website altijd up-to-date, in welke taal dan ook.
WordPress
Voor snelle en professionele websites
Level: Gevorderd tot Pro
WordPress is begonnen als blog-platform maar heeft zich inmiddels ontwikkeld tot full-blown CMS (Content Management Systeem). 20% van het internet draait inmiddels op WordPress en dat is niet zo gek gezien het gebruiksgemak en de standaard functionaliteiten van een WordPress website. Ook is er dankzij de wereldwijde grote community een enorme keuze aan gratis thema’s, plugins en tutorials waarmee je ook als niet-webdesigner uit de voeten kunt. Ook voor developers biedt WordPress uitgebreide mogelijkheden om je eigen plugin of toevoeging aan je website te coden. Met WordPress ben je ook niet afhankelijk van één partij, als je huidige webbouwer niet bevalt verhuis je zo naar een ander. (Dit kan niet als je website is gemaakt in een eigen, zelfbouw, CMS). Ook zonder webbouwer kun je aan de slag met WordPress, de meeste hostingpartijen bieden tegenwoordig speciale voorgeïnstalleerde WordPress pakketten. Voor een paar euro per maand heb je dan je eigen installatie!
WooCommerce
Voor kleine, snel op te zetten webshops
Level: Gevorderd tot Pro
WooCommerce is een uitbreiding (plugin) voor WordPress waarmee je gemakkelijk een (kleine tot middelgrote) webshop op kunt zetten. Helemaal als je je bestaande (WordPress) website wilt uitbreiden met naast je diensten ook een webshop is het een prima start. WooCommerce biedt alles wat je verwacht van een goed e-commerce platform en heeft veel mogelijkheden tot integratie met systemen zoals Molly (tussenpersoon voor betalingen met iDeal), maar ook de grote banken bieden een eigen plugin voor WooCommerce. Je kunt met WooCommerce zowel producten als digitale producten verkopen (zoals cursussen of e-books) en het biedt alle mogelijkheden om je voorraad, je betalingen en retouren te beheren. Ook kun je aanbiedingen doen d.m.v kortingscodes en biedt het de mogelijkheid voor meerdere BTW instellingen zodat je internationaal zaken kunt doen.
Usability Checklist
Voor een gebruiksvriendelijke website
Level: Beginner tot Pro
Met deze standaard usability checklist maak je je website geschikt voor je bezoekers en gebruikers. Zie de checklist vooral als een richtlijn en geen harde wetenschap. Met deze tips ben je in elk geval hard op weg om je website gebruiksvriendelijk te maken!
MailChimp
Voor het versturen van nette mailings
Level: Gevorderd
Met een gratis MailChimp account kun je naar 2000 adressen per maand een nette opgemaakte mailing sturen. Je kunt kiezen uit honderden professioneel opgemaakte templates. Pas de kleuren aan naar je eigen huisstijl, voeg een logo toe en je eigen teksten. Zin in een uitdaging? Als pro kun je MailChimp ook koppelen aan je eigen website, zo kunnen mensen zich gratis voor je nieuwsbrief inschrijven. E-mail marketing is de meest directe manier van communiceren met je klanten, maar je moet er wel voor zorgen dat je dit regelmatig doet. (minstens 1x per maand) anders heb je kans dat mensen niet meer weten waarom ze ook al weer die mails krijgen. (en dan kappen ze er mee!)
Sketch
Voor professioneel web- & app-design
Level: Pro
SketchApp is gelanceerd als grote vervanger voor Adobe FireWorks en als tegenhanger voor o.a Photoshop. Met de lage investering ($99,- per jaar voor 1 seat) heb je een professionele applicatie die alles kan op het gebied van web- en app-design. Van het maken van prototypes tot het in elkaar zetten van complete iconsets. Sketch kan alles wat je nodig hebt op het web, en ook nog standaard in vector formaat! Het heeft een hoge leercurve voor beginners op designgebied, maar Photoshop en Fireworksfans zullen er vrij snel in thuis zijn. Wij gebruiken Sketch vooral bij het ontwerpen en plannen van complexe apps, het maken van prototypes (i.c.m InVisionApp) en voor het ontwerpen van custom websites.
Atom
Voor code-kloppers
Level: Pro
Voor oldskool programmeerwerk is de lichtgewicht app Atom erg geschikt. Gratis, snel en makkelijk in gebruik. Ook goed te gebruiken met Git en een prima FTP functionaliteit. Het vervangt voor snelle aanpassingen en kleine klussen bij ons de trage apps zoals Netbeans en Eclipse. Je kunt er snel mee overweg en het is lekker in het gebruik voor die-hard developers.
PHP Storm
Voor die-hard code-kloppers
Level: Pro-Pro
Voor het zwaardere werk zijn we inmiddels overgestapt op PHP Storm, niet meer gratis (maar ze hebben we een goede regeling voor starters). Deze App werkt goed samen met GIT en vanuit de applicatie kunnen met FTP onze projecten ontwikkelen op onze live, development en acceptatie-omgevingen. Het sluit qua werkwijze meer aan bij apps zoals Netbeans en Eclipse, maar is lang niet zo traag. Ook biedt PHP storm uitstekende ondersteuning voor frameworks zoals Symfony en CMSsen zoals WordPress. Een compiler voor Sass zit er ook nog eens bij, dus het werken met de nieuwste technieken is met PHP Storm een eitje.
Adobe CC
Voor professionele designs
Level: Pro
We maken in ons dagelijks werk gebruik van het gehele Adobe CC Pakket. Voor het ontwikkelen van custom drukwerk (CD verpakkingen, folders, banners, stickers etc.) en het ontwerpen van logo’s en huisstijlen bieden de apps van Adobe alle functionaliteiten die je als ontwerper nodig hebt. De grove verdeling voor ons werk is: InDesign voor drukwerk, Illustrator voor Logo’s en Photoshop voor het bewerken van foto en foldermateriaal. Daarnaast gebruiken we Premiere en After Effects voor film-nabewerking. Adobe biedt ook voor de tablet een aantal goede apps waarmee je heel gemakkelijk PS Brushes kunt maken of schetsen kunt maken rechstreeks op je iPad. Wij gebruiken hiervoor de Adobe Ink&Slide en de iPad Air 2. In de Creative Cloud kun je vervolgens complete bibliotheken aanleggen waarmee je gemakkelijk je assets van een project kunt delen met teamgenoten of klanten. Zo is je ontwikkelde logo en huisstijl toegankelijk voor de belanghebbenden.
Penpot
Voor ontwerpen en prototypes
Level: Alle
Onze nieuwste tool in de toolbox is penpot! Een gratis! designtool die qua functionaliteiten niet onderdoet voor ‘de groten’ zoals Sketch, Figma en Adobe. We zijn fan, want penpot draait lokaal en is open-source! Goed design voor iedereen!
Persona's
Voor inzicht in de verschillende typen bezoekers op je website
Level: Alle
Door gebruik te maken van persona’s bij het inrichten en ontwerpen van je website kun je er voor zorgen dat je alle typen mensen iets te bieden hebt. Grote sfeerbeelden en duidelijke knoppen voor de spontane bezoeker, lijstjes met specificaties voor de methodische bezoekers, reviews voor de humanistische bezoeker en expert-reviews en keurmerken voor de competitieve bezoeker. Deze psychologie is bedacht door Jung en gebaseerd op de MBTI persoonlijkheids-typen. Test welke persona jij zelf bent en voorkom dat je je website alleen geschikt maakt voor jezelf!
Nieuwe Domeinnaam Extensies
Voor een onderscheidend vermogen in de markt
Level: Alle
De meeste ondernemers weten nog niet dat er veel toffere domeinnaam extensies beschikbaar zijn. Je kunt dus als je je bedrijf opstart kiezen uit veel meer dan alleen maar de .nl of de .com. In elke branche zijn er tegenwoordig tientallen extensies bijgekomen (in totaal meer dan 600!) en je kunt dus ook kiezen uit .expert .shop .rocks .email of .bike! Doe er je voordeel mee en wees je concurrentie voor met een hele toffe domeinnaam!
Supertip: Ook als je al een bedrijfsnaam hebt, maar je een hele lange domeinnaam hebt moeten kiezen (omdat alles al bezet was) kun je gewoon een nieuwe naam registreren en deze laten doorverwijzen naar je bestaande website. Je kunt dan op je bedrijfsbus en je folder de kortere, mooiere en beter te onthouden domeinnaam laten zetten! (Bijvoorbeeld www.bertvandijk-catering.nl wordt bertvandijk.catering)
InVision
Voor snelle prototypes en feedback
Level: Gevorderd – Pro
Invision is een tool waarmee je heel snel platte afbeeldingen omzet naar een prototype dat bekeken kan worden door je eindklant. Ook kun je het gebruiken om snel en transparant feedback te verzamelen van een grote groep mensen (als je bijvoorbeeld met veel verschillende mensen moet samenwerken binnen een stichting). Wij zetten het in bij gebruikersvraagstukken voor (web)applicaties, voor mobiele designs (die zijn gewoon beter te zien) en voor user-flows binnen een website of app. Voor de professional is het prettig dat je vanuit Photoshop en SketchApp rechstreeks designs en updates kunt exporteren. InVision heeft ook versiebeheer, dus als het vorige ontwerp toch beter was kun je makkelijk even terugkijken!
Git
Voor betrouwbaar versiebeheer
Level: Pro
Git is een versie beheer systeem waarmee je je webprojecten en code in versies kunt bewaren. Het voordeel van Git is dat je niet alleen een gedeelde versie van de website-code hebt waar je aan werkt, maar ook een lokale eigen versie. Je kunt je code dus netjes opknippen in kleine stukjes om overzichtelijk te committen en daarna kun je elk afgewerkt en getest onderdeel ‘pushen’ naar de gedeelde server. Wij gebruiken Git om makkelijk gelijktijdig te kunnen samenwerken aan projecten en ook als extra check voordat onze code online gaat. Zo voorkom je dat er fouten online staan of dat je website opeens niet meer werkt omdat je graag iets wilde testen.
Geen zin om het zelf te doen?
