Author Archives: Speckyboy Editors

Weekly News for Designers № 394

This is our popular weekly design news post where we share our favorite design related articles, resources and freebies from the past week.

You can sign-up to our awesome weekly newsletter or follow us on Twitter for some more amazing design articles, resources and freebies.

New Resources & Tools

Moodboard Builder for Sketch – Create beautiful moodboards in a single click with this Sketch plugin.
Moodboard Builder for Sketch

40 Cheatsheets & Reference Guides for WordPress – A collection of WordPress resources geared towards everyone from beginners to advanced users.
40 Cheatsheets & Reference Guides for WordPress

Get FullStory for Free, Forever.
Get FullStory for Free Forever

Remote Starter Kit – Get off to a flying start as a remote team with these mighty-fine tools that are tried and tested.
Remote Starter Kit

What’s New In DevTools (Chrome 59) – Find unused CSS and JS code with the new Coverage tab. You can reduce the size of your pages by only shipping the code that you need.
What's New In DevTools (Chrome 59)

fractures– A Baseline atomic CSS toolkit that helps you bootstrap design-systems and prototypes by providing a set of non-blocking, atomic, utility classes.

GitPoint – The most feature-rich unofficial GitHub iOS client that is 100% free.

GatsbyJS – A blazing-fast static site generator for React.

pell – The simplest and smallest WYSIWYG text editor for web, with no dependencies.

Learning Guides, Tutorials & Tips

Web Accessibility 101: Design for All People, Not Most By Stephen Moyers
Web Accessibility 101: Design for All People Not Most

How to create a pattern library and why you should bother By Paul Boag
How to create a pattern library and why you should bother

Design better onboarding tooltips By Jake Tsacudakis
Design better onboarding tooltips

The Options for Programmatically Documenting CSS By Kaloyan Kosev
The Options for Programmatically Documenting CSS

Responsive Design Workflow in Sketch By Kjelle
Responsive Design Workflow in Sketch

Designing and building a web app from scratch: a case study By Louis Eveillard
Designing and building a web app from scratch: a case study

CSS Architecture for Design Systems By Brad Frost
CSS Architecture for Design Systems

Stealing Your Way to Original Designs By Dan Mall
Stealing Your Way to Original Designs

Free UI Templates

Molly – A free HTML single website template based on Bootstrap.

Styleguide Free Template – A free styleguide template for Sketch.
Styleguide Free Template

…and finally…

The Ultimate Collection of Google Font Pairings (Displayed Beautifully with Classic Art) By Lou Levit
The Ultimate Collection of Google Font Pairings (Displayed Beautifully with Classic Art)

Browse the Designer News Archives

The post Weekly News for Designers № 394 appeared first on Speckyboy Design Magazine.

Source: Speckyboy

Weekly News for Designers (N.373)

This is our popular weekly design news post where we share our favorite design related articles, resources and freebies from the past week.

You can sign-up to our awesome weekly newsletter or follow us on Twitter for some more amazing design articles, resources and freebies.

New Resources & Tools

Propeller – A front-end responsive framework based on Google’s Material Design Standards & Bootstrap.

WebGradients – A free collection of 180 linear gradients that you can use as content backdrops in any part of your website.

Graaf – Pure CSS grid overlays for designing. Just link the CSS that fits your grid or create your custom overlay.

Rythm.js – A javascript library that makes your page dance.

HTML Reference – A free guide to HTML. It features all elements and attributes.
HTML Reference

speakemoji – A free collection of 48 alternative emoji icons.

The HTML5 Robot – Let the robot choose what semantic tag is right for your HTML5 element.
The HTML5 Robot

Lighthouse – Analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices. Requires Chrome 56 or later.

Angled Edges – A Sass mixin for creating angled edges on sections by dynamically encoding SVGs.
Angled Edges

Learning Guides, Tutorials & Tips

Discovering Resilient Web Design with Jeremy Keith By Eric Karkovack
Discovering Resilient Web Design with Jeremy Keith

How to Combine Icons from Different Sets in Your UI By Andrew Burmistrov
How to Combine Icons from Different Sets in Your UI

2017 Design Trends Guide By Loredana Papp-Dinea and Mihai Baldean
2017 Design Trends Guide

HTML & CSS Is Hard (But it doesn’t have to be) By Oliver James
HTML & CSS Is Hard (But it doesn’t have to be)

UX Design

5 techniques for fine-tuning UX with color By Paula Borowska
5 techniques for fine-tuning UX with color

Excercise Caution When Using These Web Design Trends By Stephen Moyers
Excercise Caution When Using These Web Design Trends

Free UI Resources

15 Free Photoshop & Sketch Admin Dashboard UI Templates By Paul Andrew
15 Free Photoshop & Sketch Admin Dashboard UI Templates

15 Free Gesture and Interaction Icon Sets for Mobile App Designers By Paul Andrew
15 Free Gesture and Interaction Icon Sets for Mobile App Designers

Free iOS User Flows for Sketch & Adobe XD By STRV
Free iOS User Flows for Sketch & Adobe XD

