Categories
Apps Content Marketing Design Freebies Graphic Design Photography Sales & Marketing Social Media Studio Activity Video Websites Tips

Online Designer Adobe Spark App for Social Media, Posters etc

Online Designer for Stunning Social Graphics, Short Videos, and Web Pages too!

Adobe has so many great online designer apps. Adobe Spark is THE must have for any one sharing content online. Not only is it great for social media design, it can also be used for most online visuals like ads, promotions, posts, hero images, videos and more. The app is brilliant and it’s FREE!

The app comes with tonnes of free stock photography, cool fonts and graphics to use. There are so many templates to use for almost any occasion and can be customized for your unique purposes. You can use the app on both desktop and mobile. Get it from the Play Store for Android. I like working on my graphics on my phone mostly because I can easily post to Instagram from mobile. But I use desktop often as well because I can work on the graphics on a bigger scale there. Check out some of my other social media planning apps on my blog here.

 

The Adobe Spark app is great for holiday graphics with templates for your holiday card maker and social media posts. I also recommend the app for promoting your brand, business, services and products. You can design one visual then easily readjust the canvas to any dimensions saving many versions at different dimensions. This makes it easy to develop a brand campaign of stunning and sophisticated visual graphics to represent your brand across all your social media platforms and more.

The app is also great for Wedding templates and more.

Spark comes with plenty of design templates for

  • holidays
  • seasonal
  • weddings
  • events
  • & more
Categories
Apps Content Marketing Design Freebies Sales & Marketing Social Media

Planoly Social Media Planning App for Instagram

Planoly

Visually plan, manage, and schedule your Instagram Posts with Planoly

Create draft grids to test out the look of content without having to commit to publishing. Make social media management easy by planning ahead with Planoly!

“Manage, plan and schedule your Instagram posts from your computer and mobile phones. Create a cohesive Instagram feed and manage multiple Instagram accounts.”

Planoly is an official partner of Instagram (and Pinterest too!) that makes it easy to plan your posts and preview them laid out as a grid, just the way they will look once they’ve been posted to Instagram. One of the best features is the ability to auto post your scheduled posts (I use Facebook Creator Studio to auto post too, see my post about it here).

“It’s the First visual planner for Instagram. Clear and to the point web and mobile app – PLANOLY is the most effective visual social media planner on the market (oh, and you can schedule too)!”

Planoly makes developing content easy with access to a free library of stock images. You can also track your success and learn more about your audiency with analytics insights.

And if you’re into e-commerce, Planoly is great because you can add shop links to Instagram and tag your products on posts.

You can also use Planoly for Instagram stories!

 

 

Categories
Design Freebies Websites Tips

Screenfly – Test Website for Mobile & Responsive

Is my website mobile friendly?

There are more mobile web users than ever before. The number of mobile web traffic is gaining the lead over desktop as the new default. This is what is being called mobile first. Google has been making it clear that responsive mobile first websites will be prioritized in Google search ranks. If your website isn’t yet mobile, or is having mobile issues, you will want to spend a bit more time with your website making sure that it is responsive and looks good across different devices and screen resolutions.

Test Your Webpage Responsiveness with Screenfly

It doesn’t matter if a website is being viewed on a Blackberry phone or a 15′ Macbook, It needs to to look good everywhere!  Making a website design flawless across many different screen resolutions used to mean I was testing websites on all my friends phones, tablets and computers. Now there’s an even easier way! I can see how my website would look on dozens of devices and screen resolutions, all from just one website Screefly from Quirktools. Here you can easily choose desktop, tablet or mobile options at the top. Choose one of these and you will see a drop down of a dozen or so devices to test your site on. Select any of these and watch as Screenfly shows you how a website looks on any of these devices and screen resolutions.

http://quirktools.com/screenfly

Interested in more free online tool design resources?

Check out more of my blog posts…

Free Images to Use of Your Website of Blog

Free Online Colour Scheme Tool – Colour Picker by Paletton

 

Categories
Design Freebies Graphic Design

Colour Picker by Paletton – Free Online Colour Scheme

Choosing a Colour Scheme

Colour is an important part of design and branding. It helps give definition to the energy and purpose of the brand, communicating many subtle details. Other than the logo itself, a brand may need to expand the basic colour palette for for the purposes of a website design, social media imagery or the company brochure. For the novice or experienced designer, having a couple great online colour sheme resources can provide a bit of added inspiration.

