Friday, 30 November 2018

20 Stunning Matte Painting Tutorials

20 Stunning Matte Painting Tutorials

Traditionally, matte painting was a hyperrealistic art effect used in photography and film. This allowed photographers and filmmakers to create cityscapes, armies, and machines by painting directly onto glass or film. The same idea has translated to Photoshop, in which we can build worlds and landscapes using digital photo manipulation...

The post 20 Stunning Matte Painting Tutorials appeared first on Vandelay Design.

from Vandelay Design

The Best Online Portfolio Maker Websites for Web Developers

There are too many people in the world. Back in previous generations, when the population was logarithmically smaller,  it was far easier to get the attention of people. There were simply fewer people vying for attention. As any creative can well attest, the days of easy attention are far gone from us. Today, it requires a campaign of branding and publican in order to make yourself known to the correct people. Even outside of the creative industries, getting the attention of a potential employer is challenging. With the labor market as competitive as it is, you have to put on your best game in order to stand even a chance at a highly-desired position. Skill and experience simply aren’t enough anymore: you also need a stellar presentation. That’s where portfolio websites come into play.


If you are a web developer, you obviously have significant experience when it comes to building a website. And it’s probable that you could create your own personal website from scratch by following your normal client process with yourself as the patron. However, that takes time, and time is always in short supply. Using a portfolio template website saves an enormous amount of time, removing the need for design, coding, testing, revision, and constant maintenance. Instead, all those duties are shifted on to the portfolio website’s owner. This makes them an excellent solution for those who are short on time. It’s also a good fit for web developers that might excel in coding but aren’t as familiar with the visual design elements of the business. By getting a portfolio website, you can ensure that your design will be visually appealing and effective, as well as constantly maintained and updated on the backend. If you’re dying to get your hands on some code, many online portfolio maker websites also offer support for custom CSS. This way, you can modify the design to put your own personalized touch on your website, but you avoid the tedious work of actually building the website for yourself. It’s rather close to the best of both worlds, in fact.


Everyone creative, whether their a graphic designer, fashion designer, web developer, programmer, artist, model, photographer, freelancer, or student, needs a website. A template from online portfolio maker website Ning can get you well on the way to impressing future employers or customers. Like Squarespace, Ning’s design process is dead simple, with drag-and-drop tools and plenty of customization options. You can also inject your own custom CSS, Javascript, and HTML pages, so Ning is especially well-suited to web developers with only a little time on their hands. Ning also has the unique property of being keenly focused on social networking and monetization. This makes it easier to build a following and make money from your online presence by engaging diverse audience groups to generate revenue. This works through a messaging and forum service, as well as easy digital content sharing. Ning’s monetization options include paid access to premium content, a paid membership to the website, and user donations, along with the analytical tools to track them all.


If you’ve ever listened to a podcast, you’ve likely heard more about Squarespace than you feel you can stomach. At this point, surely you know how beautifully-designed their templates are, and how fitting there are for a wide variety of commercial and professional uses. It’s easily the most popular online portfolio maker, and you’ll find it in use on a huge array of custom websites. Surely this is a testament to Squarespace’s value as a portfolio maker website. Squarespace hosts the templates themselves, but you can easily link an existing domain or purchase a new domain directly through Squarespace. The system is fully compatible with Google Apps, providing back-end integration for email addresses if Squarespace provides your domain. The drag-and-drop design tools simplify the website building process to fool-proof levels, and more knowledgeable users can inject custom CSS to better style their pages. The platform supports blogs, online stores, galleries, and much more. Plans run $10/month which includes a free Squarespace domain.

You might be surprised to see Wix on this list. The website maker hasn’t always had the best reputation. But in the last several years, Wix has dramatically stepped up their game. Much like Domino’s successful revitalization, Wix has managed to ditch their old image as a buggy, limited application. Today, it’s one of the better-known portfolio websites, and it provides the largest degree of control among its competitors. You can work with the code as much as you like, and prepare a website that you find most appealing. While it’s not as easy to use as Ning, the customization options make Wix appealing to our needs.


For a web developer, Ning is an excellent choice. It features a strong mix of pre-existing templates and advanced editing tools, making it well suited to a web developer who doesn’t have time to build an entire portfolio website.

You might also like the following posts:

11 Christmas Gift Guide for Web Designers and Developers for 2018

CSS Variables: An Introduction, With Code Examples

Essential Elements for Blog Design