…and finally…

CSS 3D Solar System By Captain Anonymous
CSS 3D Solar System

The post Weekly News for Designers (N.373) appeared first on Speckyboy Design Magazine.

Source: Speckyboy

14 Useful WordPress Themes for Your 2017 Projects

Looking for a WordPress theme?

The options seem endless; and it can be a bit overwhelming. Any old theme won’t do. You want one that enables you to build awesome websites, while providing the best value for your money.

What to look for:

  • An Aesthetically Pleasing Design: If you plan on being in business for a while, be sure to select a modern, aesthetically pleasing theme that won’t need major changes over the long term.
  • SEO Friendliness: Getting plenty of traffic is all-important, but it’s only going to happen if your website is SEO friendly. Select a theme that displays this capability.
  • Easy Customization: A theme that is easy to customize will give you plenty of design flexibility. And will save you tons of time in the process. Why pay for a product that puts you in a creative straitjacket?
  • Quality Support: Getting a response to a problem via email within 3-5 business days is not quality support. Look for a theme that gets you in touch with a customer service rep right away, or promises a rapid response. Forums and videos are helpful too.

Be Theme – Responsive Multi-Purpose WordPress Theme

Be Theme Responsive Multi-Purpose WordPress Theme

Be Theme, the biggest WordPress theme ever, is also one of the most versatile and popular. It has every feature you’ve come to look for in a multi-purpose theme, plus several you won’t find in most other WP themes.

Be’s showcase feature is its more than 230 pre-built websites to choose from. They cover all the common website types, as well as the major business niches. Each of these pre-built websites is professionally designed in terms of their appearance and functionality. They are aesthetically pleasing and modern in appearance, and they provide a solid foundation for creating an engaging UX.

With Muffin Builder 3 and Visual Composers as your page-building options, along with 200+ shortcodes, there’s no need for coding, no matter how much detail you include in your design. Other Be Theme features include 20 customizable header styles, SEO ready, Retina Ready, and Responsive, plus its powerful Admin Panel and the practically limitless selection of design options.

The Core – Multi Purpose WordPress Theme

The Core  Multi Purpose WordPress Theme

The Core is another multi-purpose WordPress theme that has much to offer. Its users love how its backend Advanced Visual Builder not only makes website building intuitive, but gives them complete, real-time control throughout the design process.

The Core comes with 20+ thematic demos, each of which can be installed with a single click, along with The Core Main. The Core Main is a multipurpose demo that you’ll find many uses for. The other demo designs have been carefully crafted for use in building a particular website type, theme, or industry.

Other key features include three sliders and an excellent selection of shortcodes that, along with the visual builder, eliminates any need for coding. The Core is Responsive, and WooCommerce and Retina ready. The three purchase plans include the lifetime plan, an excellent buy if you intend to become a long-term, heavy user.

Enfold – Multi-Purpose Theme

Enfold - Multi-Purpose Theme

The fact that Enfold is a ThemeForest best-rated top seller says a great deal. ThemeForest is well known for its line of high-quality products. Enfold is an extremely versatile WordPress theme.

Enfold offers a top-notch selection of quality demos. While you can import any one of them with a single click, an especially attractive feature is the ability to combine features from several demos as your design unfolds. Many users rely mainly on the Enfold default demo to get the job done, but the ability to borrow elements from other demos is still there.

Quality support is something you should expect when selecting a WP theme. You’ll receive nothing less than top support from the Enfold team and from ThemeForest. You’ll get the proper answers to your questions, and whatever assistance you may need, and in good time. ThemeForest also offers a hosted version of Enfold.

Hestia PRO

Hestia PRO

If onepage websites are you forte, Hestia PRO will be an excellent choice. Hesta PRO is a onepage Material Design theme. Given its multiplicity of features and functions however, it fully qualifies as a multi-purpose theme.

Hesta PRO is Responsive and WooCommerce ready. You’ll also discover that its layouts are glamourous. It’s a great choice for startups.

Houzez – Real Estate WordPress Theme

Houzez - Real Estate WordPress Theme

While any web designer can use a multi-purpose theme, many are better served by a specialty theme like Houzez, that focuses on a certain business niche or industry. As its name implies, Houzez is a WP theme destined for real estate agents and agencies. Its interior pages are specifically designed to fit the needs of the real estate industry.

Divi 3.0

Divi 3.0

Divi has, since its launch, been an Elegant Themes top seller, and with the release of Divi 3.0 it’s popularity has soared. Much of that is due Divi Builder, its state-of-the-art page building tool.

You’ll find plenty of use for the 20+ pre-made layouts as well, plus the feature that lets you preview device type displays and adjust your design accordingly.

KLEO – Pro Community Focused, Multi-Purpose BuddyPress Theme

KLEO - Pro Community Focused Multi-Purpose BuddyPress Theme