One of my favourite online colour picker designer tools is Paletton. I like this website for its attractive design and easy to use color scheme picker. Explore extra options for exploring colour presets, randomizing for ideas, preview options and even share your colour scheme with your design team or client.

Paletton – A great free online colour picker tool.

“Paletton.com is a designer color tool designed for creating color combinations that work together well. It uses classical color theory with ancient artistic RYB color wheel to design color palettes of one to four hues, each of five different shades.”

https://paletton.com
Screenshot of Paletton.com - Colour Picker Tool

Interested in more free online tool design resources?

Check out more of my blog posts…

Free Images to Use of Your Website of Blog

Free Vector Icons for your Website or Blog

Categories
Design Freebies Websites Tips

What are Web Safe Fonts?

Fonts are a big part of your branding and website design.

Though understanding the use of web safe fonts ahead of time can really help you along your design process and save you from confusion and disappointments later on. It would seem many people who aren’t familiar with web development think they can use any font they want across their site. But sadly this is not true at this juncture in the web.

The attached article outlines which fonts work and which fonts sometimes work and how to work with all of these. Have a look 🙂

A summary of what you will be about to read though is that fonts on the web want to reference fonts that are already on most peoples computers “out of the box”. Though this can be variable from device to device. See attached link for further info on your “best bet” list of standard fonts across devices.

Otherwise, another solid option (though still limited so do your research!) is google fonts which came around and revolutionized web fonts a few years back adding a host of fonts to the relatively meager list that would fall under the list of fonts already on your computer or smart phone. While this list is rather more extensive, it’s draw back is that it can slow your sites performance down because to use these fonts your website has to reference the google font website and this adds a step in its thinking process.

 

Choosing Web Safe Fonts for Your Website

Choosing Web Safe Fonts for Your Website

Source: www.thoughtco.com/web-safe-fonts-3467430

Save

Save

Save

Categories
Content Marketing Design Freebies Graphic Design Sales & Marketing Social Media Websites Tips

Free Photos To Use On Your Website or Blog

Quality visuals are essential to brand marketing which relies on rich visuals to attract and engage brand audience. Using photos you found online could mean infringing on copyright laws. So how does one find free images that are 100% legal to use?

SEARCH ENGINE IMAGE SEARCH

One way to find free images that are available and legal to reuse for your website is by searching your preferred search engine. I will use google here but most search engines offer a version of this option.

Search by Images in the google search engine. Here you will see a tab “tools”; here there is an option to choose “usage rights”. Selecting  “labeled for reuse with modification” means that these images are labeled as free to use, share or modify even commercially, totally free!

https://www.google.ca/advanced_image_search

PIXABAY Free Images

My next tip is the site pixabay. Pixabay offers free high quality images and videos with a polished commercial look.
https://pixabay.com/

NYPL DIGITAL COLLECTIONS

For something a little different is the New York Public Libraries online digital collections which is mostly comprised of vintage imagery.
https://digitalcollections.nypl.org/
When searching for a term, I recommend ticking off the box “search only public domain materials”

Interested in more free online tool design resources?

Check out more of my blog posts…

Colour Picker by Paletton – Free Online Colour Scheme Tool

Free Vector Icons for your Website or Blog

Categories
Apps Design Freebies Graphic Design Photography Websites Tips

Image Optimization for Web

The important thing to remember is that every webpage has a PAGE LOAD TIME.
This is calculated by how much data needs to be uploaded to the users computer. The data on a page can also be called the WEB PAGE WEIGHT.

Other factors include the internet providers service, such as high speed vs. dial up.
So more web page weight= more web page load time = poor user experience = poor return rates and poor conversion of web traffic to sales. So keeping your web site load times in check and optimal increases your likelihood of having a successful website.

Sites like Pingdom can help you figure out how fast your websites webpages are loading
https://tools.pingdom.com/

The largest culprits of a heavy page weight/ slow page load time is media. Images are the biggest culprit of a slow website. Video and audio can also be suspect. After that, forms, java script and other special bells and whistles can really drag on a pages load time.

My clients primary concern is images and this is what we will concern ourselves with here today.
Estimates are that you should try and keep your websites webpage weight at under 200 kb. These means that all elements on that page should total the web page weight at under 200 kb.

