Darkstar Media: Blog Categories

Category Archives: Graphic Design

New website launch – The Sanderson Group

Jim Sanderson GroupThis week we are happy to announce the launch on a new brochure website for The Sanderson Group. For this project we handled both the graphic design work as well as the development.

The graphic design work had to stay within the Scotia Wealth Management branding standards, so we worked hand in hand with their branding team. For the development we created a custom WordPress theme using Twitter Bootstrap as our main CSS backbone. Bootstrap is great for creating responsive website design so the site will look great on any device.



New eCommerce website for my Artwork

justin blayney fine art shopI am happy to announce the launch of my upgraded website www.justinblayney.com. What is different from my old site is that I have now included an eCommerce component to my website where you can buy my hand made silk screen prints online in a few easy steps. These prints are a great way to acquire affordable fine art. Please check it out, share with your friends and I am open to all feedback about my website.

This website was created using WordPress and WooCommerce. I custom made the theme using twitter bootstrap.



Using Twitter Bootstrap for Web Design and Development

thinkinsure twitter bootstrap websiteWe have recently jumped on the Twitter Bootstrap bandwagon and are very happy with the decision. If you don’t know, Twitter bootstrap is a web framework that is “mobile first”. When they developed the framework they solved many of the issues that web developers face when dealing with responsive design such as how columns will collapse and stack as the screen gets smaller, re-sizing images to the device, managing device specific content, plus many more.  Traditionally we built websites that looked great on the desktop, then would add CSS and javascript to make it look good on mobile devices. With this approach we had to pick certain mobile browsers sizes to concentrate our efforts on such as the  iPhone and iPad (as the were the most popular). If you go to any smart phone retailer now you will see a huge variety of screen sizes, so with our original approach many of these new screen sizes would have wonky looking websites.

So using bootstrap and a mobile first approach our websites now look good on every device and screen size. Over the last 6 months we have developed a custom bootstrap website (thinkinsure.ca) and a WordPress Bootstrap theme (memorycentre.ca and roofing-solutions.ca).

Custom Bootstrap Website: thinkinsure.ca

This project was 6 months in the making. Darkstar Media handled both the design and development of this insurance company website. We worked hand in hand with thinkInsure’s SEO specialist and made sure the user experience was great for all devices and is fully optimized for search engines.

WordPress Bootstrap Theme: memorycentre.ca and roofing-solutions.ca

These are the first 2 completed websites to use the Darkstar Media WordPress bootstrap theme. The theme is simple to customize because of the bootstrap framework. It has custom callouts (calls to action) for the home page and internal pages which are very easy to manage. For memorycentre.ca we also designed their logo and set up their social media presence.

roofing-solutions.ca Bootstrap WordPress themememorycentre.ca Bootstrap WordPress theme

 



Responsive WordPress Theme Developed for Blue Chip Leasing

Blue Chip LeasingWe are happy to announce the launch of another great new website, Blue Chip Leasing. We both designed and developed this website. The content management system used for this website is WordPress and it is fully responsive.

Special attention was paid to 3 key areas of the website and Blue Chip’s main services, Broker Partners, Vendor Partners, and Equipment Leasing. For these key areas we created Calls to Action on the home page as well as the sidebars.



6 Trends in Web Design to Look Forward to in 2015

Hard to believe we are in the last few months of 2014 already!

As this year draws to a close, it’s only logical that as we look toward 2015, we begin to investigate the new trends in web design we may expect to see in the coming year.

We have already seen the demand for responsive mobile device sites evolve and it looks like that trend will only continue into 2015. In today’s post, we will examine responsive design and a few more trends expected to dominate web design in the New Year.

Responsive Design

One of the more dramatic changes in the coming year will be the web browsing shift from PC to hand held, mobile devices.

Responsive design refers to your web sites ability to switch views and ease of use from PC to mobile device. Our society has become so mobile and with the thirst for information while people are out and about, having your website formatted to switch effortlessly from PC to mobile viewing is no longer a just a bonus but quickly becoming a downright necessity.

If a user can’t easily navigate your website on the go from their mobile device, chances are pretty good they will not be back.

Flat Design

Flat design deals with what we see when we view a website.