KLEO was BuddyPress’s top-rated theme in 2016, and its popularity should only increase in 2017. KLEO is a community-oriented theme that can boast of such features as a Facebook login, Pricing and Price Comparison tables, a Geo Directory, and an e-learning system. KLEO’s advanced page builder and modular approach make building a portfolio, blog, or shop almost ridiculously easy.

Uncode – Creative Multiuse WordPress Theme

Uncode - Creative Multiuse WordPress Theme

You should have a workable concept in mind before you start to design a website. This is where Uncode sparkles. Uncode offers several concept categories, blog, classic, shop, etc., with several concepts in each category. The Enhanced Visual Composer, Adaptive Images, and Advanced Grid System, along with many other features, allow you to turn any of these engaging concepts into a sparkling website, portfolio, or shop.

TheGem – Creative Multi-Purpose High-Performance WordPress Theme

TheGem - Creative Multi-Purpose High-Performance WordPress Theme

TheGem has been called by some the “Swiss Army Knife” of WP themes. It is so loaded with features, and so flexible, that it would be difficult to image a website type that you could not create with it. In addition to more than 40 design concepts, there are 150 awesome demo pages to work with, along with a host of navigation settings and styles.

Ultra WordPress Theme

Ultra WordPress Theme

Ultra, Themify’s most powerful WP theme, is a genuine time saver if you’re in the market for a great theme for creating client sites. Its pre-made demo sites and single-click demo setup provide the content, menus, widgets, and other features you need to get your design off to a rapid start.

Another impressive feature is Ultra’s selection of design skins, with which you can make your websites truly unique in their appearance.

Impreza WordPress Theme

Impreza WordPress Theme

Impreza is impressing! It has every feature you would expect to find in a premium WordPress theme. Rather than a selection of headers to choose from, Impreza lets you design your own with its visual header builder, plus 14 templates to help you along. There are, of course, a host of other impressive features as well.

Test drive it for free; and see how small details can make a big impression.

XStore – Responsive WooCommerce Theme

XStore - Responsive WooCommerce Theme

XStore is the perfect choice for anyone looking for a theme that makes e-commerce look easy. This king-size theme was created with one thing in mind; to help you and others create professional-looking online shops that are guaranteed to gain user trust. XStore is user friendly, and the shops you can build using it will provide a friendly UX as well. All this, and you don’t even need special technical skills or coding skills.

Kalium WordPress Theme

Kalium WordPress Theme

If the minimalist look is a favored design trend of yours, Kalium should be right up your alley. Kalium’s hallmark feature is its selection of modern, minimalist demos. There are many other great features too, including shortcodes, bonus elements, unlimited options, and popular plugins (including Visual Composer). Kalium also supports a host of plugins that are not included.

TheFox Responsive Multi-Purpose WordPress Theme

TheFox Responsive Multi-Purpose WordPress Theme

TheFox WordPress theme has been designed to the minutest detail. It’s the smartest WordPress theme on ThemeForest. It’s new, for real, multi-purpose, super flexible, and clever like a fox in the way it helps you create one outstanding website after another. Features include 30+ design demos, 250+ design details, Visual Composer with custom modules, and premium plugins. Check out TheFox Business demo and/or the Trending demo.

Wrapping it Up

If you’re looking for a multi-purpose theme, you’ll find it here, the same is true if you need a dedicated e-commerce theme, a onepage theme, or one dedicated to the real estate niche. Whichever you choose, expect to receive a quality product, with excellent support.

If you feel we’ve left something out, let us know. There’s a host of good WP themes out there; we simply chose those we believe to be the best of the lot.

The post 14 Useful WordPress Themes for Your 2017 Projects appeared first on Speckyboy Design Magazine.

Source: Speckyboy

Weekly News for Designers (N.366)

This is our popular weekly design news post where we share our favorite design related articles, resources and freebies from the past week.

You can sign-up to our awesome weekly newsletter or follow us on Twitter for some more amazing design articles, resources and freebies.

New Resources & Tools

Vuetify – A component framework for Vue.js 2 that aims to provide clean, semantic and reusable components that make building your application a breeze.

Plumber – Create better looking documents and speed up CSS development by adding vertical rhythm to your page.

Social Share Kit – A library of decent and good looking CSS/JavaScript social sharing tools like social network icons, share buttons, share count, floating/sticky button bar and popups.
Social Share Kit

Octobox – Take back control of your GitHub Notifications.

Petal – A modern, light CSS UI framework developed at Shakr. Based on LESS.

Sassmagic – An extensive Sass reference guide.

Material Components – Helps developers implement the Material Design guidelines across Android, iOS, and the web.
Material Components

mini.css – Aims to provide as much functionality as possible in about 5KB gzipped.

Foundation 6.3: The World’s Most Advanced Framework Advances Forward – Learn about the most community driven of any Foundation release.
Foundation 6.3: The World’s Most Advanced Framework Advances Forward

Learning Guides, Tutorials & Tips

Writing HTML with accessibility in mind By Manuel Matuzovic
Writing HTML with accessibility in mind

The Current State of Adaptive Design By Charlie Deets
The Current State of Adaptive Design

