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.
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:
The post The Best Online Portfolio Maker Websites for Web Developers appeared first on SpyreStudios.
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!
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.
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.
Source: Pexels
It only takes a few minutes to write down your schedule and the important activities of the day. Follow the example below:
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.
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.
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.
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.
Ensure the success of your productive morning routine process by not doing the following 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
“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:
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.
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.
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.
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 wireframe.cc 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.
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, wireframe.cc 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.
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, Proto.io, Fluid UI and UXPin all fit in this category.
If you need pixel perfect looking designs, sketchapp.com 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.
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.
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.
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.
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.
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.
CSS variables, also known as CSS custom properties, expand the script-like functionality of CSS into something that resembles a programming language. If you’re at all familiar with any type of programming language, you know that variables are the foundation of any action. Variables are set, compared, altered, and saved throughout the program as the means of its functionality. And while the addition of variables to CSS hardly makes it into Swift or C++, but it’s a step in that kind of direction.
Despite leaning towards a programming language, CSS seems reluctant to give the programmer full flexibility with these variables. They’re similar to local variables within a scripting language, mostly just expanding your overall reach without fundamentally changing the language’s paradigm.
Essentially, CSS variables allow you to set a property once and then reuse it throughout your stylesheet. For example, you can have a variable called --brand_color which specifies HEX, RGB, or HSL values for your client’s branded red color. Then, you can grab that variable whenever you want that color just by referencing the variable name. If you’re unfamiliar with how variables work, you can imagine this functionality like “find and replace” in Word. Every time the CSS processor encounters a variable name, it takes the associated property from the variable declaration and replaces the variable’s name with that property. It’s essentially a shortcut to grabbing more complicated properties. If you’ve ever worked with CSS pre-processors, you’ll recognize that these are basically the variable-like functionality of pre-processors like Less and Sass imported into the main branch of the CSS language.
The variable name must begin with two hyphens (–) and is case sensitive. There aren’t any other rules about syntax, but in general, avoiding spaces is a good idea.
The following CSS rule declares a custom property of global scope named --main-color, It has a value of the HEX color code #abcdef:
:root {
--main-color: #abcdef;
}
To declare a variable in CSS, you need to start by specifying the scope of the variable. Global variables apply at the root level of the DOM, while more specific variables are associated with only their attached selector. Variables with any scope follow the same cascading priority rules of the rest of CSS. Essentially, the more specific the selector, the higher-priority the associated property. Classes are more specific than element categories, which are more specific than the parent selector :root. Variables are declared within a CSS selector that defines its scope.
For global variables, there are the :root or body selector.
:root {
--backgroud-color: white;
}
body {
--background-color: green;
}
These variables both have the same effective scope. The variables below, on the other hand, have an ever-narrowing scope.
:root { --color: #abc; }
span { --color: 130, 10, 150; }
.class { --color: #123; }
When the variable is called, it returns the value you supplied when initializing the variable. As what amounts to a typing shortcut, it basically replaces its own name with the values assigned to it at runtime. This permits us to also slot in different properties in different places, but draw from a palette of settings selected at the beginning of your design. As a result, you can more easily achieve consistency across a design. And, perhaps best of all, you can effectively mass-edit properties. By changing the initialized value of the variable, you’ll change the properties applied to any of the elements with that variable. You might think of it as changing a “theme” of the design rather than a single property.
We’ve used colors so far in our examples, but CSS variables can be used to call the values for any properties, including padding, size, and other properties.
You can also use the “find and replace” function of variables to include your variable’s value inside of the rest of a property declaration. For example,if you only specify the rgb channels in your rgba() color codes, you can then add the desired alpha value in context. This process is described below:
:root {
--main-color:240, 0, 25;
}
#foo {
color: var(--main-color);
}
If you want to specify an alpha channel for your RGB and HSL colors only on certain elements, you can tack the alpha channel on from within the variable recall. You can see this in action below:
:root {
--brand_color: 240, 5, 52;
}
#foo {
color: rgba(var(--brand-color), 0.5);
}
Variables can take the placeholder for just about any property. For example, the following example uses variables for both color and padding.
<head>
:root {
--default-pad: .5em, 1em;
--my-color: #121212;
}
.pad {
padding: var(--default-pad);
}
.mycolor {
color: var(--my-color);
}
</head>
<body>
<div class="pad">
<h2 class="pad">same padding as parent div</h2>
<p class="mycolor">this text is colored by --my-color</p>
</div>
</body>
Here, the div and h2 elements both use the same padding, while the paragraph sets the text color from a different variable.
CSS variables are most useful when you’re declaring a set of default properties at the top of your style sheets. They’re great for building and altering important design elements in a unified way, or for allowing users to specify certain colors without a design for interaction with HTML5 and CSS3 alone. As of publication, CSS variables are supported by all major browsers except for IE 11 (but Edge does provide support).
You also might like the following posts:
The post CSS Variables: An Introduction, With Code Examples appeared first on SpyreStudios.