Adobe Illustrator is almost as important to web designers and creative professionals as Photoshop. For some, it is even more essential. Most of the veterans probably have every keyboard shortcut memorized, but when you’re getting started it can take quite a while to really get the shortcuts down. Thankfully, the folks at ZeroLag put together a cheat sheet so you can always quickly find the shortcut you need. Before long, you’ll know them like the back of your hand.
Before you can use the cheat sheet, you’ll need the key to understand the image. The grey text show Adobe Illustrator tool shortcuts, while the orange text stands for an action shortcut. The tool shortcuts only require you to press the corresponding key. The orange shortcuts require you to hold the Command key, then press the action shortcut indicated by the orange text.
There are also a multitude of shortcuts not shown directly on the keyboard. Some are listed below on the graphic, but over time you’ll find even more that wouldn’t fit. They are usually found through a combination of the Command or Shift button and a specific letter key.
It can seem overwhelming trying to commit all of these shortcuts to memory, but the ones you use regularly become second nature extremely quickly. For all the others, you’ll save more time by checking the cheat sheet rather than searching through all the menus in the program.
00TMOhttps://www.tulsamarketingonline.com/wp-content/uploads/2018/07/TMO-Logo.pngTMO2013-08-12 11:45:462013-08-12 11:45:46Adobe Illustrator Cheat Sheet Saves You Time
Colors do more than most people give them credit for. In web design, they aren’t just physically helping define a page. They can set a mood, establish trust, excite viewers, and define your brand. Colors can help a company secure their professional image or severely damage it. Colors can be out of date, and they can be hip or trendy.
Red is a color with perhaps the strongest associations, possibly because it is such a bright, attention grabbing color. It is such a dominant color, it seems to always be extroverts favorite color.
These associations tend to be dramatic connections. Red is normally associated with passion, danger, sacrifice, blood, passion, fire, beauty, and anger. In contrast, in many cultures the color is associated with happiness and love.
Because of these dramatic associations, red is one of the most powerful colors for expressing moods or grabbing attention in all types of media. It encourages appetite, inspires activity, and evokes emotion all depending on the shade used. Pale shades like pink can be soft and feminine, while pure bright reds can be harsh, aggressive, and overbearing. Meanwhile, deep dark shades of red like crimson can evoke warmth and comfort or creepy sinister vibes.
As you can see, red is one of the most versatile colors on the spectrum. If you can choose the right shade for your design, you can create heightened emotion and attention with ease. Or, you can pair it with white and black to create a formal, professional perception.
Due to its incredible versatility red is obviously a popular color on the web and in all other kinds of design. Onextra Pixel has a showcase of websites using red in many different ways to portray a huge variety of moods and emotions.
00TMOhttps://www.tulsamarketingonline.com/wp-content/uploads/2018/07/TMO-Logo.pngTMO2013-08-08 12:49:252013-08-08 12:49:25What Does Red Mean in Web Design?
Flat design has officially become commonplace, but it is hard to tell how long its offspring, long shadow design, will last. At first glance, it seemed long shadow design would just be a small isolated derivative from the popular flat style, but it seems to have taken on a life of its own by providing a sense of depth while still maintaining a flat and minimal aesthetic.
For those who have yet to run into the style, it is characterized by appearing largely similar to flat design, but with a 45 degree angle that extends much further than any standard dropshadow would. Onextra Pixel estimates the shadow is around 2.5 times the size of the object normally.
If you want proof of long shadow design’s spread through the web design community, look no further than the number of free resources being released to make implementation quick and easy. Onextra Pixel has highlighted two over the past week alone, and there are many more included in theirs and other sites’ weekly round-ups of resources.
The first resource is a simple set of icons created by Christopher Behr that cover all you basic needs from music, settings, messaging, mail, and social media icons. They are all clearly inspired by the Apple icon style, while bringing long shadow aesthetics to the table.
The other free offering comes from a Bucharest based design and development studio called Responsive. They are giving away a complete long shadow flat UI kit which will make development a breeze.
Who knows if long shadow design is going to pass out of favor in the coming months, but it is currently riding high on the back of flat design. It certainly offers a solution to flat design’s complete rejection of depth while still providing a sleek and clean design.
00TMOhttps://www.tulsamarketingonline.com/wp-content/uploads/2018/07/TMO-Logo.pngTMO2013-08-06 14:39:102013-08-06 14:39:10Long Shadow Design Resources Make The Trend Easy To Implement
Navigation has always been one of the most important aspects of a website’s design. If you can’t move throughout the site, chances are you won’t use it. However, navigation is also one of the few site design aspects with no tried and true solution. What might be right for me, may not be right for you.
Of course, there are some pretty good criteria you can use to judge what type of navigation you need. A small site can get by with a simple drop-down menu or the basic “three line” toggle menu. Larger sites have a much trickier task. They can use “mega menus” for their desktop version, but they will need another option for the mobile site.
Thankfully, most menus aren’t created from the ground up, so you can experiment fairly easily. Paul Andrew from Speckyboy compiled 15 jQuery plugins for navigation. They’re even responsive. Once you’ve found the one that matches the needs of your site, you can customize it and make it truly feel like a part of your website.
Every brand with a reasonable web presence should be aware of the importance of making your content accessible to the legions of smartphone wielding consumers out there. Nearly everyone has a smartphone now, and mobile web use shows absolutely no signs of slowing down.
But, “going mobile” isn’t exactly an exact science. There are many options for a mobile strategy with pros and cons for each. Of course, at this point the most popular options are building responsively, building a mobile only site, or building a mobile app.
Responsive design takes a bit of a one-size-fits-all approach and relies on the assumption that everyone wants to interact with your content in the same manner, but mobile sites split traffic and create numerous logistical issues. Building a mobile app on the other hand can be an incredible part in establishing yourself on the mobile web, but it simply can’t replace having an actual website.
So how do you decide what approach to take? For most brands, I personally would suggest an approach combining responsive websites and a mobile app, but many companies don’t have the resources to do both as well as they need to be done. That’s when it becomes decision time. To help make the decision, the folks at Web Designer Depot put together an infographic (seen below) to show the facts about mobile design, and going into more detail about the benefits and drawbacks.
00TMOhttps://www.tulsamarketingonline.com/wp-content/uploads/2018/07/TMO-Logo.pngTMO2013-08-02 11:08:182013-08-02 11:08:18How Do You Choose The Right Mobile Solution For You?
Everyone working in SEO knows that Google has a multitude of factors they use to determine the order of search engine results, and the majority of these ranking factors are based on either the content of the webpage or signs of authenticity or reputability. That was the case for the longest time, but since 2010, Google has made significant shifts towards a focus on usability, and the harbinger of this change was the inclusion of website speed to ranking factors.
The problem is, website speed and other usability issues aren’t exactly objectively defined. What exactly is a slow loading site? What is the cutoff? No one has gotten a definitive answer from Google, but in June Matt Cutts explicitly stated that slow loading sites, especially on mobile platforms will begin seeing search rank penalties soon.
Obviously these changes are good for searchers. Searchers want sites that load quickly, offer quality user experience, and deliver great content. And, the emphasis on speed is certainly highlighted on mobile platforms where on-the-go users are likely to go back to the results if the site takes too long for their liking. The issue we face as search optimization professionals is trying to figure out exactly what Google is measuring and how that information is being used.
Matt Peters from Moz decided to break through Google’s intentionally vague information to figure out exactly how site speed affects rankings with the help of Zoompf. They can’t explicitly disprove causation between site speed and rankings, due to the number of other algorithmic ranking factors that complicate the study. But, their results did show very little to no correlation between page load time and ranking.
I wouldn’t take this information as gospel, but it does suggest that loading time isn’t a huge consideration into long tail searches and doesn’t need to be worried about too much. If your site is loading quickly enough to please the people coming to it, your site will also likely pass Google’s expectations.
00TMOhttps://www.tulsamarketingonline.com/wp-content/uploads/2018/07/TMO-Logo.pngTMO2013-08-01 11:13:562013-08-01 11:13:56How Does Site Speed Really Affect Search Rankings?
It is a little ironic that most web designers hate coding. We’re all familiar with it, and we’ve all spent sleepless night chugging coffee and endlessly editing code until we feel like we’ve lost touch with reality. But, the best coders realized the entire process can be simplified and sped up with all the free tools available online.
Web Design Ledger created a “cheat sheet” of tools and resources designers can use to cut through the fog of coding. You’ll never be able to completely escape coding, but you can at least make it as painless as possible.
Code Editors
One of the main tools any designer should already have is a code editor such as Sublime Text 2. Back in the dark days of coding, many designers were forced to create Notepad files that seemed to endlessly drag on as they were filled with line upon line of code, but no one should know that pain in these days. Code editors can help you quickly jump between the tags you want to work on, and best of all, they highlight problems in your code as you write. To anyone who has ever searched for hours trying to find the proverbial needle in the haystack, that alone is reason to find a new editor to use.
CSS Pre-Processors
CSS is notorious for spiraling into obscenely long and confusing script that becomes eventually unworkable. Sass (Syntactically Awesome Style Sheets) is a meta-language that can be put on top of the original CSS to clean up all that messy code and make it workable and lightweight again. If you combine Sass with Compass, an open-source CSS authoring framework, you can easily create responsive designs with cross-browser friendly scripts to keep everything simple.
Code for Humans
We all have to deal with our own code, but writing for yourself or entirely for machines can leave the code hard to understand when you come back to it later. If you get caught up using entirely your own coding style, colleagues may not be able to make sense of it all, but if you write exactly as computers read it, your code can become difficult to update and read. Instead, write in a way that will keep everything easy to find and understand, with small file names and consistent organization. You can use Codekit (Mac) or Mixture (Mac/Windows) to convert it all into computer-friendly language later.
Use GoMockingbird
Wireframing is one of the first steps designers go through when constructing a site and creates the entire foundation you will build the site upon. These foundations are also used to present site designs to clients, so using sketches and doodles is a bit too unprofessional of an option. Instead, GoMockingbird creates professional looking wireframes that can portray even the more tricky elements of a page to everyone who needs to approve the design. You can include widgets, sliders, check boxes, and even social buttons, so that clients get a clear and complete understanding of how their site will end up.
Conclusion
There are tons of other tools included in Nicola Allen’s cheat sheet over at WDL. The ones I highlighted here can make the biggest effect on the time spent slaving over code, but every shortcut helps. There are tools and resources for every design task, including creating Lorem Ipsum dummy text so that you don’t have to. If you want to design, but hate the long nights associated with coding, you’ll appreciate everything the cheat sheet offers.
00TMOhttps://www.tulsamarketingonline.com/wp-content/uploads/2018/07/TMO-Logo.pngTMO2013-07-29 15:30:312013-07-29 15:30:31Cut Down On Coding Time With a Design Cheat Sheet
There is a big push recently to ensure that websites are optimized for mobile devices, especially after Google has openly stated they plan to begin punishing sites that don’t properly accommodate mobile traffic.
There are really two solutions for making a site work great on smartphones. Designers can either create an entirely separate and unique version of their site specifically for mobile phone users to access, or they can choose the more popular responsive design solution which promises to “work on every device.” Both have their perks and drawbacks, but can lead to great smartphone internet experiences when done properly.
The devices everyone forgets to discuss are tablets. While we’re ensuring sites work wonderfully on smartphones and desktop devices, the normal solution is to simply direct tablets to the desktop version of the site and be done with it. While that may sound fine initially, it actually leads to sub-par experiences for a quickly growing market.
According to Mobify’s ebook Tablet Design Best Practices, over half a billion tablets are estimated to be shipped in 2013 and 2014 combined, and that number could end up being higher as prices drop and new options become available. Not only that, tablet users continuously show remarkably high quality of traffic and are more earnest to make bigger purchases than smartphone or desktop users.
If you aren’t optimizing sites for tablet users, you are leaving quality traffic and willing consumers to mediocre experiences that can lead them to take their business elsewhere.
Designing sites that work well on tablets doesn’t require much more time than ensuring you are also delivering a quality smartphone internet experience, and often builds on the same responsive or adaptive framework. Most desktop sites do in fact work on tablets, so long as they aren’t overloaded with Flash, but they become frustrating to use. Buttons are too small or scrunched together, text becomes tiny, and images can become pixelated messes when viewed on the high pixel density screens that are becoming standard.
If you want to create a site that will actually excite and draw in tablet users, you can choose to minorly alter your desktop site with small adaptive enhancements and basic media queries, or you can strip your site down to its basics and rebuild a tablet option that creates a uniquely usable site.
For companies without a lot of resources to spend on creating multiple versions of their sites, improving your desktop site to make it enjoyable for tablet users is often the best option. It can be as simple as making buttons a bit bigger and incorporating the zooming and pinching that tablet users are constantly doing. Text also has to be bigger, but that can be easily solved by increasing font sized to 16 pt minimum. But, there are even smaller changes you can make that can make the site easier to use.
Typing on tablets can be incredibly difficult without any tactile response and overzealous autocorrect, but it isn’t difficult to make your site light on text input or create shortcuts that will save the fingers some effort. It is also a snap to enable contextual keyboards with some simple code adjustments.
But, webmasters who want to really engage tablet users and have the resources to do so can find huge benefits from going above and beyond, taking the basic structure and layout of their site and remixing it with adaptive frameworks to really make the site tablet friendly. It is entirely possible to create an adaptive tablet site without even changing the desktop site, and you rarely have to create entirely new elements for the site. It is more about using the elements you have on your site in new ways.
For example, sites with tons of images can make it so that these high quality images can be pinched and zoomed endlessly, while the rest of the page maintains its original size and clarity. You can also re-imagine your navigation for your site to fit how visitors will be using your site. Similarly, you can attempt to replicate the app style on your website with smooth transitions and panel menus hidden away, but always available at the tap of a button or swipe of a finger.
It is hard to suggest specific techniques for creating great adaptive tablet websites that go beyond simply editing your original desktop page, but that only goes to show how slowly the internet is adapting to one of its most fruitful markets. There are massive opportunities for us to completely redesign the tablet experience for the people actually using them, but designers can be stunted by the need to work for multiple clients, limited resources, and general willingness to rest on “acceptable” sites rather than truly exciting experiences.
Hopefully, as businesses recognize the potential of the market, designers can begin to truly explore the potential for design on these great devices.
00TMOhttps://www.tulsamarketingonline.com/wp-content/uploads/2018/07/TMO-Logo.pngTMO2013-07-25 10:35:082013-07-25 10:35:08Why Aren’t We Talking About Design For Tablets?
For the past decade or more, Adobe and Photoshop have been staples in the vocabulary of any designer. Adobe has been by our side constantly upgrading, and draining our wallets, but not really causing much of a stir. Not even the Flash vs. Apple conflict really shook the boat that much.
Simply put, Photoshop and its partners in the Creative Suite have been the go-to applications for a huge number of the people working in web development, photography, design, and video.
With their latest new release however, that all could change.
As you may have heard, Adobe has decided to stop releasing physical software in favor of a move to a cloud-based subscription service called Creative Cloud. What you might not have heard is that there is already a petition signed by over 37,000 angry people begging Adobe to abandon their plans.
The move to the Creative Cloud would mean that Adobe would drop all support for older versions of their software, specifically the Creative Suite (They will continue to add support for CS6 for now). However, the Creative Cloud would function essentially the same as the old software. It won’t be a set of web apps, and you will still have to download and install the software to your hard drive. But, all your files and data will be in sync across multiple computers and devices.
The monthly subscription service will be $29.99 for existing CS customers, and $49.99 for new users. But, you could also buy just a single program for $19.99 a month each. For that price, you’ll also get 20GB of cloud storage.
Basically, Adobe has found a way to attack piracy and increase their profits by making users continuously pay for the software and not distribute or manufacture physical objects. And that is why users are upset. While the subscription fee is obviously a fair deal lower than the cumulative price we payed for previous releases, over time this means Creative Cloud will be much more expensive than ever before.
It also creates a new (more expensive) option for all other design software companies to follow. Adobe has always been the trendsetter in this area and it is likely even the alternatives spurned Photoshop users turn to will eventually follow suite. Or, this could be the end of Adobe as the gold standard. As Corey Siegel from Design Instruct puts it, this is Adobe’s “all in” bet.
00TMOhttps://www.tulsamarketingonline.com/wp-content/uploads/2018/07/TMO-Logo.pngTMO2013-07-23 14:08:332013-07-23 14:08:33Why Are Designers Upset About Creative Cloud
Gathering inspiration is the first step of almost every design job, and those of us really invested in design are doing it constantly. We take inspiration from signs in store fronts, billboards, other websites, nature, photography, videos, and everywhere else we can. We are literally surrounded by inspiration at all times, which we then filter through our own tastes, skills, and preferences to deliver our take on what inspires us.
Those innate preferences can have a big effect on what we turn in. Some designers are drawn to grungy, dark looks, while others like the sleek modernism that results from a mix of 70’s sci-fi design and current modern art sensibilities. Others opt to go an entirely different direction, directly playing with retro styles and designs.
Normally, we take these inspirations from the world around us and apply them to the screen. Even as skeuomorphism is dissipating as the leading design style practice, we use our environment and the images we’re exposed to for our designs. It doesn’t have to be linear. Even flat, minimalistic designs can be inspired by the colors of nature or the mood of a relaxed summer day.
But, what happens when you take inspiration from graphic and web design and apply it to real life? We obviously can’t put a filter on a bike ride or sunset (though good sunglasses can come close), but architectural design often incorporates graphic inspiration into physical objects and environments which can make you feel as if you’ve stepped directly into a design style.
Speckyboy contributor Victor Balasa took this idea and collected several buildings and architectural designs that portray real-life versions of web design styles we play with every day. There are grungy interiors that portray the gritty hardline style of grunge web design without sacrificing class, and even the “paper fanatic” style you would never imagine could come to life. If you ever wanted to know what the world could look like if it was styled by grahic designers, these images can give you a pretty interesting depiction.
00TMOhttps://www.tulsamarketingonline.com/wp-content/uploads/2018/07/TMO-Logo.pngTMO2013-07-22 14:21:432013-07-22 14:21:43Design Styles Brought To Life