How to Involve Decision Makers in the Design Process By Lydia Lodovisi
How to Involve Decision Makers in the Design Process

Block Reveal Effects By Mary Lou
Block Reveal Effects

Best Sketch Plugins I Used This Year (2016) By Shina Charles Memud
Best Sketch Plugins I Used This Year (2016)

The Anatomy of a Web Request By Terry Harvey

The Anatomy of a Web Request

Who said javascript was easy? By Aurélien Hervé
Who said javascript was easy?

The Super Simple Guide to Iconography By Tidjane Tall
The Super Simple Guide to Iconography

Understanding Email Layout and Structure By Roland Pokornyik
Understanding Email Layout and Structure

…and finally…What your relatives actually think when you say “UX Designer” By Taylor Palmer
What your relatives actually think when you say “UX Designer”


The post Weekly News for Designers (N.366) appeared first on Speckyboy Design Magazine.

Source: Speckyboy

Weekly News for Designers (N.357)

This is our popular weekly design news post where we share our favorite design related articles, resources and freebies from the past week.

You can sign-up to our awesome weekly newsletter or follow us on Twitter for some more amazing design articles, resources and freebies.

New Resources & Tools

15 Awesome Sublime Text Plugins For Web Development By Tutorialzine.

CSS ICON – An icon set made with pure CSS.

Vue Material – A lightweight Material Design framework for Vue.js.

CSS Loader – Simple loaders for your web applications using only one DIV and pure CSS.

ARc (Atomic React) – A React app boilerplate with Atomic Design approach.

The Ultimate Color Combinations Cheat Sheet By Brightside.

Excel-Bootstrap – Generate Bootstrap websites from Microsoft Excel.

Windmill – A free WordPress theme for bloggers.

Learning Guides, Tutorials & Tips

A Visual And Practical Guide To Material Design By Derek Fletes.

Why Marketers Should Be Encouraged to Think Like Designers By Kartik Sharma.

7 Ways to Come up with Creative Ideas, Backed by Psychology By Carter Bowles.

How to Find Your Perfect Color Pairings By Tobias van Schneider.

UX Design Reading

Key UX Considerations for Optimizing eCommerce Product Pages By Vincent Sevilla.

Designing for Colour Blindness By Si Digital.

Simplifying Your Designs for the Smartest User By Addison Duvall.

Free Icons, Fonts & UI Kits

Freebie: 77 Social Icons (PNG, SVG, EPS & Sketch).

Freebie: Sans Free Typefamily.

Freebie: Pack of 30 Light Leak & Bokeh Flare Photo Overlays.

Freebie: 20 Payment Method & Credit Card Icon Sets.

Freebie: 20 Beautiful Resume Templates for Designers.

Browse the Weekly Web Designer News Archives →

The post Weekly News for Designers (N.357) appeared first on Speckyboy Design Magazine.

Source: Speckyboy

Useful Productivity Tips & Web Apps for Design Teams & Designers

The productivity tips outlined here are followed by most web design teams and individual designers. They are always worth repeating, though. Forgetting or ignoring any one of them can affect your project workflow performance.

They are also worth reviewing since not all designers are aware of them in their totality. When taken together, they can contribute to a successful outcome, project after project.

When forced to rely on something less than a top rated project management tool, designers can still achieve success. Yet only after overcoming obstacles that they should have been able to avoid.

Productivity Tips

Clarify Expectations.
This should be the first rule a designer or a project manager needs to follow. Team members or designers need to know what is to be expected of them. And, all team members need to be on the same page – at all times.

Encourage Open Communications.
Problems, potential problems, and concerns, need to be discussed honestly with your client or team members. A team member who is reluctant to bring a problem to the fore can cause added work for the team as a whole. The team leader needs to be open and honest as well.

Give Team Members Autonomy.
Some call it autonomy; some call it empowerment. People who enjoy working on teams also need to feel like they are working for themselves.

Rethink Meetings.
While meetings are a necessary part of doing business, you should structure them to fully support you or the team’s effort. Unproductive meetings can result in team members being kept from what they do best.

Reserve Downtime.
In a results-driven, highly-charged work environment, scheduled downtime is advisable. And it should be a mandatory practice. The beneficiaries are productivity and morale.

Principles to Remember I –
Make smart use of shared calendars, and show progress are two ways of keeping direct reports accountable. Unplanned events happen, but make it a point to give team members a heads-up when extra hours are in the offing.

Principles to Remember II – Don’t micromanage your team, don’t over commit them. Give them the tools and resources they need to do the job.

Useful web apps to get the job done:


InVision is the world’s leading prototyping, collaboration, and workflow platform. Whether you are an individual designer or the leader of a design team, this workflow tool gives you a way to take feedback from clients and stakeholders, analyze and organize that feedback, and, when necessary, drill down into specific project details.

The good news: InVision is used by companies like Twitter, Apple. General Motors, Uber, and others for their prototyping and project management needs. Even better news: You can try if for free for a single prototype, whether you are an individual web designer or an agency or corporate design team.