The post The Best Online Portfolio Maker Websites for Web Developers appeared first on SpyreStudios.

from SpyreStudios

Thursday, 29 November 2018

7 Tips for a Productive Morning Routine as a Designer

Let’s face it, sleep is sweeter in the morning. When you work as an independent designer, you have to be your own project manager. It comes naturally to be less strict with ourselves than we would be as someone else’s manager. It can take up to hours to actually start working on a project after you woke up. This is not the habit of a productive person. But even when you work in an office within an agency,  everybody needs a motivation to start working on that project. If you are here, it means that you want to improve your productivity in the morning, by changing your routine. We are glad to share with you some of the best methods that would help you do so. 


Before we get started, it is important to understand a few aspects of this journey you are starting off on. It takes 30 days for a person to stick to a new routine, 30 days in which you will struggle, it will be painful, but the result is totally worthy. The tips given below can be adapted to your routine, you don’t have to try to implement them all at once. Choose what suits you the best, and make sure you let us know in 30 days what it has been like. Off we go!


1. Set your mind on the change

At the beginning of any journey, you have to map out your way to the destination. In our case today, a productive morning routine. As a first step, write down the changes you want to make to your current morning routine. Consider these obstacles that prevent you from getting when you desire. Have you had enough of missed deadlines, angry clients, and unslept nights? These are all results of an inefficient morning routine. Decide that you want to end all these negative parts of your job, by setting your mind on the change. You might be very motivated now, but make sure you stay that way. Set reminders, write notes all over your home that you know would make you stay focused.

productive morning routine

2. Wake up early

You wake up. You don’t look at the clock. You take a shower, get some breakfast, read the mail, and when you are about to start working on a project you realize: it is 4:30 pm. Does it sound familiar? Unless you are a night owl, you start panicking at the thought that you won’t be able to finish work in time. It has been proven that people are much more productive in the morning than in any other part of the day. So why don’t take that fact and transform it into your morning routine? Set your alarm for 7 am the lastest. It will be hard at the beginning, but it will only take a couple of days until you are aware of the change. You’ll feel fresh, determined to finish work, and you will have a lot more spare time.

productive morning routine

Source: Pexels

3. Plan out your day

It only takes a few minutes to write down your schedule and the important activities of the day. Follow the example below:

  • Morning hygiene routine
  • A 30 minutes run
  • Healthy breakfast
  • A 60 minutes read
  • Check mail for any new projects
  • Start working on the current project
  • Take a 10 minutes break every hour
  • Enjoy the rest of the day off work
  • Go to bed relatively early

If you have a map of your day like the one above, it will make it much easier for you to actually do as you planned. A visual stimulus is much stronger than a mental one.

productive morning routine

4. Sleep

Not during your work program, of course. Sleep is vital for people who want to accomplish important things every day. It’s been estimated that an adult needs a 6 to 8 hours a sleep every night in order to function properly. The sooner you plan to wake up, the sooner you have to go to bed. The lack of sleep will lead to irritable moods, frustration, and incompetence to focus on your projects. As designers, our creativity can suffer majorly if we don’t rest enough for our brain to start over every morning. If you feel like you can’t fall asleep earlier than midnight, just put your phone down. The light of the screen will trick your brain into believing that it’s still daytime.


5. Help yourself by using technology

We are not robots, we can’t just switch a button and become productive in the morning. But we can for sure, use technology to our own benefit. Here are some devices/software created by talented designers.

  • Ruggie – a very smart alarm clock that won’t turn off until you stand up.

productive morning routine

  • Propeller – this device is perfect for those who love the snooze button too much. When your alarm goes off, a propeller bounces in the air around the room. The sound doesn’t stop until you catch the propeller and place it back in its base. By the time you manage to that, you won’t be sleepy anymore.

productive morning routine

6. Drink water

When you become more used to waking up early in the morning, you will notice that you don’t need to drink coffee anymore. In fact, when drinking coffee, you eliminate calcium, magnesium, and potassium which are vital for your energy. Drink water instead. Always have a glass of water next to you that you can sip from every now and then. Don’t keep it boring, but add some natural flavors to it. Get a water bottle like to one below, and have fun drinking water.

productive morning routine

7. Don’t

Ensure the success of your productive morning routine process by not doing the following things:

  • don’t tell about your decision to change your morning routine to everybody; you can share it with one person that already have a productive morning routine for encouragement, but stay away from negative opinions of the people who tried the same thing but failed.
  • don’t set unrealistic goals; wake up 30 minutes earlier, after 30 days of waking at 8, if you wish, but don’t try to wake up tomorrow at 5 o’clock. It won’t happen.
  • don’t give up when you fail; change means time, so don’t try to rush things.


