Headquarters
Kika Marketing & Communications Inc.
info@kika.ca
306-1067 Granville Street
Vancouver , British Columbia , V6Z 1L4 Canada
604.628.8726

Blog

View our recent blog posts here.

Nico has not set their biography yet

Content Management With ACF (Advanced Custom Fields)

Wordpress has been around for many years now and it started mainly as a blogging platform. Today, Wordpress is one of the most powerful CMS in the planet and it controls 50-60% of the entire internet in terms of CMS shares. The platform offers a lot of options when it comes to building your site from scratch or via premium themes - the possibilities are endless. One of the main features of Wordpress that made it so successful is via it’s plugin system. Almost every feature you want for a site is available via Wordpress plugins be it for security, social marketing, server backups, or interactive components. One of those plugins that is considered a must-have for any Wordpress installation is ACF or Advanced Custom Fields. It’s so powerful you can basically create your own page builder just via ACF alone.   What is ACF (Advanced Custom Fields)     ACF is one of the most powerful plugins available for Wordpress today.     To put it simply, Advanced Custom Fields is a plugin that allows Wordpress to save any kind of data that you can use anywhere in your site. It can be anything from image urls, dynamic variables (that you can use in your code), or even code fragments! The plugin is mostly designed for developers to make content management easier for their clients - which is a very important thing for us.   How Does It Work? We can setup fields groups inside Wordpress admin that will handle all the dynamic data. Think of it as grouping the data into categories based on where you want to display it in your site. In the screenshot below, we basically setup each field groups based on the site’s pages.       You can categorize all of your site’s data into field groups.   Upon setting up the field groups, you now have the ability to assemble the actual fields that will store all of your dynamic data. In the example below (for the page named “Agency”), we basically setup the fields that will hold all of its contents. This allows clients to reorder and change anything on the page without touching any front end or back end code!       Each custom fields can be re-ordered depending on how you want them to appear in your page.   Field Types In theory, we can basically use Wordpress’ default custom fields to change any content on a page. The only downside is Wordpress only supports “plain text” when it comes to its field type which is not very intuitive in terms of content management.     Some of ACF’s field types.   ACF on the other hand gives developers and clients more flexibility by offering many different field types that actually makes sense. For example, we can use an image field type for a page section that displays an image gallery or use the WYSIWYG field type for a page section that only displays articles.   In case you’re looking for a field type that ACF doesn’t support (yet), you can try checking some  custom built field types by other developers or even create your own using its extensive API.   The API The real power of ACF comes from its easy to use programming interface. Setting up the custom fields inside Wordpress will only setup the containers for your data, but when it comes to actually displaying it in your site, you have to use its API.   Retrieving the field data is as simple as calling out the field name in your code: get_field(‘field_name’) or the_field(‘field_name’) and It’s up to you how you want to use this data in your site’s front end.   Final Thoughts We usually develop our own methods when making content management easier for our clients, but with this new tool, we can make their overall experience even better. Not only it gives us developers more options to structure data on the back end, it also gives our clients more control on how their content is being displayed on the front end. You can learn more about this amazing plugin at https://www.advancedcustomfields.com/.  

Share this article:

">
Continue reading
242 Hits

Rise of the Screen Design Tools