You can modify your project, test it, and modify it more, without any need for coding. Professional and Enterprise Versions are available, both at highly affordable prices. If you your team is a large one, working many different prototypes, you can try the Enterprise plan one time for free. This should be a difficult opportunity to pass up. helps designers, entrepreneurs and product managers enhance their design process by creating realistic, interactive and sharable prototypes, without code.

You can design your prototype directly in, using the beautifully crafted UI components for iOS, Android, Windows and WatchOS or import your designs directly from Sketch or Photoshop. With animations, interactions and transitions helps you bring any static design to life.

What makes truly shine is that it allows you to preview your prototypes in a web browser or on the intended device making the experience as realistic as possible. You just need to download the app for iOS and Android. Sharing your prototypes with key stakeholders can be done with just a single click.

350,000 users, smoking-hot startups like PayPal and Evernote, and Fortune 500 companies have placed their trust in See why by signing up for a free 15-day full-featured trial.


If you’re on the market for an enterprise-level software marketing tool, but have found them to be either prohibitively expensive or unable to deliver value for money, Sendloop may well be your answer. Sendloop is the email marketer’s dream. It is specially tailored to leverage the power of email marketing.

Email marketing at times risks being crowded out of competition, no doubt due in part to the difficulty many have in formulating email promotional content that can capture and engage user attention. With Sendloop, you can distribute marketing information featuring professionally-styled content your customers and potential customers will love; without a need for coding or special technical skills.

Sendloop comes with more than 100 ready-to-use email templates. All that’s needed is your branding. Give it a try, and be prepared to watch response rates increase.


Paymo is a single platform for team collaboration, timesheet management and task accounting. This modern project management app is ideally suited for small to medium businesses.

Paymo’s many benefits include helping your team keep focused on delivering real work, rather than spending excessive times in meetings.

It does so in part by enabling team leaders and team members to keep up to date with project progress, by tracking billable hours and milestones, converting timesheet data into invoices, and even accepting payments online. Project managers and design teams have found Paymo’s integrated project accounting capabilities to be invaluable.


Design teams look for more in a project management tool than the ability to simply collect and record project status. They look for a tool that actively assists them in their desire to work closely together. MeisterTask is that tool. Its flexible project boards easily adapt to actual workflow situations.

MeisterTask takes the traditional Kanban board, with its sticky notes on whiteboard approach, and presents it as an integral part of a beautifully designed UI that is an absolute joy to work with.

An added benefit: MeisterTask integrates easily with hundreds of other tools, from mind mapping to team chat and calendar to email apps.

Form Analytics by UseItBetter

Form Analytics by UseItBetter can be an answer to your prayers if customer loss because of the forms you use is a persistent problem.

No matter what it is you’re selling, online forms are notorious for throwing up roadblocks to users instead of making transactions as smooth easy as possible.

It starts by collecting data on how users are interacting with your forms. It presents you with a visual picture of why most customers are dropping out, so you can fix you forms, and go about optimizing conversions. It’s that simple.

Wrapping it up

The beauty of web apps such as these, is that the can do much of the heavy lifting when it comes to keeping a project on track or fixing details that need fixing. That’s true whether an app you select provides and all-in-one project management platform, or one devoted to a more specific task.

Productivity tips along with principles to keep in mind are, and always will be of prime importance. Web apps can make workflow progress smoothly, but it is still you or the team leader who must set the tone for the day’s work.

The post Useful Productivity Tips & Web Apps for Design Teams & Designers appeared first on Speckyboy Design Magazine.

Source: Speckyboy

Weekly News for Designers (N.352)

This is our popular weekly design news post where we share our favorite design related articles, resources and freebies from the past week.

You can sign-up to our awesome weekly newsletter or follow us on Twitter for some more amazing design articles, resources and freebies.

New Resources & Tools

reflexbox – A React flexbox layout & grid system.

Vectr – A free graphics editor used to create vector graphics easily and intuitively.

SpinThatShit – A set of SCSS mixins for single element loaders and spinners.

Reframe.js – A JavaScript plugin that makes unresponsive elements responsive

35 Free Time-Saving Web Apps for Web Designers from 2016.

Yellow Lab Tools – An online test to help speed up heavy web pages.

cssFilters – Custom and Instagram like photo filter playground for CSS (built with React).

Blend – A small web app for creating & customizing beautiful CSS3 gradients.

debugger.html – A modern JavaScript debugger from Mozilla.

Inspirational Galleries

25 Inspirational Examples of UI Style Guides.

20 Examples of Beautifully Designed Admin Dashboards.

Learning Guides, Tutorials & Tips

Stretching the limits of CSS 3: Amazing creations in pure CSS.

How to Effectively Use White Space in Web Design By Tomer Lerner.

Designer’s Web Performance Optimization Checklist By Jon Yablonski.

7 Useful Prototyping Tools for Websites and Mobile Apps.

A Guide to Browser Scroll Animations By Brian Rinaldi.

Free Icon Sets & UI Kits

Freebie: iOS 10 GUI for Photoshop & Sketch.