Web designers are staging a revolution of sorts by throwing out the patterns, bevels, shadows, and textures of traditional sites and replacing them with flat, smooth, clean lines of flat design. Some pros and cons of flat design are as follows:

Pros

  • Elegant, clean lines
  • Bold, vibrant colors
  • Smooth, minimalistic look
  • Faster page load times

Cons

  • Flat design is pretty trendy right now
  • It runs the risk of being too simplistic
  • Color schemes can be hard to match
  • Ease of use is sometimes compromised

More Scrolling

Again, the steady switch to mobile device is affecting web design and designers are meeting the challenge by designing sites with more scrolling opportunities.

Mobile sites can be difficult to use even when they utilize responsive design simply because of the size of most mobile device screens. Click on images or tabs on the site can be difficult for even the most petite hands so, in an effort to promote ease of use, many designers are reworking sites to include more scrolling and less clicking.
This is particularly helpful in sites that have multiple pages. Making the site more user friendly should always be first and foremost in a designers mind. If the site is not user friendly, visitors will not return.

Larger Images

As the internet replaces other media, it has changed the way we like to receive information

We have largely become a very visual society. Using larger images with text overlay is a great way to capture your visitors’ attention and get them to stick around to read your text.

Images should be engaging but not dominate the entire page, nor should the page be cluttered with several small images. Finding the right larger image to pull in the reader but not overwhelm them is the key to making visitors to your site come back for more.

Background Videos

2015 will see a rise in the use of background video embedded into pages. Having too much information on a web site is a huge turnoff for browsers.

Not only does it clutter the page and make visitors to your site uncomfortable but it can also affect page load time.

Designers are getting around that now by embedding informative video into the site pages. Now, when you click on a site, you’re treated to beautiful imagery that tells a story about the site instead of having to read everything on the page. What did I say about the internet turning us into a more visual society?

Typography

In the past, type face and font packages have not been very cost effective for most consumers hiring a web designer.

Now with the advent and acceptance of open source formatting, such as Google fonts, who offers them for free, that is quickly changing. Open source formatting has also brought down the prices of commercial type face and font packages. Designers can now pass on their savings to the consumer.

Designers can really express their creativity with type face and fonts through these open source formatting opportunities. Being able to vary the type face on a new site makes it stand out from others in a way that would invite users back to the site over and over again.

So there you have it, a few things 2015 has in store for us. With all these new designs and features the future sure is looking bright for web design.

 

 



Champion Iron Responsive WordPress website launched!

We are pleased to announce the launch of the Champion Iron website (www.championiron.com). This was a large project and Darkstar Media worked with OMG (Onside Marketing Group). Darkstar Media handled the graphic design, website development, and data entry and OMG handled the project management.

Some of the features of this website include:

  • Four Languages (English, French, German, Chinese)
  • Fully Responsive
  • Dynamic Sidebars
  • Stock price and graph integration
  • CRM integration
  • SEO (Search Engine Optimization)

champion iron logo



Hal Lasko at FITC Toronto conference

Today, I’m excited to announce that I will be attending the FITC Conference being held in Toronto, April 27th through April 29th. I’ve been looking forward to this event for quite some time now not only as web design professional but also on a personal level as an artist.

The FITC conference in Toronto is hosted by the company of the same name. Its moniker stands for Future, Innovation, Technology and Creativity and they are one of the leading creative companies in the web development industry. Striving to inspire and educate, FITC puts these conferences on all around the globe in the hopes of inspiring, challenging and providing networking opportunities for anyone who creates in the digital space.

This year’s conference will produce over seventy workshops and panels on everything to do with digital media … from freelancing to marketing; OpenFramework, to art and culture. If it pertains to digital media, they will be presenting it.

In addition to the workshops, this conference will feature speakers from all over the world who are experts in their respective fields and are eager to share their knowledge with us. Chief among these speakers are Stefan Sagmeister, Sougen Chung, Addy Osmani and the man I am most looking forward to seeing as an artist … Hal Lasko.

Hal LaskoHal Lasko who is affectionately known as Grandpa Hal is a 98 year old graphic artist who works in pixels using the program Microsoft Paint. Grandpa Hal creates the most wonderful art despite his eye condition called wet macular degeneration, a chronic eye disease which limits his center field of vision.