The design industry is currently experiencing a major shift when it comes to designing user interfaces for clients. For years, everyone has been using Photoshop and Illustrator when creating designs. It’s a standard workflow that we’re still using up to this day. But with the constant changes in mobile computing and the different design specifications required for the growing list of devices, the industry needs a more “specialized” tool for the job.   There are 3 major software companies that are currently offering their own application designed for creating UI/UX - and we’ve used all of them. All 3 are blazingly fast due to a more focused toolset and less feature bloat present on current design tools. They also have their own unique feature set that separates them from the rest of the applications on this list. Sketch   Sketch has been around for quite some time now and It’s one of the first and most popular design tools available. It’s a vector program that lets you design for almost every major device available. It’s latest update now also allows you to create interactive prototypes right inside the app without any plugins.     One of the powerful features of sketch not currently available on any app is its plugin system. It allows users to extend its functionality through the use of open source 3rd party plugins. This allows sketch to have new features not available on the default installation.   The only drawback of the app is it’s only available exclusively for the mac and there are no plans to release it on the windows platform. Adobe XD   Adobe also released their own screen design focused app that will replace Photoshop and Illustrator when designing user interface and experiences. Dubbed as “Project Comet” when it was first announced, It is now getting widespread attention due to some amazing features that will change how designers and developers work together.     One of this features is you can directly publish your work from XD to Adobe’s Creative Cloud servers. Once published, you can then generate a public link that you can share with your teammates or clients with built in feedback system. Another unique feature of XD is its ability to generate style guides that developers can use once the design is converted into code. We actually published an article about XD’s top 5 features here.   XD’s main advantage over its competitors is it’s availability on both Mac and Windows platform. And since it’s developed by Adobe, you can directly import your old Photoshop and Illustrator designs directly inside XD and continue where you left off. Neat! InVision Studio   InVision started off as a project management platform for designers. Their platform is currently being used by big names in the industry like Netflix, Twitter, and Airbnb just to name a few. They are now creating their own screen design app called InVision Studio. The app is not released yet and is only available via VIP invites. Fortunately, we got exclusive access and we’ve been testing it for some time now on some of our design projects - and It’s amazing.     Most of its basic features are similar to Sketch and Adobe XD. It’s quite surprising because the workflow is very similar with those two apps. We think Invision gathered all of the best features from Sketch and XD (which is a good thing), improved upon it (by adding additional features), and then added it to Invision Studio. Each of Studio’s features is like twice as good compared to Sketch and XD.   One of the app’s main highlight is its integration to Invision’s platform. It unlocks a whole bunch of new features that can help you manage your design projects with ease. You can still use the app normally without any Invision account though, so that’s a good thing. Our Pick All 3 apps listed here are great and they all offer the same basic functionality when it comes to designing interfaces both for desktop and mobile. They also have their own unique features that separates them from other design tools available in the market today. After testing every single one of them, we ultimately settled down to one app that we will be using as our daily driver in every design project - and that will be Adobe XD.     The main reason for this is well, It’s Adobe. We cover a lot of “disciplines” when it comes to design and we’ve been using Adobe’s ecosystem in all of our projects. Compatibility is very important to us and knowing that projects we did in Photoshop or Illustrator will still work on XD is a big plus. We also discovered that XD can open Sketch files too which is amazing.   Another reason is it’s cross platform. We can continue our work whether we are on Mac or Windows. Since our team is a mixture of both Mac and Windows users, we don’t have to worry about design collaborations anymore. We are confident that every version of the file will work on any platform as long as XD is installed.   As stated earlier in this article, all 3 apps were amazing in its own right. We’ve studied every single features of these apps and tried to use it in different real world scenarios. In the end, flexibility and compatibility are still the main features we always try to look out for (specially when trying to migrate to a new app) and Adobe XD both have it.

Share this article:

">
Continue reading
553 Hits

Adobe XD: The Next Generation of Screen Design

