With dual degrees in both Web Design and Web Development, and an MA in Communications from UCD, Cathal is uniquely suited to his role as Front-end Developer here at Big Dog Digital. By combining his knowledge of high-end web development, with his passion for user-friendly interfaces and clarity of design, Cathal ensures that every website is constructed with the user’s experience firmly in mind.
Big Dog’s Monthly Medley #FebEdition
By Cathal Mac an Bheatha
Read Time: 4 Mins
Welcome back to our new Monthly Medley segment. Specially curated to look at areas across the web that have caught our eye this past month. The first Friday of every month will see Cathal share some recent finds and gorgeous web and design inspiration. The biggest announcement this month and one that we’ve all been thrilled about; the relaunch of the virtually indestructible Nokia 3310, so lets get into it.
An Icon Reborn
Who would have thought that after it’s initial release in 2000, 17 years later we’d see the return of the iconic Nokia 3310. I for one am excited to dive in and see what this modern classic has in store (or possibly just to play snake again). It’ll be interesting to see how it’ll match up in today’s market (retailing at $50) against its fully loaded counter parts.
From a design perspective Nokia have brought this mobile icon right up-to-date with beautiful modern rounded corners and a selection of vivid colours to choose from, yet the new Nokia 3310 retains the iconic silhouette of the original and reimagines it for 2017.
WebGradients is a free project from the itmeo team. The gradients are built to be simple and powerful saving you valuable time. The WebGradients set contains 180 fresh backdrop gradients; CSS values are available to copy and paste directly into your stylesheet, while Sketch, PSD packages are available to download on a pay what you think is right basis.
There’s something so nice about browsing CSS gradients. Be sure to check out the sites loading animation, I could spend all day looking at it.
HTML 5 Robot
What can I say about ‘The HTML5 Bot‘ except for that he’s a very nice bot indeed. However ask yourself this; have you ever found yourself uncertain what the best semantic HTML tag is for the section of code you’re writing? Why not let the HTML5 Robot choses the appropriate semantical tag for you. The Robot will ask you a few questions to determine the correct HTML 5 element to use.
That’s a wrap for this months medley, hope you enjoyed it. Have any comments or suggestions let us know on the various social media sites. You can tweet Cathal directly @Cathalmacan. Good luck and take care.
Big Dog’s Monthly Medley
By Cathal Mac an Bheatha
Read Time: 4 Mins
I’m so sad it’s Friday. I wish it was Monday already! Said no one in history, ever. Welcome to our new Monthly Medley segment. Specially curated to look at areas across the web that have caught our eye this past month. The first Friday of every month will see Cathal share some recent finds and gorgeous web and design inspiration.
Kicking Monthly Medley Proceedings Of Properly
So it’s Friday. You’re not thinking about what’s for dinner, you already know the answer is… BEER! A new Kickstarter Campaign is here to help you achieve that Friday bliss. Growler Chill have designed a counter top tap to keep growlers cold, fresh and on tap right at home. If you’re familiar with your craft beers, you’ll know what a growler jug is. I for one needed to do some research. According to Growler Chill, their innovative appliance holds three standard glass growlers and extends the beer’s life for weeks after opening, by recreating keg conditions. I’m impressed, it looks slick too.
HEI Tech Tea
It will probably come as no surprise that the tea drinking ceremony has strong cultural significance in China; it is almost held at the same esteem as the humble ‘cuppa’ functions as an icebreaker for visitors entering into Irish households.
In an attempt to keep this culture alive, Chinese design brand Defront created a tea service in the hopes that the product will make traditional drinking ceremonies popular with the country’s younger generation.
The HEI tea set is made of Chinese Yixing clay, inspired by the ancient Chinese tea ceremony while combining Eastern and Western tea culture; the redesign of the tea drinking and infusion process combines the merits of the traditional tea ceremony and the convenience of using a tea bag.
Google contacted Script & Seal (Gavin Potenza & Liz Meyer) to create a series of illustrations to accompany the newest feature of their Play Music program: Google Concierge. The process of “integrating this service into Google Play was seamless, but exciting, simple and graphic solutions were needed to easily explain each situation without using words. The artwork was created to work as both cropped icons & background patterns creating a more unified experience”, according to Gavin and Liz.
The Universe on Pinterest and GIPHY
Ever asked yourself where to source the best outer space imagery? Well look no further, NASA has started to share its images across their Pinterest and Giphy accounts. According to the NASA blog the resources will be “providing visitors an out-of-this-world journey through animated GIFs and images of Earth and beyond.”
NASA is going to post historic images and videos to Pinterest across it’s many missions to date. While on Giphy NASA has brought its extensive collection of images and videos to life in GIF format. No doubt this will open the doors to many great reactionary Memes.
When it comes to iconography, as a designer I am always on the look out for cool icons that both look good and are easy to use. For the most part in Big Dog we use font icons such as Font Awesome for our projects. The ease of use of font icons is unparalleled, icons align to text effortlessly. However, SVG icons are gaining serious momentum across the web. Ultimately, a SVG icon system could increase accessibility standards while also rendering higher quality visuals across projects. I stumbled upon these Heroicons created by Steve Schoger recently. Steve has previously created Hero Patterns and Zondicons, both are offered as free design resources.
Heroicons currently in development, are offering 10 free sample icons prior to launch. As can be seen above the icons are fully customisable as a result “give you the creative freedom to help you better align to your brand that most stock icons don’t provide. Heroicons will come with a variety of themes with easy to manage CSS, SASS and LESS.”
Elliot Dahl has published an insightful article looking at his approach to styling SVG icons with CSS, read here.
Gif of The Month
January is finally done and those post Christmas blues forgotten, in fact all eyes are now firmly focused on summer. Now that all the excitement of the New Year has settled, how have your resolutions progressed? Still endlessly clocking up those hours in the gym? I know we are ?
Featured image source: Script & Seal
Web Design Trends: What Can We Expect in 2017?
By Cathal Mac an Bheatha
Read Time: 6 Mins
2016*, served with its very own asterisk, a turbulent year to say the least. It is only appropriate that we take a moment to remember the wealth of iconic musicians, authors, actors and revolutionaries that we sadly said goodbye to this year. Kick starting 2017, let’s look at some of the web design trends to keep in mind when starting your designs this year.
Looking Back at Web Design Trends of 2016
I asked around the Big Dog office to think back over the defining web design trends of 2016. The rise of the bot, Apple’s (questionable) touch bar, wearables and smart home technologies were some of the standout moments of the year.
Bold Type & Courageous Colours
Limitations to screen real-estate has always been a concern for designers, now more prevalent than ever, with the increasing amount of expanding mobile and tablet screen sizes emerging. This has seen designers learn how to let headings breathe again. White space is and always will be a designer’s friend.
Bold, concise, eye catching statement headings are key to this. The trend over the last few years has seen large impactful image or video backgrounds with the over laying header text allowed the space to breathe and promote what the website has to offer.
This web design trend is sure to continue over the course of 2017, there’s no doubting that it is an extremely functional approach. Lately, however, we’re noticing designers are breaking away from the norm and using custom made images created for the website, or a mix of illustrations, animations and varying geometric shapes. In the same vein, designers are moving away from the box-centric, responsive driven layouts and looking towards incorporating graphic design styles from the 60s/70s onwards.
As a result of CSS3 becoming more powerful, and with browser support for it increasing, we’ve seen a trend of duotone gradient style images appearing across the web. Yet despite the growth in popularity of Flat Design, Spotify and Instagram were still early adopters of the the duotone style. This trend is set to continue, one might even say “2017 – The Year of Duotone”, don’t quote me on that however, unless of course it’s transpires. Look out for an post update circa December.
Tinkering With The Grid
2017 will be the year where display: flex; will be popping up throughout css stylesheets. Flexbox is an efficient CSS3 tool for page layouts, making expanding world of screen sizes easier to structure.
Flexbox, sometimes a word that strikes fear into some developers due to the ease of which the likes of Bootstrap’s grid has allowed developers to build website. However, once you’ve come to terms with flexbox, aims to provide a more efficient way of positioning and reordering elements within a websites container space. Designer Sarah Parmenter explains how she came upon her ‘aha moment’ when it came to learning flexbox on her website.
If you want some more information, check out Chris Coyier of CSS Tricks guide to flexbox; once you crack it, you’ll thank me and him.
Page load-speeds are always a concern for website; as web a web developer I am always looking for ways to lower page load-speeds. When it comes to images, SVGs are the future. Originally developed in 1999, they have only started making waves across the web over the last number of years. A major benefit of SVG images is that they do not make a http server request, therefore lightening the load-times across the site.
So why have we been relying on jpeg and png image formats for so long? The fact of the matter is that we will still rely on other formats. SVGs are not the be all and end all when it comes to images. But when we’re working with iconography SVGs wear the crown for the best method of displaying scalable vector graphics no matter what the size change. Cross browser support isn’t completely perfect yet, however SVGs are rapidly gaining momentum. No doubt we’ll see a lot more articles written during the course of the year.
The Designer and Developer Correlation
Staying away from the ‘should a designer code’ argument. Thankfully we no longer need to discuss this, because we are seeing designers eager to put an end to handing off static PSDs to developers. Designers and Developers have a wealth of tools such as InVision, UxPin, Marvel, FramerJS available to them. These tools provide the addition of creating dynamic visualisations of their designs, even in browser; thus making the transition from designer to developer as smooth as possible.
The Power of Good Content
Finally, before I wrap up this year’s list of web design trends, I have to mention, content. Content is still king, and should be considered at the forefront of the design process. Websites can have all the bells and whistles available to it, but without engaging content a website can appear hollow. I cannot stress enough the importance of strong copy.
2017, should see the design and development process turned on its head, by leading with content-first design. Brenda Barron suggests on wpmudev.org that this needs to be strongly considered. Brenda is of the opinion as a designer, that content-first design will provide clearer guidelines to follow. Realistically, we’ll end up with higher quality content instead of trying to cut and paste content into our already approved designs. This ultimately leads to greater consistency throughout the design and build process, making for a smoother streamlined process. If you have the patients and time to restructure your process, this approach sounds like the payoff could be worth it.
Websites with content presented in a concise, intuitive way, are hugely important to a websites search engine ranking also. Google rewards sites with appropriately structured content. The frequency in which a site can produce new content, such as regular blog posts, is music to Google’s ears. Our SEO specialist Martin has written a post outlining this in more detail.
The future of web design is bound to be filled with brightly coloured spacious content driven layouts; while I for one am excited to see what designers produce for the web this year. Let me know thoughts on what your own web design trends for 2017 are; tweet me @cathalmacan.
Be sure to keep an eye on Big Dog throughout 2017 we have some exciting projects in the pipeline. Finally according to the Chinese calendar 2018 is the year of the dog; here at Big Dog we’re excited to announce 2017 as #YearOfBigDog.