In his younger days he started out in graphic design by drafting maps for the military during World War II. After that he had a successful graphic design career with several companies before retiring from American Greetings, the greeting card company and continued to use paints as a creative outlet at home.

As Hal grew older, his eyesight began to deteriorate due to the macular degeneration. Obviously this would be devastating for any artist but for one in his declining years, it was particularly stressful. As an artist, he relied on his sight to help him create and could not imagine channeling that desire into anything else but, as luck would have it; this was not the end of Hal’s creative days.

Lasko was gifted a personal computer by his family on his 85th birthday. This computer came with a program called Microsoft Paint and it would allow him to carry on with his art in the most interesting way and in an entirely new medium.

Once Hal started to dabble in Microsoft Paint, he discovered much to the delight of himself and his family that his art career would continue. Thanks to the programs rather simplistic nature; Lasko could now create works of art made from pixels instead of paint but he was once again creating.

Pixel art is a form of digital art through the use of specific software where images are edited on the pixel level. Not all digital media is pixel art though (Adobe Illustrator users vectors), what’s most important is that the artist has control over the image at the level of each and every pixel.

When I am not building websites and writing code, you can find me at my easel. My current artistic direction is pixel art (my art website www.justinblayney.com), so you can see why I have an interest in Hal’s artwork. Of course this also ties in with web design and graphic design which is why Hal is at this conference.

Due to the medium, Lasko’s paintings often have a rather simple, kitschy feel … almost retro, if you will. This makes them quite popular among collectors. With bold, vibrant colors and a generally bright feel to his work, he has had a second coming of sorts in his career. Check out his website www.hallasko.com

Lasko feels that his art career was given a new lease on life and credits his creative outlet for his health and longevity. He creates and shares his work with the public in the hopes that he can convey the message that handicaps and age shouldn’t hold you back from what you love to do.

I admire Hal and study his work because the medium is so similar to my own and I am hoping to learn all I can during this opportunity to hear him speak at the FITC conference. His passion and drive to create beautiful works of art motivate me as well as help me to grow as an artist.

I’m quite looking forward to hearing him speak of his life and his passion for art. Studying his work, because we work in such a similar medium, has oftentimes encouraged my own. Watching what one man can do in the face of adversity is quite inspiring. It should be an inspiring, fun filled three days.



Creating An Effective, Lead Generating Call To Action

There is a wealth of information and advertising happening on the internet. One only need do a simple Google search and they are bombarded with a barrage of goods and services offered by many, many businesses.

As internet searches have become the primary way people locate goods or services they are looking for; it’s become paramount that your business sites stand out from those of your competitors and, deliver conversion rates higher than theirs. This is where call to actions come in.

A call to action is a ‚”button‚” or banner placed on your website which urges a potential client or customer to do something ‚- whether it’s to fill out a form, buy a product or download and eBook – call to actions lead to conversions.

Conversions are the technical term for leads generated from users clicking on your call to action. These conversions lead, hopefully, to sales. To generate these conversions to sales, your call to action needs to not only catch the eye but compel the user to click them.

Making your call to action pay is one of the most important things you should be focusing on when designing your business’ website. Some key points to follow during your web design for making your call to action it’s most effective follow below:

Recognizing Need

Call to action - recognise needThe first step to take when designing your call to action or CTA, is to help your readers recognize the need to click on it. Define the problem or need and design your text and graphics around the idea that if users click on your call to action, the problem will be resolved.

For example: you’ve written an eBook on dog training you are trying to sell. Start with some text outlining common behavior problems and design your call to action so that users believe all the answers to their training problems will be solved by clicking your call to action.

 

Placement

call to action - placementThe placement of your call to action is quite important. Typically CTAs are placed on the left side near the top or midline.

In the English language, we read left to right and top to bottom. You wouldn’t want to place your CTA too close to the bottom of your landing page because often visitors to your site will not read all the way down your page and if they do, you should try to avoid having them scroll back up to find it again. This is a key lesson in web design.

 

Warm vs Cold Colors

Call to action warm colour buttonColors such as red, orange and yellow denote warmth and give an illusion that they are closer than they really are while colors such as blues and greens denote cold and appear more distant.