Adobe has been one of the main driving force in the industry of design. Their tools has been widely used on almost everything digital whether it’s  print, web, or film. They have a solid set of tools that professionals use everyday and they have been updating these tools for many years offering new ways to craft their creative visions.     This is the reason why it’s sometimes rare for Adobe to release a new tool since most of their softwares can handle almost everything. You need to design a website? There’s Photoshop, which can also handle image manipulation and graphics design. A logo for a client? There’s Illustrator, which can also be used for designing web, packaging, and print materials. You need a book? There’s Indesign for that. How about some cool visual fx and motion graphics? Adobe After Effects and Premiere got you covered. So What’s Adobe XD? Adobe XD (or Adobe Experience Design) is a new software from Adobe that only does one thing - and that’s UI/UX design. It’s being categorized as a “Screen Design Tool” by many which is a whole new category in the world of design. The software’s single focus makes it very fast and offers tools not found on mainstream design softwares like Photoshop and Illustrator.   Now you might ask, “what the heck is screen design?”. Designing these days is a lot different compared before where we only design for desktop computers (960 grids anyone?). Today, there are a lot of devices (or screens) to consider before creating your next big web or app project. You’re literally designing both the user interface and user experience for a bunch of different screens. Adobe XD’s 5 Amazing Features For many years, most of our design work revolves around sketching our ideas on paper, converting those sketches into scalable vector objects using Illustrator, and doing the necessary magic to present it to our clients using Photoshop. Our 2d design work always revolves around these 2 softwares. Adobe XD will change all of that not only in the design aspect of things, but also in getting design feedbacks from clients and shipping the final design for development. 1. It’s Vector Based   Adobe XD is a pure vector based application. It means your designs are 100% flexible and scalable depending on your needs. It offers a nifty export feature that lets users export UI assets with ease. You can also set the scale of the exported asset for high density displays (ie: retina). 2. Photoshop Support   Now this is a big one. When we started using XD on it’s early beta stages, you have to basically redo your current design projects inside XD to use all of its great features. On XD’s March 2018 update, they basically surprised everyone and added this mind blowing feature that lets users import their current PSD design inside XD! Why mind blowing? Because upon testing this feature, XD preserved all layers, groups, and artboards like how it was originally done in Photoshop! No need to redo your work and you can directly head straight to using XD’s amazing features! 3. Symbols   One of XD’s powerful feature is called “symbols”. Imagine you have a design with a bunch of repeated UI objects and let’s say the client requested to change those objects to a different color. If you designed it in Photoshop, you’re out of luck since you will have to apply these changes on each and every object in your design.   In XD, symbols are like “blueprints” that you can reuse in your designs. If the client requested to change its shape or color, you can just change the “blueprint” or “symbol” and XD will automatically update all of its instances in your design. Neat! 4. Style Guides & Developer Handoff   Another mind blowing feature of XD is the automatic generation of “style guides”. In other design softwares, this feature is only possible either by using a paid plugin or by using a separate application. In Adobe XD, this feature is baked right into XD by default. What this does is it generates an interactive style guide that can be used by developers to ensure consistency of the finalized design once it’s converted into code. The generated style guide will display all the colors, fonts, even the margin and padding values! 5. Prototyping   Last and definitely not the least is “prototyping”. Like the “developer handoff” feature, in other applications, this can only be done via a paid plugin or a separate paid application. Once again, Adobe XD has this feature by default. It allows designers to create a “working prototype” of their designs that can be used in testing the “flow” of their design or application. This is also a useful tool when presenting the designs to clients as it simulates how it’s going to behave in real world situations. Another neat feature is people can directly leave and “pin” a feedback about the design directly inside the prototype so no more messy email threads! Final Thoughts We only just scratched the surface of Adobe XD feature wise and a single article isn’t enough to tell you how great it is. We are really excited what’s next specially since Adobe is constantly churning out updates every month to make XD even more amazing. Stay tuned as we will definitely share our thoughts about it here at our blog.

Share this article:

">
Continue reading
766 Hits

The 5 Reasons Why You Should Be Using URL Shorteners

URL shorteners has been around for quite some time now. They are used to make long URLs more manageable by “masking” it and replacing it with a very short version. They are not widely used back then but with the advent of “character limited” social media services (ie: Twitter), URL shortening services started popping out left and right which evolved it further as a service.   Today, one of the most popular services is bitly and it offers a lot of features when it comes to managing all of your links. Actually, it’s not about shortening links anymore, in fact, it’s now mandatory to have this service specially if you care about your click data and seo performance.   Listed below are 5 reasons why you should start using url shorteners.   1. Link Management By using URL shortener services, you get total control of all your shared and non-shared links via an intuitive management dashboard. All url shortening services have this as a basic feature so you don’t have to worry if you’re using a different service on your links.     Bitly’s link management dashboard.   The management dashboard gives you a bird’s eye view of the many different metrics attached to your links performance.   2. Metrics In the early days of URL shortening services, it only does one thing and one thing only - and that’s to shorten long URLs. Today, services like this offers a LOT more and one of those features is so powerful, it’s one of the reasons why these type of services is mandatory to have if you have an active online presence.     URL Shorteners allows you to track the performance of your links.   It’s called link tracking. What it does is it basically attaches a lot of different data in your links that will help you track its performance. Listed below are some of the useful data that will be recorded and compiled every time your link is clicked.   Total Clicks - Shows you how many times your link was clicked. Referrers - Shows you the sites where your link was clicked or shared. Location - Shows you the country of origin where your link was clicked.   3. Personalization URL shorteners are good and all but it’s kind of a bummer since by default, it removes your branding on the generated shortlink and replaces it with the service’s brand. The good news is, if you know how to tinker with your domain settings, you can actually purchase your own custom domain name and use it as the default url for all of your generated shortlinks.     KIKA uses its own branded domain name in all of its generated shortlinks.   Don’t know how to setup your custom domain for your shortlinks?  Then you’re in for a treat. We actually posted a guide on how to do this yourself at kika.mk/BrandedBitlinks. See how the link I posted is branded? Pretty cool right?   4. SEO URL shorteners back then are being frowned upon by some people since it affects your overall SEO. It removes everything about your link that makes it hard for google to crawl it and record the necessary data about it - well, not anymore.     URL shorteners actually helps your SEO..   URL shorteners actually helps your SEO by increasing clickthrough rate and by promoting sharing of your links. Some URL shorteners also allows you to set SEO keywords in your generated shortlinks which Google will thank you for.   Still not convinced? Then watch this short 1 minute video from the intelligent folks at Google regarding the state of URL shorteners https://youtu.be/QMkltd6dZzU.   5. Everyone Is Using It URL shorteners are being used on almost every websites today. It’s so mainstream that sometimes it’s second nature for people to click through once they see it on a webpage.     It’s also so popular, Google created their own service called goo.gl.   Final Thoughts I hope this article helped in explaining the benefits of URL shorteners when it comes to your online presence. It not only makes your links more manageable, it also helps you track its performance for SEO purposes. With so many url shortening services available, it’s up to you to decide which ones to use. They work pretty much the same way so you’ll be right at home once you start using the technology.