Freebie: Social Icons (PNG, SVG, EPS & Sketch).

…and finally…

The Intro of the Show Stranger Things in CSS By William O’Beirne.

Browse the Weekly Web Designer News Archives →

The post Weekly News for Designers (N.352) appeared first on Speckyboy Design Magazine.

Source: Speckyboy

Weekly News for Designers (N.350)

This is our popular weekly design news post where we share our favorite design related articles, resources and freebies from the past week.

You can sign-up to our awesome weekly newsletter or follow us on Twitter for some more amazing design articles, resources and freebies.

New Resources & Tools

Wing – A lightweight (4kb minified) and minimal CSS framework.

JS MythBusters_ A free optimization handbook from a high level point of view.

Fork – A fast, friendly and free git client for Mac.

Micro – A modern and intuitive terminal-based text editor.

in-view.js – Get notified when a DOM element enters or exits the viewport.

Moeditor – An all-purpose, open source and beautifully designed Markdown editor.

Codeply – A responsive design playground & frontend editor. – A curated Material Design collection of color palettes.

Badgerly – A CSS3 library for rendering badges.

Learning Resources, Tutorials & Tips

20 Protips For Writing Modern CSS by Tutorialzine.

Itsy Bitsy Data Structures – Everything you wanted to know about data structures.

Understanding CSS3 Flexbox for Responsive Design By Jake Rocheleau.

Developing Extensible HTML and CSS Components By Jon Yablonski.

The Potential Legal Consequences of ‘Borrowing Content’ By Peter Tsipas.

The Essentials of Creative Resume Design By Speckyboy Editors.

…and finally…

50 Free Resources for Web Designers for September 2016 By Paul Andrew.

Browse the Weekly Web Designer News Archives →

The post Weekly News for Designers (N.350) appeared first on Speckyboy Design Magazine.

Source: Speckyboy

The Complete Guide to Working with Remote Developers

As a web design professional, you know how important the quality of a remote coding agency’s work is for the ultimate success of your project.

Design and development teams can and should collaborate to eliminate the hiccups, misunderstandings, and delays. Effectively sharing ideas should be an intrinsic part of the overall process.

Fortunately, there are highly professional coding agencies like this one, whose mission is to ensure you that you are in the loop every step of the way, as your designs are being transformed into reality.

Is this collaboration or someone needs to put a timeline on a flipchart?.

4 Golden Rules for Working with Remote Developers

The benefits you will realize by choosing a remote development agency can be significant.

Remote teams often have more experience and greater talent than local coding enterprises. They service the global marketplace, and have a solid understanding of recent trends and technologies.

Good remote coders have learned and practiced ways to become highly productive. And they constantly strive to improve their skills.

This is how coders relax.

Being remote not only requires better communication, it forces it to happen. How does this happen? Weekly meetings, chat sessions, and the exceptional clarity in briefs, specifications, and feedback. These are all part of the overall scheme.

Some remote development agencies are structured with excellence in teamwork and collaboration in mind. There may be multiple, widely-dispersed physical offices, and talented freelancers often play important roles. This kind of structure is tailored and optimized to deliver the best results.

The golden rules below come from the experience of such an agency.

With 10 years of experience behind it, Xfive has put in place a highly efficient workflow and project management formula. As an Xfive client, you will have your own personal project manager to oversee all stages and facets of development. Your Xfive PM will work closely with you, briefing you on all project stages and taking care that your deadlines and specifications are met.

The Xfive team at work.

Keep these four golden rules in mind when working with a remote agency:

  • A clear brief helps to get a project off to a solid start. Collaboration can get underway even before your brief is finalized when you have a good agency working with you. Be willing to listen to any guidance the project manager may offer. It can help to get everyone on the same page as the project gets underway.
  • Practicality is important. Your coding agency should advise you on the coding best practices and the technologies that they plan to put into play. The final decision is yours, but it should be a knowledge-based decision.

Technologies may vary, but the maker’s touch is essential.

  • Communicate efficiently and effectively. Understand your responsibilities toward making collaboration work by preparing yourself for periodic briefings. Avoid making changes once the project is in development. If you must do so, be prepared to negotiate new deadlines. Work with the agency to determine which means of communications will work best.
  • Listen to the specialists. Professional developers always have the user in mind. Criticism is intended to be constructive, and it is given with the best of intentions. The feedback you may receive is based on solid, variate coding experience.

Preparing .psd Files for Handoff to a Developer

As a web designer, you already know how important it is to provide your developer with well prepared layouts. It’s not only about efficient design, but those details that can really guide the developer. Here are seven steps that will benefit the entire workflow process progress:

1. Prepping the File

It’s best if you can create a separate PSD file for each page template layout. It is much easier for coders to work with multiple small files, each containing a single template. Once you have approved a Photoshop design, make another version of it for the developer. In the developer’s version, layers that are not required for coding can be deleted, while keeping the final design intact.

2. Layout and Color Palette Information

Color may be a good way to start a beautiful friendship with your developer.