Calls to action - cool colour buttonStudies have shown users will be more likely to click a warmer color than a colder one so use the warmer colors whenever you can.

Contrasting Colors

Call to action - contrasting coloursGetting your call to action noticed is half the battle but using contrasting colors aid in this.

Put your colder blues and greens in the background graphics and use the warmer colors for your call to action. The contrast between the colorings will help your CTA to further stand out.

 

Compelling Incentives and Social Proof

When designing your CTAs another great idea is to include an incentive or show proof that others have enjoyed the product as well.

Call to action - offersAn incentive is something you would include in your CTA text or graphic such as ‚”50% off!‚” or ‚”Sign Up for Free Today!‚” Make your users think they are getting a deal of some kind when they click your CTA.

Social proof or influence is akin to peer pressure. There have been many studies in advertising indicating the value of social pressure. By including button which displays your pages Facebook ‚”likes‚” and other social media shares, you create a sense that many people love this product and so should your user.

 

Showing your Product

Call to action - show productDesigning your call to action in such a way that it highlights your product or service in the actual call to action is brilliant.

Users get a small taste of what they’re searching for and that small taste will compel them to click your CTA to see more.

Great Text

Call to action - great textAs important as placement, great text can mean the difference between a user clicking on your call to action or scrolling past. You want to inform, create a sense of urgency and tease using the least amount of text possible but in such a way that visitors cannot help but click your CTA leading to a conversion and a brand new lead.

Be exciting and urgent but straight to the point without giving everything away at first glance. Your text should clearly show what you want users to do using urgent yet effective language.

 

Spatial Effect

Call  to action - spacial effectWhite space is important! You need to highlight your call to action in your graphic design by utilizing white space around it.

Users will not click your CTA if there are too many things cluttered around it, or it will simply be hidden by the clutter. Set your call to actions apart by surrounding them with an equal amount of white space on all sides so it is set apart from the page but still included.

 

 A Sense of Direction

Call to action - sense of directionUsing directional graphics and arrows highlighting your call to action give users a sense of what direction you want them to take.

Since a call to action is the first step in getting consumers to take the path you want them to take, you should make use of directional graphics such as arrows or sign shapes in your graphic design and call to action buttons.

 

The final step in an effective call to action is to give some thought to what happens after a consumer clicks your CTA. If your intention is to gather information, resist the temptation to gather demographics and request only the minimum amount of information needed to follow through with this potential new lead. Consumers are turned off if they have to enter too much information and will likely not finish the fields and you have lost a potential client.

In conclusion, your call to action is the cornerstone to a successful business website. By utilizing the above principles, you will have a CTA that is not only attractive and easily located but one which will generate conversions which will lead to new clients and the success of your business.

 



Justin Blayney’s Toronto Art Show in March

Sierra PaintingDarkstar Media’s owner and founder Justin Blayney will be having an art show at Rainbow Cinemas in downtown Toronto for the month of March. Rainbow Cinemas has large glass display walls at the entrance to the theatre and Justin’s work will be on display and can be seen for no cost. There will be about 6 of his pixel paintings on display at the show and all are welcome and encouraged to attend the show.

Justins artwork is highly influenced by Photoshop and graphic design. He paints geometric shapes with acrylic paint to create optical illusions and thought provoking contemporary art. His current artistic direction is mimicking the computer and how computers generate images.

The show will run from March 1st – 28th, 2014 and is open for the hours the theatre is open (Why not catch a movie too?).

The Rainbow Cinemas is located at 80 Front Street E. at Jarvis in Toronto Ontario. Click here for a Google map.

More information about  the  art show can be found on Justin’s art website at www.justinblayney.com



New responsive WordPress website with structured data

We are happy to announce the launch of our upgraded website. We realized that we were building responsive websites with structured data but hadn’t added those features to our own website (sometimes you just get too busy).

So now we have made this website fully responsive to all devices, try it out on your iphone or ipad, or resize your browser window and see how the page and content responds.

We took our existing website design and transformed it into a custom WordPress theme and integrated structured data right into our blog theme templates so the structured data tags are added automatically.



Or Call 416-450-5439