We hope that these tips will work for you and that you will be willing to tell us how the change improved your productivity. Also, share with us other tips and ideas of how you managed to adopt a productive morning routine.


Read More at 7 Tips for a Productive Morning Routine as a Designer

from Web Design Ledger

A Comprehensive Collection of 2018 Christmas Freebies

Christmas Freebies

It’s just about that time of the year again. As Autumn winds down and comes to a close, people have only one thing on their mind.. Christmas! And what better way to spread the cheer with some christmas freebies? In this list, we’re going to go over not only some free Christmas fonts, but a few other goodies that’ll really have you feeling jolly. I can hear the sleigh bells now. Sit back, pour a nice glass of eggnog, and enjoy this comprehensive list of Christmas freebies!


We’re going to start this list off with a very important feature to any project you mind find yourself working on. Fonts can say a lot about anything you put them on. Whether it be greeting cards, invitations, typography on your website, or even a casual email, the right font can get anyone is a festive mood! Here are a few of our favorites this year:



Okay, I get that the Grinch isn’t exactly who you think about when you think of Christmas cheer, but he came around in the end. The Grinched font gives that classic Grinch look that we’re all so familiar with thanks to Dr. Suess.

Christmas Freebies

Santa’s Big Secret

Santa’s Big Secret font looks like the font Santa himself would use for the sign over his workshop. It’s fun and magical, perfect for Christmas.

Christmas Freebies

Christmas on Crack

Christmas on Crack may sound a little unorthodox, but it’s a great description nonetheless. This font reminds me of a more traditional, bohemian style christmas. It’s playful, yet not over the top.

Christmas Freebies


I think we all know the jingle by now. Frosty the Snowman has had a place in many Christmas loves across the world for years, and the Frosty font takes direct inspiration from it. The big, bold lines in this font remind me of a snowman themselves, and the playful, curvy lettering remind me of trails through the snow.

Christmas Freebies

The Gingerbread House

The Gingerbread House font is wild and pointy. The swirls and curves remind me of the frosting and candy you might attach to a real gingerbread house.

Christmas Freebies


Festival font is a great way to grab someone’s attention this Christmas. It’s big, bold, and beautiful – perfect for greeting cards!

Christmas Freebies

Merry Christmas Color Font

The Merry Christmas Color Font is a very traditional look for any of your projects. The red coloring really helps it pop and it screams merry Christmas!

Christmas Freebies


I can hear the piano starting to play now. Frozito is directly inspired by the popular disney movie “Frozen”. I’m sure you’ve all heard about it. No matter your age, the Frozito font is a great addition to your font collection.

Christmas Freebies

Nightmare Before Christmas

Although it may seem a little scary at first, The Nightmare Before Christmas has been a classic since its release. The Nightmare Before Christmas font pays great homage to the fan favorite.

Christmas Freebies

Christmas Miracle

The Christmas Miracle font is great for those moments when you want to be extra festive. The way the letters sparkle and come to life in front of your eyes remind me of a little Christmas magic.

Christmas Freebies


The category of icons is quite a big one. There are so many Christmas freebies out there, that it would be impossible not only for us to list them, but to choose favorites. So, what we’ll do instead is mention a few websites where you can browse and find the ones that fit your needs perfectly.



Flaticon ranks high on our list just because of the huge selection they have. In fact, there are over 14,000 free icons you can go and download right now!

Christmas Freebies


Freepik, as the name suggests, is a great place to find free vector icons for your next Christmas project. They has thousands to choose from, and more are added all the time!

Christmas Freebies


Christmas Freebies

If you’re ever in need of an icon, Christmas themed or not, Iconfinder is a great resource for doing just that. But, while we’re on the subject of Christmas icons, they have thousands and thousands of icons to choose from.


What better way to set the Christmas mood than to have a festive background on your computer? Not everyone gets to travel for Christmas, so being able to get perfect views even from your desk is a must for this time of the year. With that in mind, here are a few of our favorites:


Merry & Bright

The Merry and Bright wallpaper was designed to be simple and festive. Because of the white outline, your focus immediately centers to the bright red ornament dangling in the middle.

Christmas Freebies

Christmas Volcano

Christmas is about giving. Although you should avoid exploding volcanoes at all costs, you should keep the spirit alive with this Christmas Volcano.