One image can easily be twice that size if you don’t compress it. But if you know how to save your images for website optimization and if you know how to compress them, you will gain the advantage! Your site will be in control of your image content rather than you image content being in control of your site.

FIGURE OUT YOUR IMAGE DIMENSION AND SIZE
Figure out what you’re working with and how much work you need to do to get your images optimized properly. This should be as simple as right clicking your image and clicking “get info”. This will display some of the info data on the image including these two main factors of “size” & “dimensions”

SIZE THE IMAGE HEIGHT AND WIDTH APPROPRIATELY
Images displayed on your computer use pixels. The quality and amount of pixels needed to display a large printed photo to hang on your wall is much bigger than what you want to display on a computer screen. Typically a full screen background image is ideal with the proportions of 1250 X 800 pixels.
Your camera could be taking photos 3-6 times that amount which is great for printing but very superfluous for use on the web.

So start by saving your photo with smaller dimensions in an image editor on your computer (you can even do this in wordpress itself under “edit image”) so now save it to these full screen background proportions of 1250 X 800 if that’s what it’s being used for. Otherwise you can save it smaller than that for a banner or blog post image which don’t need to be fullscreen and will probably display at half that size or smaller.

COMPRESS THE IMAGE
Next is to compress the image in some file format, usually a jpg
This site offers info on working with the different file formats such as .gif, .png and .tiff
http://inobscuro.com/tutorials/optimizing-images-for-web-35/

How to compress your image for web optimization
1.Use an Image Editor

Compress the newly and appropriately sized image (1250 X 800px or less ) by finding the option in your image editor to save for web . This option should display your compression options and data
THis one is free
https://pixlr.com/
here’s some more..

9 Best Free Image Editors

http://mashable.com/2013/07/22/free-image-editors/#WAVaAS9jzmqo
16 essential photo editor apps
http://www.creativebloq.com/software/best-photo-editor-51411752

2. Use a Plug IN (wordpress)
There are many image optimization plug ins out there for wordpress. If you google image optimization plug in, you can find reviews on several of the most current and relevant.
I have recently tried this popular one called SMUSH IT . It is easy to use, once you’ve downloaded it and activated the SMUSH IT plug in, your image files in your website media library will now have a SMUSH IT botton and all you need do is press it.

SMUSH IT
https://en-ca.wordpress.org/plugins/wp-smushit/

3.COMPRESS ONLINE
Websites like Optimizilla may give you the most efficiency for the least tech proficiency. Just load your images to the site and voila! Compressed jpgs

http://optimizilla.com/
With Optimizilla you can control the amount compressed and preview it with the Quality meter on the right. Lower the quality meter and you reduce the file size. This may sound unfortunate to lose “quality” but for the purpose of a website, a fair bit of quality loss can go mostly unnoticed. Optimizilla allows for you to preview the compressed image rates so you can decide for yourself how much compression the image can take while maintaining a good enough quality image to display.
I hope this covered some of what you need to know to achieve a fast loading website and confidence using images on your website and blogs. Images are a great tool for the web and I encourage you to use them. But you’ll be doing your website a favor if you know how to use them wisely.

Wikipedia explains data compression:

“In signal processing, data compression, source coding, or bit-rate reduction involves encoding information using fewer bits than the original representation. Compression can be either lossy or lossless. … The process of reducing the size of a data file is referred to as data compression.”