Share this article:

">
Continue reading
713 Hits

Content Marketing: Creating your branded bit.ly

Everyone hates long URLS specially the ones with a lot of cryptic url parameters. It’s long, non-descriptive, and difficult to remember. You’ll also have a hard time posting these long urls on social sites with “character-limits” as it will surely eat all of your character bandwidth before you can even post your actual content.     This is where services called URL Shorteners comes into play and it was developed with one sole purpose - to shorten your long URLS. Now, you might be asking “Isn’t it using services like this will have a negative impact on my SEO?”. If we’re talking about 5 years ago, yes, but today, URL shorteners have evolved and it’s actually quite mandatory to have it if you care a lot about your online exposure and SEO. How? It’s by customizing your shortened urls using your own brand.     Bit.ly is a free url shortener service.   In this guide, we’re going to use one of the most popular URL shorteners service called bit.ly. If you haven’t already, open your favorite browser and visit https://bitly.com/. Feel free to read about its features. This guide assumes you already have a bit.ly account, so before continuing, make sure to sign up and login. After logging in, you will be redirected to your bit.ly dashboard.     This is your  bit.ly dashboard. Notice how our links are customized based on our brand (it does not use the bit.ly url).   Your bit.ly dashboard shows all of your created bit.ly links. In case you’re already using bit.ly, you’ll notice that your links are formatted like this http://bit.ly/1iidA9N. This is the default formatting and url naming of bit.ly and most of the time, it’s enough for the majority of users. But this is not what we want! We want our links to stand-out among the rest!     On the top right of your dashboard, click the MENU icon. This will show you your account menu list. What you want to click here is the SETTINGS button which is under the options menu.     Upon clicking the settings button, another window will popup with 3 options. What we want here is the ADVANCED SETTINGS button.     The advanced settings menu is where we can find the option to customize our bit.ly links called Brand Short Domain. Upon clicking this link, it will show us the necessary steps to customize our default bit.ly generated links.     The steps involved sounds scary at first, but it’s actually pretty simple. It basically involves buying a domain name and setting up the necessary DNS records on your domain name so that it points to bit.ly servers.     You can use domain registrars like namecheap in purchasing your own domain.   There are a lot of domain registrars available and it’s up to you which ones to use. For the purpose of this guide, I’ll be showing you how to set up your your domain’s DNS servers to point to bit.ly servers (assuming that your domain was purchased from Namecheap). If you haven’t purchased a custom domain yet, go ahead and purchase one first.     Namecheap dashboard showing all of your purchased domain names.   Upon signing up and purchasing your custom domain from namecheap, you are now able to view all of your purchased domain names on your dashboard. Click on the manage button to setup your custom domain. This is where we will assign the necessary DNS servers so that bit.ly can start using it.     On the manage page, find the NAMESERVERS settings uption and change it from Namecheap BasicDNS to Custom DNS.     Input the DNS servers listed on your bit.ly branded domains settings page. It will then propagate to bit.ly servers and sometimes it takes 24-48 hours to be fully setup. To verify if your custom domain is now usable, head over to your bit.ly dashboard and under SETTINGS > ADVANCED SETTINGS > BRANDED DOMAINS, enter your own custom domain on the field provided and click VERIFY DOMAIN.   Once verified, you will see something similar above. Congratulations! You can now start using your branded bit.ly links!   -   “What if my domains were purchased using a different domain registrar?” The process is going to be pretty much identical. You just need to know where to find your domain’s settings page on your preferred domain registrar. Every domain registrar has a settings page where you can update/change DNS records.   “Will it really take up to 24-48 hours before I can use my own custom branded domain?” Most of the time, no. My personal branded bit.ly link only took roughly 20 mins to propagate. Just regularly click the verify domain button on your bit.ly dashboard to check if your custom domain is already verified.