Christmas Freebies

Merry Christmas Ornaments

This Merry Christmas Ornaments wallpaper is the perfect blend of retro and Christmas! It’s both mysterious and colorful and would make any desktop pop with the Christmas spirit.

Christmas Freebies

Reindeer Love

The Reindeer love wallpaper is the perfect reminder to spend time with loved ones this season. It’s sweet and simple.

Christmas Freebies

We hope you enjoyed this list of Christmas freebies. If you enjoy lists like this, and want to stay up to date with everything in the design world, then be sure to check in with Webdesignledger daily for all the creative content you’ll ever need.

Read More at A Comprehensive Collection of 2018 Christmas Freebies

from Web Design Ledger

Wednesday, 28 November 2018

How to Pick the Best Prototyping Tool for Every Project

“If a picture is worth 1000 words, a prototype is worth 1000 meetings.” – David Kelley, Founder IDEO

Every prototyping tool has its own particular strengths and weaknesses. Without having tried them all, it’s hard to know which are the best for your needs. Most articles tend to just list many different tools and make you do the work to decide which one you should choose. Not very helpful! Instead, in this article, we discuss a range of different scenarios and how choosing the right prototyping tool for each scenario. Read on and find out how to communicate your ideas in the most effective way!

Prototyping evolved as a means for designers to show off concepts cheaply to a wide audience of consumers. Since then it has progressed to allow communication between any two teams or groups. Each conversation needs a different type of prototype and your choice will depend on a number of factors:

  • Your goals (what do you want to achieve?)
  • Your audience (who are you talking to?)
  • Your team (where are their strengths?)

What are the goals of the project?

The objectives of any prototyping project will vary significantly. Prototypes can help in a wide range of different scenarios – from pitching a quick idea to a developer,  to gathering user feedback, winning approval for a proof of concept or pitching fully fleshed out design to senior management. Before you begin a project you will need to decide which of these are the primary objective of the project.

Each goal will have different timeframes and quality standards that are expected. Finishing a wireframe for a startup weekend is totally different to spending a month on a detailed user flow including all the error cases. These will restrict or guide how you approach the project. The first decision you must make therefore is to understand what your goal is and how long you have to achieve it.

Who is the audience for the project?

It is important to be aware who your audience is when designing a prototype. Getting your idea across to a designer is very different from communicating with developers or getting feedback from users. In some cases, interviewing users may be a big goal for your prototype (if so, see our article on interviewing users). If you are a startup which is not yet live then you may be aiming your prototype at potential investors. Obviously, there will be an overlap. Each of these factors are key to deciding on what tool you will use.

What are the strengths of your team?

Looking at the strengths of your team will help you decide which tools will work best for you. If you work with or are a professional designer then you will probably already be familiar with tools like Illustrator or Sketch. You can probably start with graphics from those tools which can be uploaded to create a clickable prototype. If you do not have a designer on the team, then choosing a tool with built-in component libraries can help you design a good looking prototype without too many design skills. Either way, the more representative the prototype is, the better the feedback you will get.

So how do I pick the right tool?

To conclude, let’s look at some example  projects and which tool would be best suited to each:

Fast and friendly: Pitching an idea (hackathon, startup weekend, accelerator)

I spend a lot of time mentoring startups and product teams and I’ve found that one major obstacle that trips up a lot of early-stage teams is detail. Here, you must getting bogged down in questions that should be put off till later. Sure, you need to give some thought to branding or UI design. But, the objective is to be able to pitch your idea to a group of strangers in 90 seconds. You could, and many startups do, just work on an elevator pitch. However, you don’t have much time and you need to get the basic concept across. In this case, a simple prototype with a few screens that look good that allow you to communicate a single concept well is the best outcome.

You want a tool that is easy to use and which will help you to pitch your idea. You could use a tool like Justinmind or which is fast and easy to use but Fluid UI wins out with its broader range of built-in libraries and the ability to show off a mobile app on your phone with no code needed.

Selling an idea (investor/ co-founder/ first hire)

If you have already pitched your idea and have some interest, the challenge becomes to show something that will get people excited about what you are doing. For this stage, you need to have a prototype that impresses people but doesn’t take weeks to build. Justinmind, and FLuid UI remain good choices here, but if you are looking more even greater interactivity in your prototypes, then tools such as UXPin or Axure will be options.

User testing