Compression is useful because it reduces resources required to store and transmit data. Computational resources are consumed in the compression process and, usually, in the reversal of the process (decompression). Data compression is subject to a space–time complexity trade-off. For instance, a compression scheme for video may require expensive hardware for the video to be decompressed fast enough to be viewed as it is being decompressed, and the option to decompress the video in full before watching it may be inconvenient or require additional storage. The design of data compression schemes involves trade-offs among various factors, including the degree of compression, the amount of distortion introduced (when using lossy data compression), and the computational resources required to compress and decompress the data.[5][6]”
(Read more at https://en.wikipedia.org/wiki/Data_compression )

Categories
Content Marketing Design Freebies Graphic Design Websites Tips

Free Vectors Online For Your Website or Blog

Vector images are a great way to add unique and iconic visuals to your website, blog or promotional materials. Read on to find out my top resources for getting free vectors online.

What is a vector?

A vector is a graphic that maintains it’s resolution no matter how large or small because it is built differently than a graphic image like a photograph is. Instead of being built off of lets say pixels, it is built off mathematical proportions. For example, you know all those clean logos that you see facebook or twitter use with the f in the bluebox or the birdie? Those are vectors.

Vectors are great for logos, or for icons for things like visual display of categories & signs, such as a dollar sign for where to pay or a toilet sign for where to use the lavatory.

Free Vectors Online

Here are my top two recommendations for places to find free vectors online for commercial and personal use.

1. www.freepik.com

“More than a million free vectors, PSD, photos and free icons. Exclusive freebies and all graphic resources that you need for your projects.”
Free pik is competing as the place to go for free vectors and graphics so this site is pretty loaded with goodies.

 

2. Smashing Magazine / Freebies

https://www.smashingmagazine.com/tag/freebies/

“Smashing Magazine — for web designers and developers.”
Listing themselves as a site for web designers and developers, so this is a trade secret I am sharing with you! But don’t be daunted by the formality of this. While you may not understand most of what this site has to offer, I am linking you to their “freebie” area which is pretty straight forward and which is wonderfully loaded with awesome freedbie vector packs. While they may be free, you should be sure to double check any other stipulations they may have as they may request attribution or not that you can’t resell the vectors (you did get them for free after all!). But generally most of these vector packs are free to use for your own projects.

 

Interested in more free online tool design resources?

Check out more of my blog posts…

Free Images to Use of Your Website of Blog

Colour Picker by Paletton – Free Online Colour Scheme Tool

Categories
Design Freebies Graphic Design Photography Websites Tips

Full Screen Background Images for Web

I am a big fan of full screen background images used for a websites design.

2/3 screen to 1/3 screen is good too! The important thing is a nice glossy looking image to fill that space with good visual content.  A good quality photograph to convey your sites appeal is not something to be underestimated in terms of the visual impact and appeal that this can have for your website users. As someone who designs and builds websites, and who also is graphic artist and photographer, I can tell you that desiging a website is much easier for me when I have good visual photos to start with. The amount of energy and time that is required to make graphics that are as appealing as photographs isn’t quite the easy ticket as it is when working with good quality professional photos. To me, the ideal for 90% of nicely designed websites is good quality professional photo representation for your site and once this is taken care of, then embellishing with some well places graphics personal to your site.

So that being said, if you’re thinking of DIY building or hiring for a website, please do yourself the favour of taking the first steps of having some photos taken with your website in mind. This is important to have photos taken with the purpose of a website in mind because even though you might already have some great photos hanging around, you might find that they will not work as well with your site as there are certain key details to be mindful of for photographing for the purpose of presentation for web.

 

Width Wise Photos

The first and most obvious thing I try to convey to my clients whether they are selecting images from their personal photo library or hiring a photographer is the simple detail of having mostly width-wise images to work with. Computer screen monitors are width-wise, so most of your photo will want to follow suit, and this is certain for your fullscreen background image!

 

Dimensions and DPI (Dots Per Inch)

The photos most cameras will take will be significantly larger in size and pixels than you should have for your website. This is because cameras are generally made to be good enough for the option to print pictures in large formats to hang on your wall. This quality of image is much better quality and thus larger than what the web likes, because for the purpose of efficient webpage load times, images need to be smaller in dimension and quality for web than for print. For more info on saving images for web, please read my blog post Image Optimization for Web

 

With all that being said, these are the general details for good quality full screen backgrounds for web :

Dimensions: 1250 X 800 px

Resolution : 72 dpi (dots per inch)

 

Some of my other tips for your consideration for the purpose of website presentation include:

 

Colour Contrast

Bear in mind that there is likely to be other content on your website such as Text, Buttons and possibly graphics, forms etc. Especially if your background images are to be layered with these other elements, you will want to ensure that all elements are legible with contrast. If you have a dark background, the other elements should be light and vice versa to ensure high contrast.

 

Testing It Out

Once you’ve got some images to work with, be sure to test out their display or different browsers (Chrome, Safari, Firefox etc), devices (desktop, laptops, mobile, tablets) and screen sizes. All of these are factors in how your site and images will display so be sure to check out how your full screen background image will display with all these different factors.