Keep guides to a minimum by removing any unnecessary guidelines. Outline page content blocks such as headers, footers, and sidebars. Create a layer group within your Photoshop file or a Word document that lists the colors and styles. Include hover states for text links and other elements not in the PSD files. This color palette listing can also define common page components. These common page components may be font characteristics, page headers, sub headers and the like.

3. Navigation and Button States

Don’t neglect navigation elements, or make the developer guess at what they might consist of. Group all of the navigation elements in their own folder. The coder will need to define two or three user interaction states in the stylesheet. Each state needs to be placed on its own layer name that corresponds to its function. Do this for any button appearing in the design.

4. Flattening and Merging

Flattening layers may at times be necessary. Combine multiple layered elements into a single layer. This way, you will eliminate guesswork on the part of the developer as to which layer goes with another. Give the developer a clear road map and merge layers that do not require his editing. Avoid the possibility of design elements being altered during slicing.

5. Fonts

This is how book printing fonts look like. This is not how to do it on the Internet.

Leave web fonts as editable text, use pixel sizing instead of font sizes. Do not use kerning in editable text, and avoid kerning for individual letters. Working with fonts for web design is not the same as working with them when creating a Word document.

6. Images

It will help the developer if you optimize your images to reduce their file sizes. It is usually possible to significantly, even drastically, reduce image file sizes. The end result – faster page load times and the best possible UI.

7. Layers

Make an extra effort to organize layers by naming them, as well as the layer groups. It makes it easier for everyone if you stick to a standard naming convention, or one commonly used in your work environment. Create a Photoshop file folder structure or establish a project template.

Why Mockups Will Make Your Life Easier & Help the Coder

Once the design files are ready to be submitted together with your requirements, you can give yourself a reality check. Submit a mockup that you have created with the developer’s work in mind. You will do the developer a huge favor by doing so.

Mockups are like love letters to your developer.

Those who work for remote coding agencies are typically extremely talented coders. It can however be a mistake to assume that if you can think of a design, it can be easily transferrable to code. Even when that code represents the latest version of HTML5 and CSS3. Keep that in mind as you create your wireframe/prototype.

  • Inner page graphics should be sized in the mockup exactly as you want them to appear in the deliverable. When a set of icons you choose is unique to a given inner page, create a separate mockup for that page. This will avoid any confusion on the part of the developer.
  • Another useful tactic is to export icons, favicons, animated headers, etc., as separate files. This enables the developer to access the icon images and page designs as if they were reference material.
  • Testing the interactions before coding takes place will save everyone concerned time and trouble.

In this stage, all interactions should be smooth and natural.

Giving yourself a reality check by means of prototyping includes testing the interactions. This approach is much better than testing during coding. High-fidelity prototypes are best of course, but even low-fidelity versions can be used to show how the project should work. These will give developers something to base their feedback on.

Responsiveness Requires Giving Extra Attention to the Designs

Mockups help the connection between the creativity of the designer and the developer’s logic. This connection can be a complex one, and particularly difficult to make when responsiveness is an issue. Start with mobile displays first, by creating mockups for each of the screen sizes.

Consider all screen sizes, and not just Apple devices.

Since not all design elements change the same way on different landscapes, you need to ask yourself the following questions:

  • Are logos, icons, or graphics apt to change in size or location?
  • What about font size and line height?
  • Will the navigation system that functions properly on a larger screen? Will itfunction the same, or adequately, on a smaller display?
  • Will sidebars and footer content remain visible? Will they be only partially visible? Or be completely absent on smaller screens?

Start with the smallest screens and scale up to the largest. Incorporate the basic elements first, and add other elements as you progress.

How to Make Certain You Find the Best Coders to Work With

You have seen the benefits of working with a remote coding agency. You have also be shown the steps you need to take to ensure that you and the coders are on the same page throughout the duration of the project. How then, do you decide which agency would best fulfill your needs? Here is some advice:

  • Review and analyze the agency’s portfolio. Make certain the services offered match the services you need: front end and back end development, WordPress and Javascript development, e-mail, eCommerce, and so on.
  • Look into the history of the company. How long it has been in business? What is the number of clients it has served? If possible, check out its largest or well known clients.

Xfive has 10 years of experience on the international market.

  • Testimonials. Look for testimonials that have some substance to them, and particularly for those that reflect well on the quality of the agency’s work.
  • Some agencies advertise flat rates, but there are often extras. Provide an outline of your project and ask for an estimation of a quote. Make comparisons with offers from 2 or 3 agencies.
  • Chemistry counts. You can often tell from the response to your initial query if you and the agency representative are on the same page. Don’t be hesitant to ask detailed questions. The answers you get can say a lot about how an agency works.

Your mindset should be that of expecting to work with a partner, and not merely a service provider. Xfive, with its 10 years of experience in the global marketplace, has what it takes to become not only your partner, but a brilliant partner. Xfive’s clients includes corporate giants like Fox, eBay, Twitter, and Microsoft.

To find out more about how this agency will treat you and your project, post them an overview or a few details about your project.