If you are prototyping for the purpose of user testing, then you will need to be able to communicate quickly and easily with users. You will also need to be able to gather feedback from those users. It is also important to be able to place your prototype in the hands of those users so that the feedback is relevant and specific and will provide data which you can then implement at the next stage of the process. Online tools which are strong in terms of sharing ideas and gathering feedback are a good fit for this type of project. Invision,, Fluid UI and UXPin all fit in this category.

Doing production design for developers

If you need pixel perfect looking designs, is the most popular tool on Mac,  but it is a tool with a very steep learning curve and you have to be a designer to get the most out of it. If you are going to turn your images into a clickable prototype then you will need a second tool too. There are a few choices at this stage with tools such as Invision, Marvel and Mockplus all offering Sketch integrations. The downside is that you may need to pay for them too. Other design tools include Invision Studio, Adobe XD, Illustrator and Photoshop.

Zeplin is also worth mentioning as a good tool for this type of project as it generates animations,  specs, assets and code snippets from designs and allows the designer and the developer to communicate effectively.


There are a lot of options to choose from when you are selecting a prototyping tool. Hopefully, this article has helped you to ask the right questions so you can understand what type of tool best suits your needs. Once you know this, picking the right tool becomes a lot easier. Thanks for reading, would love to hear any feedback on Twitter!

Author Bio

Dave Kearney is the founder of Fluid UI, where he shares a passion for bringing designers and developers closer to the users they serve. His collected writings can be found on the Fluid UI blog.

The post How to Pick the Best Prototyping Tool for Every Project appeared first on SpyreStudios.

from SpyreStudios

How Graphic Designers Can Work With Web Designers

Graphic design and web desig overlap a lot in the modern marketing world. For this reason, it can be challenging for graphic designers to showcase their value apart from larger web design agencies. On the other hand, graphic designers may not be able to identify why they should work with a web designer for their core business purposes.

Whether you’re pairing with a web designer for a client project or looking at the benefits of boosting your business, here’s how graphic designers can work with web designers.

Content is Multifaceted

Regardless of the size of your business or the resources you have available, it’s important to have content online to showcase your business. Even businesses who lack the resources to have a large scale digital marketing plan should take the time to put content – be it regular blog posts or infographics – online. However, there’s a learning curve to comprehend the various facets of sharing content.

There are plenty of businesses that handle one part of digital marketing well while other areas fall behind. According to the experts at Hook Agency, this is because “they haven’t practiced the art of creating in-depth content but concealing it in a way that makes the site look stylish, but so that it can rank higher in Google results.”

Graphic designers can create incredible, eye-catching content to promote their own business or help a client extend their reach. Web designers with digital marketing experience can ensure that the content reaches the audience more effectively.

Identifying Points of Convergence

When working on a client project with a web designer, it’s essential that you identify the points that overlap. For example, if your client hires both you and a web designer, you may find that they have someone who handles graphics. It’s important to have a meeting with the agency and your client to get on the same page about who will be handling what.

For example, if your client wants both you and the web designer to work on a new website design, create a project management plan with assigned tasks and due dates to remove ambiguity.

Tools of the Trade

Dgital marketing savvy web designers often cover a broad range of offerings, from basic web design to SEO to graphics. As such, they will also have to allocate their investments across the board to create a diverse toolbox.

What does this mean for a graphic designer? There’s a good chance that your tools and expertise will surpass those of the web designer with which you are working. However, if you’re trying to scale up your graphic design business, a web designer will have access to tools you won’t.

The tools that assist with digital marketing efforts, such as a keyword research tool, has a learning curve. Learning how to use the tools will also take up additional time and focus that detracts from your core business strategy. These could be redirected toward your daily operations and big picture projects. This is known as your opportunity cost – the perceived value of choosing to spend your time doing one thing over another.

Aesthetic Meets Functionality

Web designers often prioritize functionality over aesthetics. Web designers are often restricted by their programming responsibilities. For graphic designers, the problem goes the other way. Artistry can often override the end goal and result in a website that looks good but doesn’t encourage a customer to spend money.

By coming together, a web designer and graphic designer can bolster one another by providing context. You may choose to hire a web designer to expand your graphic design business while handling the imagery and aesthetic. The web designer will be able to give you customer insights to help direct your creative process based on analytics and customize your code.

Graphic designers should work with web designers strategically to improve a business’s reach and effectiveness, whether that business is a client’s or their own.

The post How Graphic Designers Can Work With Web Designers appeared first on SpyreStudios.

from SpyreStudios