Share this article:

">
Continue reading
848 Hits

The 10 Web Design Trends of 2018

Over the past 5 years, a lot of things have changed in the world of web design. It updates so fast that sometimes it’s a bit tricky to keep up with the changes. With the growing number of new web technologies available, features that are near impossible to create years ago can now be easily added to any website.     Here at KIKA, we strive to keep up and adapt with these changes. Our team of designers and developers are always on the lookout for the latest web technologies to further help our clients in marketing their brands. With so many design trends popping out left and right, we asked them the 10 biggest web design trends of 2018. 1. More Animation Movement and animation is a powerful engagement tool. More and more companies uses animation to attract customers and make their overall marketing much more interesting.   https://teatrlalka.pl/en 2. Color Vibrancy “Web Safe” colors are now a thing of the past. With advancements in display technology on both mobile and desktop, big companies are now using the term “Super Saturation” in their designs to attract people’s attention.   http://circulardev.com/nike/cortez/ 3. Semi Flat “Gradients” were big many years ago but it was overtaken by the concept of “Flat Design” (thank you Apple!). This year, “Gradients” are slowly creeping back its way to the forefront of the design industry and a lot of big companies are now starting to utilize it in their designs.   http://www.symodd.com/ 4. Asymmetry Grid layouts were the main driving force of every website for the past 5 years. Today, design agencies are using "non-conventional" layouts to bring new direction to their designs.   https://flayks.com/ 5. Big Typography Content is always "king" and this is true for typography in 2018. Expect more impactful type in web design this year.   http://www.boite-a-oeufs.com/ 6. Mobile First The term was first coined way back in 2009 and this has been one of the most important things to consider when designing for web. Mobile has officially surpassed desktop in mobile browsing and more than 50% of internet users are from mobile.   7. Drop Shadows Drop shadows adds depth to any UI and this effect was even made popular thanks to Google's Material Design guidelines.   https://material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android 8. Illustrations Like animation, more and more website are gearing towards the use of illustrations in conveying ideas. A lot of big companies like Facebook has been using illustrations in their product and ad placements since 2017.   https://www.pikmykid.com/ 9. Page Transitions Complex page transitions were only possible back in Flash, but with the continuous improvements in web and animation technologies, page transitions is now starting to be a norm in every web design.   http://xmas.evs.com/2018/ 10. Flexbox Flexbox is CSS3's new advance layout model for responsive web design. This is now starting to be a standard in web design with Bootstrap 4.0 being the first one to adapt the technology.   https://getbootstrap.com/

Share this article:

">
Continue reading
640 Hits

The New Standard in HTML5 Animation

I've been in the industry for 10 yrs now (started doing interactive stuff as a freelance when I was 19) and I encountered every new technology when it comes to making things move on screen. Flash was the main standard back in the day when it comes to animation and you're considered as one of the "cool kids" in the industry if you know how to control this technology. The Flash technology made me pay a LOT of bills and taught me how to be a designer and an adept programmer at the same time. But as any other technology, change is inevitable and that change was accelerated by Apple's Steve Jobs - making Flash's popularity dwindle over the years.

Share this article:

">
Continue reading
1925 Hits

TOOLBAR

 

BLOG SEARCH

 

CATEGORIES

 

LATEST POSTS

 

CALENDAR

Wait a minute, while we are rendering the calendar
 

SUBSCRIBE

 

YOUTUBE

  • Kika Portfolio: Sidler Binder
  • Babylone Condos Promotional Video | Kika Portfolio
  • Vidéo Promotionnelle de Cellutrak/Kubota Control  | Kika Portfolio
  • Cellutrak/Kubota Control Promotional Video | Kika Portfolio
  • Lumenwerx Promotional Teaser Video | Kika Portfolio
 

TAGS

 

ARCHIVE

 
Copyright © 2014 Kika Marketing & Communications Inc. All Rights Reserved. Protected by Copyscape. Do not copy.