The post The Complete Guide to Working with Remote Developers appeared first on Speckyboy Design Magazine.

Source: Speckyboy

How to Take Full Advantage of Pre-Built Websites

You are most likely to be self-taught. You have a need and a desire to understand the best ways to create a good website, to keep up with design trends, and to take full advantage of the best tools available.

The “best” tools are those that can save you time, increase your productivity, and enhance the quality of your deliverables.

An excellent way to achieve these three objectives is take advantage of the benefits pre-built websites offer. Be Theme has a selection of more than 210 professionally-designed, pre-built websites.

  • Pre-built websites are simpler, faster, and better than wireframes. Given a preview of a homepage or landing page created from a pre-built website, your client will have a much better understanding of where you are heading.
  • You don’t need to waste time creating UX patterns. They are already incorporated into these pre-built websites. All that is required on your part is to customize and brand the content.
  • No coding is necessary. You don’t have to learn, or re-learn, web dev techniques to create beautiful designs and websites having awesome UX features.
  • Working with pre-built websites is an efficient use of your time. It’s a win-win situation. Your clients are pleased, and you can earn greater income.

Check Out These Beautiful Pre-Built Websites

This sampling of pre-built websites demonstrates the types of homepages and landing pages you can create with very little effort. All that is needed is some customizing on your part – a brief unique value proposition, a different image, or whatever you find of importance.

Be Music

In a word – Exuberance!

This pre-built website is designed for young, urban audiences. Features include a cool environment, a subtle use of parallax, and a card-like design.


Note the clean lines, and the focus on user experience. Definitely a website for a professional user.

Be Smarthome

The design is fresh and engaging. It invites the user to enter. This website features a smart, intuitive UX, and its overall concept is focused on simplicity.

Be Car

The hero image is particularly impressive and fully captures the concept behind the website. The yellow and grey colors are smooth and well used, and particularly so in the buttons, icons, and active links. The design makes an excellent use of white space.

Be Print


This website’s concept underlies the content, and illustrates how to attractively showcase a business’s portfolio and products.

Be App2

An example of how a simple, clear design can draw a user in, and how it focuses on presenting the app. Note the easy-to-browse structure.

Be Medic2

This pre-built website respects all the rules of web design for a health or professional medical care website. More than anything, the hero image and UVP communicates trust, and places extra emphasis on conversion.

Be Minimal

This minimal, trendy, pre-built website places a strong focus on the gallery. The combination of an excellent use of white space and a simple and intuitive design definitely reinforces the user’s experience.

Be Agency 2

This pre-built website tells you the agency takes a modern and fresh approach to what it does. White space is put to good use.

The Muffin Builder Takes the Effort Out of Editing a Pre-Built Website

You’ll enjoy working with Muffin Builder. The latest version, 3.0, features enhanced data transfer speed, easier navigation, and improved overall performance. T

This page builder now has a new, cleaner look for better readability. You’ll like the clear layout, the choice of graphics, and the light colors. Muffin Builder features a section called Wraps that enables the user to create more advanced content than most page builders are capable of.

Two other features, the enhanced search tool and tab navigation, make it easy to locate and put into play the design items you are looking for.

Muffin Builder nicely complements two other powerful Be Theme core features – the Shortcode Generator with its 200+ Shortcodes, and the Muffin Options (Admin) Panel.

Whether you begin with a pre-built website, the approach taken by most Be Theme users, or you choose to start from scratch using the Layout Generator, Muffin Builder will have you producing page after awesome page in no time.

Check out this videoto see just how fun and easy Muffin Builder is to work with, and all the customization possibilities it opens up for you. Starting with a blank canvas, you are immediately asked if you want to add some content, or use a pre-built website. Either way, you are off and running.

The Biggest WP Theme Ever Has a Lot to Offer

Be Theme is big in so many ways, with its more than 210 (and counting) pre-built websites, 40 powerful core features, including design options and design elements galore, and its enthusiastic 30,000+ user base.

  • You can import and install Be’s pre-built websites with a single click, and customize them using the options provided by the Admin Panel. 200+ Shortcodes allow you do build pages easy and quickly. There’s no need for coding.
  • Be is fully responsive and retina ready.
  • Special pre-built websites have been designed for eCommerce websites too. Products can be quickly uploaded, and the WooCommerce plugin can be installed in less than a minute
  • There are special pre-built websites for blogs, portfolios, and one page websites. Be Theme gives you a choice between boxed and wide layouts, single or dual sidebars or no sidebars at all, plus a set of useful widgets.
  • Two slider plugins, Slider Revolution and Layer Slider, accompany the Visual Composer, and WooCommerce plugins.
  • Among Be’s many options are flat, grid, and masonry formats for blogs and portfolios, 16 different Header styles, and a variety of Footer options.
  • Be Theme is optimized for speed, SEO ready, you will receive automatic updates, and the customer support is second to none.

The post How to Take Full Advantage of Pre-Built Websites appeared first on Speckyboy Design Magazine.

Source: Speckyboy