Omaha Web Design Agency

Contact 92 West for a FREE Estimate

Source link

Meet our Community Superstars for February

We’ve got three more community members who made a difference in the past month! Read on to see who stood out and made a positive impact!

Community Driven Graphics

Many thanks to GraphicExpert for creating the lovely graphics used throughout this month’s superstar announcement!

Each month we select a community submitted template and use it in our blog post. If you’d like to submit a template to show off your pixel prowess, see our Designed by the Community blog post! In exchange for your efforts we’ll give full credit in our superstar post and award you the Amazing Forum Superstar badge. Well done again, GraphicExpert! New badge unlocked!


Surjithctly really caught our eye this month with the release of his awesome Chrome Extension called Better Envato.

The extension, which offers useful utility for Envato Market authors, provides features such as desktop sales notifications, comment notifications, ability to display earnings in your own currency, and much more! In fact, there’s a forum thread dedicated to feedback and suggestions which surjithctly actively monitors, so swing-by and say “hi!” if you use or are planning to use the Better Envato Chrome extension!

If that wasn’t enough, surjithctly also took some time in the past week or so to offer some great suggestions for new community badges to serve our entire community, and he has also been a very positive influence in our forums as a whole lately with helpful answers to fellow members. Very well done, surjithctly!


Our next superstar is more than a star, he’s an Envato Market legend!

Hailing from South Africa, DigitalScience has been invested in Envato Market for almost 8 years and was one of our highest selling authors for many years during the heydey of Flash.

We’re acknowledging his contributions today because he’s quickly approaching an amazing 5,000 forum posts! What makes DigitalScience such a passionate community member that we truly appreciate is the fact that he cares enough not only to ask the right questions about ideas and new features/functionality, but he has often created screenshots and mockups to convey his ideas and thoughts.

His ideas, and love/desire to help improve Envato Market not only for his own journey but for all authors/buyers never goes unnoticed. We give you a digital salute, DS, and we thank you for your remarkable service to our community!


Finally, our community moderation team wanted to give a big thanks to SoundCity for helping report the influx of spam in our forums so that our moderators can quickly remove it. His quick, eagle-eyes have helped flag and report a huge amount of spam recently and it’s just another way that our community can work together to help make Envato Market a better place for all. Thank you so much for the time and effort you’ve spent reporting spam, SoundCity!

All our community superstars are awarded the Community Superstar badge. Well done to you all!

Help Nominate our Next Superstars!

If YOU would like to nominate a fellow community member or think that someone within the Envato Market community has really shone like a star recently, please let us know in the comments below! While you’re there, give our superstars for February a big high-five!

Omaha Web Design Agency

Contact 92 West for a FREE Estimate

Source link

How Being In A Band Taught Me To Be A Better Web Designer

Omaha Web Design

Recently, I was having a discussion with some web design students about the variety of skills a successful web professional must have — skills that go far beyond HTML, CSS, JavaScript and the other technical demands of the profession. During this conversation, one of the students asked me where I learned these skills. My response was not one the class expected.

“By playing in a band,” was my answer.

Now, I am not suggesting that all web designers should run out and join a rock and roll band (although there is a glaring shortage of songs about the CSS box model). I do know, however, that many of the skills I honed while playing in a band have contributed to my success as a web designer — as much as, if not more than, my ability to write clean code or design an attractive web page. In this article, I’ll describe how being in a band taught me to be a better web designer.

Speaking To The Audience

As a professional web designer, you are going to be required to speak in front of people. This includes clients and colleagues to whom you will need to present design concepts and explain your reasoning for the decisions you made in those concepts. If you’re afraid to speak in public, which many people are terrified of, then this is going to significantly limit your ability to communicate effectively in your job.

Being the frontman for a rock band, I had plenty of chances to speak to audiences. Many times I had to improvise and think on my feet if something went wrong on stage. This was perfect practice for presenting in front of clients and handling unexpected questions.

Jeremy on stage making a connection with the audience.

Being able to communicate clearly and confidently is one of the primary skills I look for when hiring web designers for my team. It’s also one of the skills ignored by many new web designers who are more focused on the technical aspects of the job.

Short of becoming a frontman or -woman in a band, how can you sharpen your presentation skills? Many colleges and universities have classes in public speaking that you can enroll in, even if you are not a full-time student at the school. You can also seek out industry meet-ups that allow you to get some experience presenting in front of your peers, or you can join an organization like Toastmasters International2, whose mission is to help create more confident public speakers.

Meeting The Fans

Throughout my career, my most consistent source for new customers has been referrals from existing clients. When I speak to those new clients, the number one reason for the referral has nothing to do with my grasp of responsive web design or some other piece of knowledge I possess — it is because I was enjoyable to work with and be around. This is something that also helped my band back when we were active.

My band was not the greatest in the world — far from it, in fact. Still, we had a dedicated following who came to all our shows, in some cases traveling significant distances to do so. Those fans made the trip to see us because we tried to make our shows fun and enjoyable by always being personable with them. We genuinely appreciated the support of our fans, and that was obvious in how we treated them.

Being gracious to your fans (or clients) is a great way to keep them coming back.3
Being gracious to your fans (or clients) is a great way to keep them coming back. (Image source4)

Your clients are awesome. They keep you in business. By showing them your appreciation and by making sure that you do great work for them, while also making the process of engaging with you for that work enjoyable, you do your part to build long-term client relationships5 that will help fuel your future success.

Tailoring Your Set To Your Audience

Whether you are rocking out onstage or presenting to clients in a conference room, you want to make an early connection with your audience. When my band would play shows, we would adjust our set list to the audience we were playing for. If a crowd was unfamiliar with our music, we would make sure to play a recognizable cover song early in that set to give the audience something they were familiar with right away. I now do the same thing in client presentations.

Before I meet with a client, I try to first schedule a call to ask some questions and get some insight into what I am walking into. You’d be amazed at the kind of inside information you can find out on these calls, including what is most important to that company. I can then use that information to tailor my presentation to address those important topics early on and make that all-important connection.

Different set lists for different shows is something every band uses. Similarly, learning how to prepare different presentations and approaches for different clients will allow you to hit the right notes in those conversations.

Time For Practice

My time playing in the band coincided with the early years of my career as a web designer. By default, I became my band’s webmaster and was responsible for designing, developing and also maintaining the various versions of the band’s site over the years. The practice I got doing this allowed me to try new things and experiment in ways that I was unable to with my client work at the time. Those experiments and practice taught me so much, helping me to grow as a web designer and eventually bring new skills back to the office and into my client work.

Designing and maintaining the band's website back in 2003 helped me get valuable web design experience.6
Designing and maintaining the band’s website back in 2003 helped me get valuable web design experience. (Large preview7)

Even if you are a seasoned web professional, side projects and work outside of your normal client responsibilities can play an important role in your career. Look at Dan Cederholm and what he helped to create with Dribbble8 or Elliot Jay Stocks and his 8 Faces9 publication. Side projects can not only give you a reprieve from your normal work, but in some cases those projects can become so fulfilling and successful, that they can become your normal work!

Even if a side project does not become a smashing success for you, the ability to challenge yourself in ways that would be inappropriate for paid client work is undeniably beneficial to you, regardless of what stage you are at in your web design career.

Making Friends In Other Bands

Many of the shows our band played, especially early on, were through friendships we had with people in other bands. Those bands would add us to the bill, giving us a chance to get some experience on stage and begin to build our own following of fans. In web design, this equates to the benefit of befriending other web designers and agencies.

If you work as a freelance web designer, making friends with other agencies can be a great source of work for you as those agencies may sometimes need to bring in extra help to handle certain projects.

Agency-to-agency relationships can also be greatly beneficial to all involved. Web design is an incredibly multifaceted profession, and there may be certain aspects of the job that your agency does not excel at. By partnering with other companies whose strengths complement your own, you can provide a more complete set of solutions to your clients and take on projects that you may otherwise have had to turn down.

Team Effort

Success in web design is often a group effort. While there are certainly lone designers who do the work all on their own (just like there are solo artists who play every instrument on their albums), learning to work with a team is a critical skill for many web professionals.

The band and friends rocking out on stage in 2003 and making music as a team.10
The band and friends rocking out on stage in 2003 and making music as a team.

Working well with others is not always easy. In a band, each member will have different opinions as to how a song should go, but if you do not work together and find ways to integrate those different points of view, then there can be no harmony. The same holds true in a web design setting. Designers, developers, content writers, project managers, and other team members must all work together towards a common goal: to create an amazing website.

In Summary

My time playing in a band is something I will always remember, in part because my experiences from that time helped me learn skills critical to my success as web designer today, including:

(il, og)


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10

The post How Being In A Band Taught Me To Be A Better Web Designer appeared first on Smashing Magazine.

Source link

Omaha’s Local Web Design Agency

Are DIY Website Builders Really Worth It?

With the ever-growing popularity of the internet more and more websites are cropping up. Be it small businesses, artists, creative agencies or even personal blogs, almost every other person on the planet has a website.

Rightfully so. After all, having a proper web presence has now become a necessity, rather than a luxury.

As such, many services have launched in recent years that allow users to quickly and easily build websites within minutes. Commonly termed as Do-It-Yourself (henceforth abbreviated as DIY) website builders, these tools or services offer a simple interface that enables even the most technologically illiterate users to put together a simple website or blog with minimum effort.

So, are these DIY website builders worth the effort and money? Well, I’m going to try to answer that question.

DIY Website Builders: What and How?

For the sake of avoiding controversy, I will refrain from naming any one particular DIY website builder. However, all said and done, nearly all website builders follow more or less the same mechanism.

Image Source: Website Development Flat Illustration by Bloomua.
Image Source: Website Development Flat Illustration by Bloomua.

Simply put, these website builders offer a simplistic tool or interface to help you “put together” your website, not actually “build” it. There is a WYSIWYG editor, coupled with a drag and drop interface that allows you to build and publish pages without any rocket science involved. Therefore, you can easily put together a website with basic functionality, say a contact form, some social media widgets, text and image areas, as well as a slightly more complex entity, say a blog or a portfolio page.

To accomplish this, most DIY builders offer a set of ready-made templates, which you can either customize via the drag and drop interface, or tweak by means of basic CSS edits. In either case, your design options are limited by the amount of editing skills and freedom given to you by the concerned DIY website builder.

Where Lies The Flaw?

On the surface, DIY website builders seem to be a pretty neat solution for folks who need a simple web presence: possibly a small blog, or maybe just a one-pager website.

However, there is more to the story.

In general, web design and web development is a tricky ordeal. A website can never be “put together”; websites are not jigsaw puzzles but works of art and need to be curated and created.

Image Source: Responsive Web Design by Yapanda
Image Source: Responsive Web Design by Yapanda.

The problem with DIY website builders is that they offer solutions for people who do need seek a solution, but an easy way out of their problem. “My neighbor and his dog have got a website, I need one too. Let me quickly put it together with this tool for $9.”

The above logic is not what someone should have when seriously contemplating having a website of their own.

There is a reason why Content Management Systems rose in popularity. WordPress, Drupal and all the others in their ranks attempt to help users “create” websites. Sure, you can have a simple blog using your DIY builder, but your blog will not achieve much anytime soon, unless it uses something at the level of Ghost or WordPress.

As such, DIY website builders offer not solutions, but compromises. Rudimentary websites with negligible functionality tend to be the norm in this case.

The “Ease of Use” Logic

One argument that is often put forth in favor of DIY website builders is that such solutions and services offer ease of use and simplicity for the average user. To some extent, this might be true. After all, not everyone can deploy a website using concrete5 or Joomla, can they?

Image Source: Responsive Web Design by Yapanda
Image Source: Web and HTML Programming by Bloomua.

However, once again, this logic is just one face of the story.

Take up the case of flat-file CMSs such as FlatPress.

What can you achieve with FlatPress? A simple, ready-to-use blog that does not even require a database to connect to and as such, is easy on server resources and very simple to manage.

Can FlatPress do everything that WordPress can? No.

Does it need to? Nope.

However, by choosing even FlatPress over a DIY website builder, you ensure that you are not locking yourself down to a set of narrowly defined templates and rules and terms of a given service. This in itself is a benefit big enough to consider a nimble CMS over a funky DIY site builder.


So, are all DIY website builders evil and need to perish?

No, I do not think so.

My sole point is that the recent claim to fame of several DIY website builders that their offerings can simplify life and reduce the needs of the services of a proper designer or developer are mere myths. Anyone who is serious about their website will opt for a proper solution that can actually get the task done, instead of betting on a DIY builder that allows you to choose from 50+ generic templates.

Furthermore, the basic functionality, be it social media widgets or guestbook or blog sections, that DIY website builders have to offer, can only serve up to a given point. Following that, you will promptly realize the merits and boons of extending a CMS via extensions, themes, or plugins.

Websites, be they blogs or corporate sites, are dynamic entities, and need room to grow. You do not put together a website and forget all about it. Instead, you need to regularly keep updating it, and keep curating it. As such, the mainstream CMS is a much better solution than a DIY website builder.

Your Thoughts & Poll

What do you think of DIY website builders? Ever used any? Share your thoughts in the comments below!

Omaha Web Design Agency

Contact 92 West for a FREE Estimate

Source link

3 Cool Photoshop Projects for New Dads

Omaha Web Design

As a new Dad, you’re going to be taking a lot of pictures. You could play around with Photoshop’s filters and effects. I did that but I found them unsatisfying because:

* too easy, too quick.

* anyone can do it, and they can see how you did it. So it’s not very impressive.

* maybe because so little effort is involved, there is a lack of heart or soul in the final image.

The following three projects will take a little time and effort (not a alot). And they are not too difficult. So if you’re ready to turn your ordinary photos into eye-poppin’ works of art, follow me.

1. Turn your picture into a comic.

Where I got the idea: There is a software app, Comic Life (for Mac only, I believe), that does it for you. But I used a free tutorial, I found here. It took a couple of tries to follow all the instructions. You can see the result above: a comic postcard of my daughter, lounging on the couch, watching Sesame Street on TV.

2. Composites

There is that Michael Keaton movie, Multipicity, where he clones himself many times. You’re going to do the same, except in 2-D computer screen.

Where I Got the Idea: On Flickr, Donald Andrew Agarrat’s Composites 2004, first inspired me to do my own. He gave a very basic tutorial (use tripod, layer mask, small brush tool for details), which was enough for me. There’s even a whole Flickr group just on Composites (that also has cool collages) with a forum and tutorials.

Here’s my little girl playing in the sandbox at the park.

3. Favorite Toy Goes in the Picture

Once you’ve mastered the Composite technique, you’re ready for next level of photo manipulation — putting your child or child’s favorite toy into the action.

Where I got the idea: my little girl loves reading Curious George Rides A Bike, and her favorite stuffed animal, Monkey Pie, looks a little bit like George. So…

Now I know what you’re thinking: Between changing diapers and work and not getting any sleep, how did you ever find the time for Photoshop? Hey, my wife asks the same thing. I do remember the NBA Playoffs were over and the NFL season had not started yet, so what is a guy to do?

Happy photo-doctoring!

Branding | Digital Marketing | Advertising Agency | Graphic Design
Web Design | Search Engine Optimization | Mobile Application Development

92 West | Branding + Strategy + Web Design

92 West is a branding, digital marketing, web design and advertising agency focused on helping brands discover their true voice and sense of purpose; genuinely inspiring audiences.

Have a project or new idea? Let's Talk.

branding + omaha advertising agency + digital marketing + graphic design
omaha web design + search engine optimization + mobile apps

Source by Jay Lee

Automating Style Guide-Driven Development

Omaha Web Design

Style guides — especially living ones — are useful in many aspects of development and maintenance, so it’s little wonder that developing them has become a highly recommended and a popular practice. But even with the clear benefits, taking the necessary steps to create and start using them is easier said than done, as quite often the challenge is cultural, requiring changes in people’s mindsets.

In order to make the transition as painless as possible, equipping yourself with the most helpful tools and automating as many steps as possible become important. These living style guides promote a systematic approach to composing layouts, which used to be just a task within the user interface development process. Incorporating style guides into the development process places importance on the tools used to build the component catalogue.

Style guides come in many forms and shapes, but in this article we’ll concentrate on style guides that are generated directly from the style definition sources — i.e. CSS and its modern variants.

Time Passes, Development Changes

We used to practice the old-school type of web development workflow that starts with the designer creating a bunch of Photoshop mockups of all the pages and then handing them over to the UI developer, who then translates what he sees into HTML, CSS and JavaScript, and after some fine-tuning and checking, things eventually go into production. When a design lacked consistency, the problems with modelling grew even more complex and development started taking more time than it should have, particularly when the requirements changed.

Modifying an existing interface was the most challenging part, as it demanded actions from everyone in the chain: The designer would edit the PSD, the UI developer would change the code, and the outcome had to be meticulously verified again. Rinse and repeat. In some cases the whole user interface had to be rewritten from scratch. Adding pages to an existing website held similar problems: The team received PSD mockups of the whole interface, which then needed to be reconciled with the existing UI.

Long story short, the old-school process was difficult, time-consuming and prone to error, and it did not yield maintainable results.

Like many others in the web community, we took the “divide and rule” approach and started to modularize our interfaces. Thinking of them as sets of components instead of rigid pages increased the speed of development and made them more consistent and easier to maintain. With that, we realized that living style guides, built from the actual code, served as a much better summary than the PSD or PDF files.

Benefits Of Style Guides

“Process changes are much more profound than the technology that enables them.”

– John Albin Wilkins

The history of web development already contains examples of the ways tools and technologies can change the development process. Usually the change is indirect, as new tools shift the focus and challenge the old ways of thinking. The same holds true for automatic style guide generation: Every feature provided can trigger significant changes to your workflow when its full capacity is utilized.

Accurate Overview Of The UI

A style guide visualizes your code and represents it as a UI component toolkit. The list of components may be used as a checklist for all of the things that may have been forgotten or overlooked in the design and implementation. Being able to see each component in every possible state helps to ensure that everything is visually correct and that all the necessary states are present.

Such a UI component catalogue also serves as excellent documentation of the work that has already been done and is a good starting point for further development. Because it is generated from the source code itself and thus shows the components in their current state, any non-coding team member or customer representative can get a nice overview of the whole interface.

Development Playground

The very same living style guide web page can be used as a development playground as well. A developer running a local server can start working on a component and then afterwards tune and tweak the styles with a designer. Having each component displayed separately suits the idea of modular development perfectly and encourages the creation of independent building blocks for the interface.

This is also helpful when refactoring and especially when doing some maintenance work, because any change affecting the components and their states can be easily checked visually, decreasing the chance of something breaking accidentally.

Kickstart For New Pages

A predefined set of components aids in the building of new pages or even in the start of a fresh project based on the same code to ensure a coherent style across all products. Besides promoting code reuse, it automatically results in greater UI conformity. It’s easy to see right from the start whether the existing UI kit is enough for the upcoming page or whether some components or their states need to be implemented first. So, the time and resource needs can be estimated with greater accuracy.

Simplified Testing

Component-based development nicely reveals the power behind “divide and rule.” Even very complex systems can be developed and maintained more easily if they are represented as a combination of simple and small pieces. It also helps when testing a web interface; if something breaks, pinpointing the exact spot with the style guide is easy.

Component Culture

When developers start practicing style guide-driven development, their mindsets begin to change towards breaking an interface down into its components rather than thinking of it as a set of pages. From a technical perspective, it helps by reducing the mental context required down to the single component that is currently being developed and freeing the developer from having to worry about the rest of the system. In addition, it changes the process, giving each piece of the interface its own development cycle, which is iterated as the developer provides changes. This makes it easier to distribute work amongst the team, manage the process and even introduce another developer into the project. Who takes responsibility of updating the style source documentation required for the style guide will depend on the team’s composition, but in general it could be anyone who works with CSS, regardless of role.

It is often argued that this approach is more time-consuming, and we’re not going to disagree with that, but besides getting the application ready and deployed into production in time, one should also consider how it’s going to be maintained in the long run, and how much time and effort the maintenance will require. Nowadays it has become clear that this approach has its benefits, so if it seems expensive time-wise, it’s time to make use of the helpful tools and practices that will alleviate the pain, rather than dismiss the concept without trying.

Communication Benefits

“The roles of designer and developer are increasingly blurred, yet all too often we work in isolation.”

– Anna Debenham

With a living style guide, the whole team has the same representation of the UI, and a common vocabulary begins to emerge as everyone has a chance to watch each component evolve and to better understand its functionality and purpose. Magically, a bridge appears between the designers and developers. Collaboration usually improves quality greatly, and, similarly to pair programming, brilliant ideas and new use cases start to blossom and corner cases such as different screen sizes and component combinations are covered more efficiently.

If your designers prefer to work with graphical tools instead of prototype in the browser, you can still take steps towards the style guide-driven and component-based methods. Empower designers and bring them closer to the implementation phase by finding and providing suitable tools for them. By the time the design has been turned into interface components that are represented in the style guide, the PSD mockups will have become obsolete and making small adjustments will have become trivial.

Vision Of A Style Guide Generator Emerges

Our company in Helsinki, SC5 Online, has started the transition from Photoshop mockups to a style guide-driven process. We started out by documenting our customers’ web systems with Knyle Style Sheet (KSS) syntax and generating visual representations of them. That worked great for build-savvy developers, but in order to bring the UI developers and designers closer together we needed to find more suitable tools.

During our search we found some useful and nifty tools, but the same problem remained: Most of them were still incomprehensible to the designers, who quickly retreated to the familiar safety of Photoshop. We initially identified the following use cases as requirements for the tool:

We couldn’t find one, so we decided to build our own open-source tool that tackles the technical challenges, while the developers and designers strive to overcome the cultural ones.

From the technical point of view, we envisioned the generator to be a module that could be easily used in any new or existing project. So, the logical choice for distribution was to package it as an npm module, as most web projects already utilize npm in one way or another. We also felt that in order to maximize its benefits, the style guide generator should be an integral part of the project it is being used in and, thus, should be easy to embed in any project’s codebase and workflow.

Despite its young age, it has already proven to be successful. It is being used by our customers, who have provided valuable feedback and ideas and have conveyed feature needs for further development.

Overview Of The SC5 Style Guide Generator

The SC5 Style Guide Generator2 builds a living style guide from style source code. It provides a command line interface and both Gulp and Grunt build tasks wrapped in a single npm package. In the simplest use case, the user defines which files are to be processed and to which directory the generated files should be written.

(View large version4)

The documentation syntax is based on KSS5, so it can even be used in projects with bare HTML and CSS, but some of the most beneficial features, such as variable live editing, apply only to projects that utilize a style preprocessor with support for variables.

The resulting style guide itself is an AngularJS application that provides useful functionality, but your project doesn’t need to have anything to do with AngularJS. The generator does support using AngularJS directives as your component markup, however.

Installation is as easy as this:

npm install sc5-styleguide

Running The Demo

Before you start documenting your own project, seeing an example of what the result would look like might be useful, so we have provided a demo. The demo is a style guide generated from the style guide web application itself. You can check the interactive online demo6 or run the demo locally from the npm module’s directory:

cd node_modules/sc5-styleguide
npm run demo

This starts a local web server, which you can access at http://localhost:3000/7.

(View large version9)

You can navigate around the different sections of the style guide using the top-level section menu on the left-hand side. Each component is presented with its description, a rendered visual example, the corresponding HTML markup and all of the related styling for that particular component. The rendered examples can also be viewed in full-screen mode, where the selected component will be rendered alone on an empty page with your styles applied. In the following paragraphs we will see how this mode is useful for both manual and automatic testing.

On the right side of the main view is a toggleable tab, the “Designer Tool,” that shows all of the variables used by the current section and that also serves as the interface for editing the variables directly in the browser.

(View large version11)

Even such a simple interface can convey a lot of useful information. The following sections describe the major features in greater detail and reveal some of the more technical tidbits.

KSS Documentation Inside

We believe strongly that documentation should be kept as close to the code as possible, ideally together in the same file if the code isn’t self-documenting. That way, remembering to update the documentation as the code changes is easier, and documenting becomes a more regular part of the development workflow.

We chose KSS as our style documentation convention because of its popularity, expressiveness and simplicity. The format is human-readable and machine-parsable, and it works with any style definition language, so it’s not going to become obsolete anytime soon. Using its simple and easy-to-remember rules, you can document all the different states of the components, such as hover and pressed states for buttons, and see the different states all at once on the generated style guide pages.

The SC5 Style Guide tool uses the KSS parser as its foundation, so if your styles are already documented with KSS, they can be immediately processed with our style guide generator. If not and even if you’re not familiar with KSS, don’t fret — the concept is very simple. All that is required is to add comment blocks to your components’ styles (CSS, Sass or LESS) with some simple rules. A typical KSS documentation block consists of the following:

Here is an example of a KSS documentation block for a button in the hover state using Sass:

// Buttons
// Buttons can and should be clicked.
// markup: <button class="button $modifiers">
// :hover - Highlight the button when hovered.
// Styleguide 1.1

All of the additional features in SC5 Style Guide are built upon the unmodified KSS library, so full compatibility with projects that have already been documented with KSS is guaranteed, and you have the possibility of using any and all of the KSS features that the future may bring.

Variables, Components And Relationships

All of the components in the style guide are rendered using their styles, along with their descriptions, the HTML code for recreating them and the related style definitions, which are extracted directly from the source files and shown as is. The “Designer Tool” also lists all Sass and LESS variables that are used in a particular component’s style definitions.

When the style sources are being processed, all Sass and LESS variables and their values are gathered in a list. Simply showing the entire list all of the time would be neither convenient nor useful, especially in a large system with a lot of variables. Instead, only the variables used in the currently active component or section are listed. If the currently active section does not use any variables, then all of the variables of its subsections are listed. This is nice and plays very well with variable live editing (explained in the next chapter).

There is also a reverse listing: “Where is this variable used?” Having a page show all the components that would be affected by changing a variable’s value is obviously not only useful, but a real time- and trouble-saver. No more searching in the editor or grepping and making mental maps of the variable’s usage — just click the variable’s name in “Designer Tool” to see the related components.

To make this work, the source files are preprocessed. First, the sources are split into a list of description-code pairs. The description parts are passed on to the KSS parser, which takes care of extracting the information from the KSS markup. The code parts are searched for variable definitions and references, and finally the two parts are joined, giving us not only the KSS section data, but also the related code and variables.

The splitting and variable searching are both done using the Gonzales Preprocessor Edition12 parser, which works for SCSS, Sass and LESS. The section splitting works for CSS as well, but obviously no variables can be found.

Full-Screen Mode And Automated UI Tests

Each component and state is reachable via a unique URL, which shows the component in isolation on a separate page, the full-screen mode. This allows you to check its responsiveness, accessibility and behavior across different browsers with different devices and emulators. This is much easier to do with simple, isolated components than with the whole complex system at once.

The full potential of the isolated full-screen component view is best achieved with automated testing, because you can pass the URL to any test system to check different aspects of the component. For example, you can check a component’s behavior with Protractor13. For smaller components, a test case would be much simpler. This does not relieve you of testing the whole interface’s interactions, but it will provide much more specific information if something is broken.

Besides testing behavior, you can write unit and regression tests for the components. Comparing screenshots of previously released and current versions might help you to catch a missed border, a wrong padding value or something else that is easily skipped when relying on manual verification. One tool for this is Gemini14.

Internally, we utilize our device wall, which can point any and all connected devices to a particular URL; as our style guide UI automatically refreshes when the styles are changed, all devices display the changes in real time. With a development server running on the same network as the device wall, checking all of the components on various devices is easy.

See the video16. (View large version17)

Editing Components And Variables On The Fly

“Designer Tool” is used not only to list the variables, but also to edit them. Change a variable’s value, click the “Save” button and the variable’s new value is written back to the original style source file (CSS, Sass or LESS) on the disk, with the order, comments and indentation of the source file preserved. This is achieved with true AST (abstract syntax tree) parsing; the war stories and explanations of all the problems and drawbacks we encountered in our attempts with the regular expression approach would be enough for an article of its own.

Although the live editing feature is technically quite simple, it can have a drastic effect on the development process, especially when maintenance work is required. Non-technical people can use the browser to adjust such things as colors, fonts, padding and margins and immediately see how the component they’re working on will look like and how the changes will affect the whole system. The technically oriented developer will be happy to commit the changes to version control, without having to try to “make it prettier.”

Changes and additions on the file system are reflected in the browser in nearly real time, so nothing prevents the developer and designer from working in tandem and simultaneously. For example, the developer could add a variable’s definition and change a component to use it, while the designer takes care of finding the most suitable value for it.

CSS Selectors From The Shadows

One of the problems that very few (if any) style guide generators take into account is the very nature of CSS: style cascading. The style guide itself needs some styles, but those definitions should not affect the rendering of user-defined components, and vice versa. Good examples of this are font definitions on the body, resetting li margins, and setting everything to have a magenta background color with *.

A style definition such as the following could easily ruin either the navigation part of the style guide app or the user component representation:

ul li::before 
  content: "*";

This can be overcome with style encapsulation — aka the shadow DOM. In our case, the host application includes and uses its own styles, but every user component is wrapped in a shadow DOM root, to which the user styles are loaded. This prevents the user styles from affecting the host application. An AngularJS directive is used to abstract all of this behind a custom tag and to keep everything in a single place.

This is an ideal example of the power of a community that reports issues18 and even contributes solutions19.

Declaring Environmental Markup

Sometimes a component’s representation requires additional HTML around it, such as a list item or a component that depends on the markup into which it is placed. With the SC5 Style Guide Generator, declaring wrapper markup for every component is possible. The wrapper markup is inherited by the child components and can also be extended at that point, so you need to define a wrapper only once in the parent section, making it much easier to document the HTML required for complex structures.

Here is an example of markup for a list item’s wrapper:

// Side nav item
// markup:
//  <li>
//    <a class="$modifiers">Item</a>
//  </li>
// sg-wrapper:
// <nav class="sg side-nav">
//  <ul>
//   <sg-wrapper-content/>
//  </ul>
// </nav>

The same trick also works if your component requires a dark background:

// sg-wrapper:
// <div style="background: black;">
//  <sg-wrapper-content/>
// </div>

Forget Copy and Paste — Use Templates

With style guides taking their place in the development process to make it more efficient, maintaining them should also be as convenient and error-proof as possible. The practice of using comments to document the necessary HTML markup is often criticized for encouraging copying and pasting — and rightfully so because changing the comments when the markup changes is easy to forget. It also gives the style guide’s consumers unnecessary headaches because they will also need to update the markup of the components they are using.

A common solution to this problem is to equip the components with templates that can be reused in the application’s code, as well as to represent the components in the style guide. Because our web application’s UI is built with AngularJS, we added support for declaring an AngularJS directive as the markup, which is then lazy-loaded and rendered where needed in the style guide.

(View large version21)

For this, you can declare an additional sg-angular-directive parameter in a KSS block and provide the needed files:

// Test directive
// markup:
// <div sg-test-directive>If you see this something is wrong</div>
// sg-angular-directive:
// name: NameOfMainAppModule
// template: path/to/template-filename.html
// file: path/to/application-file.js
// Styleguide 1.2.3

You can declare more than one file, which allows you to bring in any possible dependencies. A more detailed explanation22 can be found on GitHub and in the source of the demo project.

Embedded Style Guide

A style guide can make a difference in the development process only if it becomes a natural part of the process. The smoother the integration, the better, and the easiest way for that is to have it generated automatically as part of the build process, without any manual action. That way, the style guide is guaranteed to always be fresh, up to date and available for anyone to review.

With this in mind, the SC5 Style Guide has been designed for easy integration with any project using Gulp or Grunt or the aforementioned command line interface. The generated style guide can be served using the built-in server or copied to your own server along with the rest of the application. Both approaches are already used in our company’s projects, and developers have mentioned that having the style guide as part of their website makes them feel more comfortable getting used to the component-focused way of development.

Using the --server option, you can serve and run the generated website locally, and the --watch option enables automatic style rebuilding and refreshing in the web application when some of the source files are changed. All of the command line options are listed in the documentation23 and in the styleguide --help output, but the best and the recommended way is to use them as part of your Gulp (or Grunt) build process.

Gulp integration is achieved with a styleguide task in your Gulp file. The documentation describes how to use and configure24 the styleguide Gulp task, and the npm module includes a minimal Gulp example in node_modules/sc5-styleguide/demo-gulpfile.js.

You need two tasks, one to build the style guide data from your sources and another to apply the processed styles to it.

var styleguide = require('sc5-styleguide');
var sass = require('gulp-sass'),
var outputPath = 'output';

gulp.task('styleguide:generate', function() 
  return gulp.src('*.scss')
        title: 'My Styleguide',
        server: true,
        rootPath: outputPath,
        overviewPath: ''

gulp.task('styleguide:applystyles', function() 
  return gulp.src('main.scss')
      errLogToConsole: true

gulp.task('styleguide', ['styleguide:generate', 'styleguide:applystyles']);

In the example above, you can see that the styles to apply are built with Sass. Because you can change the task as you wish, you can use any preprocessor you like, even your own patched one. The same would work with pure CSS:

gulp.task('styleguide:applystyles', function() 
  return gulp.src('all.css')

The style-applying task will pick all @ rules from your styles so that, for example, font-face definitions will be loaded correctly in the host document (since it cannot be done in the shadow DOM). It also picks and generates pseudo-classes from pseudo-selectors, such as :hover, so that each state can be rendered without actually having to hover on the component.

Running this as a watch, you can get a live development playground.

gulp.task('watch', ['styleguide'], function() 
  // Start watching changes and update style guide whenever changes are detected
  // Style guide automatically detects existing server instance['*.scss'], ['styleguide']);

Every time you change the source, the style guide will rebuild and reload automatically.

The Grunt solution works similarly25 with the help of grunt-gulp.

Wrapping It All Up

Here at SC5 Online, we are putting style guide-driven development and the component-focused methodology to use. Some of our projects already use these paradigms, some are evolving towards them, and all future projects will certainly be developed this way. The more clearly we see the benefits of these methods, the greater the pang of regret would be if we were forced to give up these practices due to a technological difficulty or inconvenience.

We have decided to stand our ground and solve the technical difficulties we encounter, and this is how SC5 Style Guide26 is evolving and being developed. Witnessing the project being adopted by the open-source community — which is already reporting issues, suggesting feature ideas, making pull requests for bug fixes and improvements, and even implementing full features — has been a great pleasure. That being said, we encourage everyone to try it out (it’s free!) and participate! Thank you!

(il, ml, al)


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7 http://localhost:3000/
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26

The post Automating Style Guide-Driven Development appeared first on Smashing Magazine.

Source link

Omaha’s Local Web Design Agency

How to Use Photoshop’s Pen Tool

Omaha Web Design

Photoshop’s Pen Tool is one of the best creative tools in their arsenal. But most designers avoid using it as they simply do not understand the concept of what it can do. I use the Pen Tool for many different purposes, and in this tutorial I will be showing you a few ways to use it to your advantage.


The basic mechanics of the Pen Tool is simply that you create two points (called anchor points), and Photoshop will draw a Path between them. The Path can then be used for drawing, or, if the Path is a loop (a series of anchors that start at end at the same point) it can be used to create entire shapes.

Anchor Point: The anchor points are what decides where each Path begins and ends. Think of them of a dot-to-dot picture you used to do when you were a child. To create a Path you must lay down anchor points at various positions, connecting them together in turn.

Path: The Path is the line between the two anchor points that draws out the shape or line you are trying to create. The Paths shape depends on the position of its two anchor points and the position of its handle.

Handle: The handle is used to bend Paths. Photoshop will always draw a perfectly straight Path between two anchor points, so if you wish to bend the Path you must move its handle accordingly. Think of it like a lever. The further away and more of an angle you put on the handle the more it effects the bend of the Path.

If you hold down the mouse on the Pen Tool we have a variety of Sub Tools.

The Pen Tool is the really the only selection I ever make off this selection. If you are careful when drawing your Paths and take your time you probably wont need the other ones.

The Freeform Pen Tool simply acts like the Lasso Tool and creates a Path wherever the Mouse Pointer goes.

As you will see this creates messy inaccurate Paths, and for as long as I have been using Photoshop I have never used this Tool.

The Add Anchor Point Tool does exactly what it says on the tin. You can use it to add extra Anchor Points along any Path you have drawn.

The Subtract Anchor Point Tool simply deletes any Anchor Point you click on.

The Convert Point Tool simply adds handles to existing Anchor Points by clicking and dragging.

Using Paths To Create Lines

Draw a simple Path, such as a letter S. You would simple make an anchor point to start with. Then place a second anchor point, but on doing so hold the mouse button down and drag the bend into it. Then, place the third anchor point and drag in the opposite direction.

This is simply a Path. It is not something that will be visual on our final image. To make it into something solid we must Stroke the Path. To do this we must first choose something to stroke it with. Choose the Brush Tool and set your brush to a 5px Hard Brush and set the color to Red.

Next, choose the Pen Tool again, Ctrl-Click/Right-Click the image and choose Stroke Path.

In the Stroke Path Window you will see two options. A drop down box for the tool you wish to use on the selected Path, and the Simulate Pressure Check Box. The Simulate Pressure option will add tapers to the beginning and end of your Path. By choosing Brush from the drop down menu you are telling Photoshop to fill in the Path with the 5px Hard Brush we just set. Obviously if you are using another tool other than the brush, you would simply set the options for that particular tool prior to running the Stroke Path function.

Creating Shapes Using The Pen Tool

To create a shape we must draw out some Anchor Points like we did before, only this time we must finish on the same point we started with.

Now we have our shape we must make it a Selection, for if we were to try and fill this now we would simply fill the entire background. Choose Window > Paths and choose the Load Path As A Selection button.

This will convert the Path into a Selection. You will see this by the visibility of the so called “walking ants”.

Now this is a selection you can fill it with a color or gradient and can then start to apply Layer Styles as it is now a solid object in our document and no longer merely a Path or selection.

Drawing Complex Shapes

In order to draw complex shapes it is important to learn how to edit the handles of your Paths. If we draw a curve Photoshop automatically adds a handle to the second Anchor Point so that the curve can be continued smoothly into the third point. However sometimes we do not want to continue the curve. To edit the handles we hold down the Alt Key and either reposition the handle, or click the Anchor Point to remove it completely.

  1. This shows the route the Path will take between the three points if we simply do nothing to the handle.
  2. This shows the route when we hold down Alt and move the handle.
  3. This shows the route when we hold down Alt and click the middle Anchor Point to remove the handle.

This allows us to draw much more complex shapes.

Using The Pen Tool To Add / To Subtract From A Selection

When doing complex selections we can use the Pen Tool to accurately tweak the edges.

With the Pen Tool selected draw your Path over the remaining leg. Choose Window > Paths.

Now when we choose the Load Path As A Selection button we hold down the Alt Key first to bring up the Make Selection Options.

Make sure you have the Add to Selection Box selected and click OK. This will convert the Path and add it onto our selection.

To subtract from selection we do everything exactly the same but obviously we check Subtract from Selection instead of Add.

Now you have the knowledge, embrace the Pen Tool. Make cleaner selections, and therefor cleaner work.

Branding | Digital Marketing | Advertising Agency | Graphic Design
Web Design | Search Engine Optimization | Mobile Application Development

92 West | Branding + Strategy + Web Design

92 West is a branding, digital marketing, web design and advertising agency focused on helping brands discover their true voice and sense of purpose; genuinely inspiring audiences.

Have a project or new idea? Let's Talk.

branding + omaha advertising agency + digital marketing + graphic design
omaha web design + search engine optimization + mobile apps

Source by Artin Hovhanesian

Video Backgrounds in Web Design: 20 Themes & Templates

We’ve shown you the techniques, discussed the guidelines, and also shared the tools for quickly and easily adding video backgrounds to your own web site.

Today, we’re going to bring all of those posts together by sharing a selection of CMS themes and templates that all offer an all-in-one video background solution.

Logo_x2_retinaThis post has been published as part of our Master Video in Web Design event. For more articles, tutorials and free files click here.

Video Background Themes & Templates

Gris – Creative Coming Soon TemplatePreview

Gris is a minimally designed coming soon web template that includes three homepage variants and supports both full-screen images and video (Youtube and Vimeo).

Gris - Creative Coming Soon Template

Sparx – Responsive Coming Soon TemplatePreview

Sparx is a professional, 8-in-1 responsive and retina-ready coming soon template that has been built using Bootstrap 3.

Sparx - Responsive Coming Soon Html5 Template

inTime – Responsive Coming Soon TemplatePreview

inTime is a responsive, modern and clean under construction/coming soon template. This minimally designed template is packed with a countdown timer, Ajax subscription form, social icons and an about page.

inTime - Responsive Coming Soon Template

Vesa – Responsive Parallax One Page TemplatePreview

The retina-ready Vesa is a creative, parallax scrolling, one-page web template that comes with support for video background built-in. You can use videos from Youtube, Vimeo, or your own custom MP4 clips.

Vesa Responsive Parallax One Page Template

Family – MultiPurpose Responsive One Page TemplatePreview

Family is a fully responsive and retina-ready one-page HTML/CSS template. This template comes packaged with three homepage variants and includes all of the features and elements you would expect for building a modern portfolio, including video backgrounds.

Family - MultiPurpose Responsive One Page Template

King Size – Full-Screen Background TemplatePreview

King Size is a portfolio/photography theme with support for fullscreen images and background videos. There is also a WordPress version available here.

King Size - fullscreen background template

Beuh – Responsive One Page Portfolio TemplatePreview

Built with Bootstrap, Beuh is a responsive one-page portfolio template with a clean, simple and elegant design.

Beuh - Responsive One Page Portfolio Template

Tides – Fullscreen Video Single Page TemplatePreview

Tides comes with loads of unique layouts, a working load-more button, three homepage variants, filterable portfolio, background video header and much more.

Tides - Fullscreen Video Single Page Template

Fenix – Fullscreen Video & Image BackgroundPreview

Fenix is a creative portfolio WordPress theme with support for full-screen images and video.

WordPress - Fenix - Fullscreen Video & Image Background

Xenon – YouTube Video Background PagePreview

Xenon is a modern and interactive coming soon page template that can ben easily and quickly customized. It also includes a newsletter form to collect prospective customers and visitors.

Xenon — Countdown & YouTube Video Background Page

Bell – Video Background Countdown Landing PagePreview

Bell is a simple, clean and fully responsive mobile friendly landing page. It supports full video or image background headers.

Bell - Video Background Countdown Landing Page

Alamak – Responsive One Page Portfolio WordPress ThemePreview

Built with Bootstrap, Alamak is a responsive one-page WordPress Theme with a clean and elegant design. It comes packaged with three optional homepage layouts: Slider, video and Youtube background.

WordPress - Alamak - Responsive One Page Portfolio Theme

HQ – Photography Responsive WP ThemePreview

HQ is an interactive and engaging WordPress theme designed for photographers and videographers. It includes video backgrounds, photo/video grid galleries, portfolio layouts, and much more.

WordPress - HQ Photography Responsive WP Theme

Vozx – Multipurpose WordPress ThemePreview

Vozx is an ideal theme for any creative agency, and includes a great collection of elements to choose from and present your services.

WordPress - Vozx - Multipurpose WordPress Theme

Versatile – Responsive Multi-Purpose WP ThemePreview

Versatile is a clean and responsive multi-purpose WordPress theme with support for video as a background.

WordPress - Versatile - Responsive Multi-Purpose WP Theme

Alpha – Ultra Flexibile WordPress ThemePreview

Alpha is a multi-purpose theme, so you can use it as a corporate website, business website, blog, or a portfolio showcase website. It come packaged with a versatile system for placing video backgrounds anywhere on the homepage (except the footer).

WordPress - Alpha - Ultra Flexibile Responsive WordPress Theme

PaperPlane – Creative One Page Joomla TemplatePreview

PaperPlane is a creative one-page Joomla template that includes three homepage variants (video background, parallax image and parallax slider).

CMS Themes - PaperPlane - Creative One Page Joomla Template

Royalet – One Page Bootstrap Drupal ThemePreview

Built with Bootstrap, Royalet is a one-page Drupal theme that comes packaged with eight homepage variants, including video backgrounds.

CMS Themes - Royalet | One Page Bootstrap Drupal Theme

Neat – Lightweight MODX ThemePreview

Neat is a clean, fast loading MODX Theme built with modular Sass files, for quick and easy front-end customisation. It comes with support for video backgrounds.

CMS Themes - Neat - Lightweight MODX with Sass & Bourbon Neat

Kane – Responsive Bootstrap 3 App Landing PagePreview

Built with Bootstrap 3, Kane is a clean and modern landing page template designed for releasing and promoting mobile apps.

Marketing - Kane - Responsive Bootstrap 3 App Landing Page

Next Steps

The above examples are merely the tip of the iceberg. ThemeForest currently has a huge selection of themes and templates that all come with support for video backgrounds built-in, you should check them out.

Logo_x2_retinaThis post has been published as part of our Master Video in Web Design event. For more articles, tutorials and free files click here.

Omaha Web Design Agency

Contact 92 West for a FREE Estimate

Source link

Interview with Ryan Terry, Lead Designer at Disney

We had an amazing response to our call for questions to pose to Disney Lead Designer, Ryan Terry! More than 170 people submitted over 250 questions, thank you so much to everyone who submitted questions!

We’ve picked out our favorite questions and mixed in a few of our own, so stand by for the much anticipated interview with Ryan Terry!

Who is Ryan Terry (in his own words)?

The Short Version

I’m an artist with an affinity for silliness.  I enjoy a wide range of art forms from drawing, animating and coding.

Ryan's dreams come true!

The Longer Version

I’m originally from Houston, TX and aspired to be an animator from an early age.  I drew, drew, drew all the way to college where I received my BFA from the Savannah College of Art and Design in Computer Art with an emphasis in Interactive Design.

Life led me in a direction towards web design and development and I played in that world for a decade working for small agencies and freelancing for 8 years.  I both designed and developed Flash websites for brands like Coca-cola, Wal-mart and Harry Potter, while later transitioning into the app market working on apps for Dreamworks, Sony Animation and Disney.

For the past year and a half I’ve had the privilege of working as a Lead Designer for Disney, launching the Imagicademy brand at the end of 2014.

Outside of work you can find me with my wonderful wife and new baby daughter in Los Angeles.  I love drawing silliness, watching movies, riding my bike and working on my hobby projects.

What was your childhood dream?

  Question submitted by MetroThemes

I absolutely, positively wanted to be a Disney Animator, making feature films.

Image courtesy of Ryan Terry

Did something specific inspire you to take an artistic path, or was it something that you had always wanted to do?

  Question submitted by Tier


I’ve always wanted to take the artistic path.  What sparked my dream to be a Disney Animator was seeing The Little Mermaid for the first time.  It blew me away and I was hooked… pun intended.

You’re proficient in many, (if not all!) areas of design, illustration, coding/development, and animation. How did you decide which element to focus on in your career?

  Question submitted by bogz


Here’s the thing…I didn’t! I always thought I would be an animator, but I also love illustration. In college, I double-majored in 2D Animation and Illustration. But as I entered my sophomore year I became really interested in early Flash animation and started moving in a more interactive direction, changing my major to Computer Art with an emphasis in Interactive Design. I then made sure to draw in every interactive project I had, to keep that interest going as well. I’ve tried to keep that mindset ever since then, which has led me down the web design, illustration, graphic design and games path.


Image courtesy of Ryan Terry

What (if any) things did you do to transition yourself away from Flash when you saw the industry moving away from it?

  Question submitted by ButlerM

The nail in the coffin for Flash was when Adobe said they’re not supporting it on mobile anymore. I know Actionscript, but Objective-C (X-Code) is a very different beast. I decided to start learning how to code apps, while simultaneously freelancing with app companies for front-end design jobs instead of doing both front-end and back-end jobs like I was doing before. I was designing apps immediately, so I’m very thankful for that work. I made my first app on my own within that year using only X-Code. I’m currently learning Unity since it’s cross-platform, powerful and the interface is nice for visual people like me. The biggest lesson I learned through this Flash transition is to always keep learning other software and mediums, keeping an eye on the future.

Can you share how you started in this field & how challenging it was to get where you are right now? How did the opportunity to work at Disney open up?

  Question submitted by Falcon


It’s a case of who you know. I have a friend who used to work at Disney and he was able to get me in touch with people who knew people in the department that I was trying to apply for. I also spent some time creating a customized version of my resume website just for Disney. It’s so important to do something special to stand out from the crowd when applying at Disney.

When you tell people you work at Disney, what’s the first thing most people say?

  Question submitted by KaseyMoore


“Oh, cool. So do you work in Disneyland?”

Could you describe what your desk/office looks like?

I work in Disney’s Grand Central Creative Campus in Glendale, California. It’s a beauty!

Disney’s Grand Central Creative Campus, Glendale, California

I work in an open office layout and I’m on the side of the office space by the windows.

I have a desk that lets me stand, but I tend to work better sitting down. The best feature of my desk is my Cintiq. How did I live without this thing?! What a wonderful tool.

Ryan Terry at work with his beloved Cintiq!

Out of all the different types of work at Disney, from web to mobile and from TV to film, what type of projects do you like to work on most of all, and what would you like to do more of?

I work specifically in the mobile market, making educational apps for kids. I’d be thrilled to work in the visual-development and character design roles for feature film or television.

What percentage of your work is done by drawing by hand and what percentage is done using computers?

There’s a good amount of hand drawn work in pre-production when we’re brainstorming ideas and need to get rough visuals figured out. From there, I hand off my rough ideas to the rest of my INCREDIBLY talented art team and we work together to make something beautiful via computer.

Image courtesy of Ryan Terry

What is your morning routine before you start designing?

  Question submitted by StyleWish


Coffee…coffee…and coffee.

Image courtesy of Ryan Terry

Where do you get inspiration for your work?

  Question submitted by Jollythemes


All over the place! Thursdays are always fun because that’s when new apps are released in the App Store. I immediately download as many fun apps as I can find and play them for a few minutes. I also follow a lot of artist on Instagram and Twitter so I have a pretty constant feed of art throughout the day.

Which animator or illustrator has been most influential on your career, and why?

Animator: Glen Keane — His work-ethic and skill is a never-ending inspiration to me.

Illustrator: Al Hirschfeld — His simple line-work and wonderful caricatures always put a smile on my face.

Share with us your top 3 favorite Disney or Pixar movies of all time, what are they, and what do you like most about them?

The Incredibles — The scene where Dash is running on the water is the only time I’ve ever leapt out of my seat in applause during a movie.  Such a great sequence.

Aladdin — I love the humor, the color and the animation

The Lion King — The characters, the drama, the music.  How can anyone not love this one?

Having worked as both a freelancer and now at a huge company like Disney, which of the two methods of earning a living is the most challenging?

  Question submitted by Patche


The biggest challenge with freelancing is not having a steady paycheck, but I was fortunate enough to always have work for the 8 years I freelanced. Working at a corporation has more challenges because you’re working with multiple lines of business and many more people than I worked with previously. Getting to work with so many incredibly talented artists and legends is something I could never do on my own otherwise. And I get to work with Mickey!

Image courtesy of Ryan Terry

What are some important lessons that you have learnt along the way that you could give to authors on Envato Market?

  Question submitted by Patche


When I was actively selling templates on Envato I always tried to figure out how I could make a template based on current freelance work. Killing two birds with one stone. I wish I had spent more time purely working on templates as the residual income has been nice over the years and well worth the effort.

Sometimes, creative inspiration isn’t always easy to come by. What’s the best way to approach a blank page from your experience?

  Question submitted by Matt Carrasco


Get outside! Do something to get out of your head. Take a walk. Or sometimes just scribbling nonsense lines on paper can make you see things in the lines that may inspire you. Read books, watch movies, go to dinner with friends. Also, sometimes you just need to lock yourself in a room and force yourself to throw as many ideas on paper as you can until something sticks. I love this quote by Jack London, “You can’t wait for inspiration. You have to go after it with a club.”

Image courtesy of Ryan Terry

How do you balance your own style of illustration/animation with the distinct look and feel of new or established Disney characters? What freedom do you have to build-on/modify/enhance well-known Disney properties, and what challenges are involved with this?

  Question submitted by yashar1


We have strict style guides to make sure we stay true to the Disney aesthetic, but in the app Mickey’s Magical Math World we were able to have a lot of creative fun with the environment and space suits of Mickey, Minnie, Daisy, Donald and Goofy. We also created new alien and robot characters in the app.

Image courtesy of Ryan Terry

You’ve got a great idea for either a new character or an animation. What opportunities do you have at Disney to pitch new ideas?

Disney is open to all kinds of new ideas. They allow you to pitch to them for the opportunity to partner with you on it.

Could you tell us about your graphic novel Zerbert? Where did the idea come from and how is it coming along?

Zerbert, by Ryan Terry

Zerbert is a hobby of mine. I’m still working on the story so I don’t want to say too much yet. But I plan on being very transparent during the process on my Zerbert blog. Come join the fun at

Zerbert, by Ryan Terry

Zerbert, by Ryan Terry

What would your advice be to someone who is very talented at what they do, but has not had a major break yet? Should their focus be on building a portfolio, creating their personal brand, perhaps pro-bono work, or something else?

  Question submitted by Mustafa


The short answer; yes. Keep working and post your work everywhere you can; job sites, art forums, Instagram, Twitter, Tumblr, etc. It’s important to have a clear, understandable website that gets right to the point. Think about what you’d want to see if you were hiring someone like yourself. And the best thing you can do is make something special for your future employer. Show them that you really want the gig and that you deserve it.

I have heard numerous professional & academic suggestions saying that to get success from a creative career, one must focus entirely on one particular area. As a jack of all trades yourself, what is your response to this approach?

  Question submitted by Mary Shinabarger


I wish I could agree with this, but I can’t. I can easily say that the more varied your skills are, the more valuable you are to employers. The last 3 people I hired are able to do 3D, UI design and are incredible digital painters. This trend isn’t going away. The marketplace changes so quickly that you need people that can do multiple things. I’m certain that focusing on one trade will make you better at it, but you’d be surprised at how creative you can be in other disciplines.

Image courtesy of Ryan Terry

What do you think about, after turn off all of your monitors?

  Question submitted by Roy Velvet 


“Time to go home and be with my wonderful wife and baby daughter.”


Out of all of the currently active Disney animation productions, which one would be a dream project for you to work on?

  Question submitted by Mike McDonald


The Moana film looks stunningly beautiful. I’d love to be a part of that project.

Everybody seems to be forgetting the most important question: are you currently working on Star Wars?

  Question submitted by Paul Andrew

Ha! I wish. Most of us at Disney are waiting with baited breath to see this one just like everyone else. It’ll be fantastic.

Image courtesy of Ryan Terry

Phew! You made it, Ryan, awesome job! Could you tell us which was your favorite question and a little bit about the illustration you will be sending to the person who submitted the question?

My favorite question was from Butlerm: “Ryan, you seem to have a been a talented Flash animator when flash was still popular. What (if any) things did you do to transition yourself away from Flash when you saw the industry moving away from it?”

Artwork I’m giving away:

In light of Big Hero 6 winning an Oscar, I thought they might like to have the handful of original drawings I made of the characters.  Why give away one drawing when I can give away 6?!

Ryan Terry Artwork

 Many Thanks to Ryan for the Incredible Interview

I’d like to give Ryan a huge thanks for allowing us to interview him, he has been nothing short of kind and gracious throughout this opportunity, particularly with his time. We wish Ryan best wishes for the rest of his exciting career.!

But before we go, we have some prizes to give out!

Prize Winners

As Ryan mentioned earlier, ButlerM is our grand prize winner! Many congratulations!

We also had 3 T-shirts to give away for runners-up, and the winners are…

  1. T-Shirt Winner 1 – Mary Shinabarger
  2. T-Shirt winner 2 – Patche
  3. T-Shirt winner 3 – Mustafa

We’ll be in touch with all winners later this week, well done!

A big thank you to everyone who submitted questions! We appreciate the incredible response from our creative community and we could not have done this interview without you! We hope you enjoyed the interview and the opportunity to submit questions and get to know more about Ryan and his creative career at Disney!





Omaha Web Design Agency

Contact 92 West for a FREE Estimate

Source link

How To Create Effective App Screenshots For Your App Page

Omaha Web Design

Slowly but surely, the official app stores of iTunes, Google Play and Windows Phone Marketplace have transformed into a digital battlefield. App developers have to fight for recognition or otherwise be drowned in an ocean of competing mobile applications.

App store optimization (ASO), a strategy similar to SEO but specifically applied to the app pages in app stores, has become a handy addition to an app developer’s marketing plan, and promises to help increase visibility – and, as a consequence, downloads – of a mobile app.

ASO consists of many elements, and should be considered a key component of publishing an app in an app store of choice. It encompasses every detail of a mobile app’s page, and can be split into on-page and off-page elements.

On-page app store optimization elements include all components that appear directly on an app page on the relevant app store. On-page elements are:

Off-page app store optimization elements are external links that lead to the app page. They also encompass reviews by users, as they are not controlled by the publisher of the app. Off-page elements include:

While ASO requires some adjustments on all of the above elements, it is vitally important for an app to undergo all checks before being presented to the world. In this article, we’ll take a closer look at app screenshots, one of the two key decision-making helpers for anyone who downloads an app.

Why Care?

In today’s digital age, steady information flow and social media madness are making it almost impossible to get someone to stay focused on what you want to tell them – even if it’s just about a simple app page. We’re constantly distracted, and we (think we) don’t have the time to sit still and listen or read for a moment. Research suggests that our attention span has reduced to eight seconds1. The guys over at Slate wrote an interesting article about the same phenomenon, and why you won’t read to the end of an article2 any more.

We are going back to the principle that the first impression counts: you have a bare few seconds to command attention; use them wisely to arouse interest and get the viewer to click, scroll and download.

The importance of app screenshots is communicated in a clear message. Apple’s iTunes has undergone quite a revolution, where app screenshots have pushed app descriptions to the background and taken the front page on the app search, and the app page as well. This is the change from iOS 6 to iOS 73. Now, with iOS 8 in use, Apple continues to focus on imagery rather than text4. Same goes for Android.

Google Play6 has moved screenshots above the page fold. (View large version7)

The design of an app represents the key factor for almost 50% of people to say yay or nay to an app. This factor is surpassed only by app reviews and ratings. While app reviews belong to the off-page factors and cannot easily be influenced, app screenshots are on-page factors and can be entirely tailored to your needs. App design – and the corresponding screenshots of it – should take the #1 spot in an app developer’s marketing prep list.

Visual communication is certainly faster than verbal communication. Hence, putting sharp focus on your app’s design and creating visually appealing screenshots can only bring good to your mission.

Getting Started With The Basics

App screenshots should not be selected randomly. The best practice is to pick those screenshots that best explain your app’s purpose.

The major app stores allow you a total of five images to relay your message. Is your app a messenger app for teenagers? A fitness app for pregnant women? A mobile scanner? A jump-n-run adventure game? You need to make sure anyone can get the point by viewing your screenshots.

Another way to approach app screenshots is by asking yourself the following questions:

If you can answer these questions visually with your app screenshots, you’re on to a winner and half of the work is done. Should you struggle to find the answer to these questions at hand, let’s dig further.

About Uniqueness

No matter what task you’d like to accomplish, there is probably an app for that. It might even be that there are 10, 50 or 100 apps for that. Coming up with an app that is truly unique and a first-timer is very rare. Instead, the trend is going in two directions: either building huge interconnected app platforms like Salesforce, providing all-in-one solutions; or creating micro-apps – apps that tackle one little problem in the vast landscape of daily struggles. More often than not, you think you might have a first-timer, only to find a set of competitors when you have already advanced into the development phase of things.

The real world and the digital world today are overstimulated and oversaturated. There are hundreds of options for each thing you need – from tablecloths to entertainment systems – and we’re overloaded with a supply of millions of variations of the same thing.

In this day and age, the key is distinction and not uniqueness. We live in a competitive environment, and even if you were to build something that has glimpse of uniqueness to it, you’d soon be faced with competitors and find yourself again in this competitive situation.

Distinction can be found in a number of aspects that pertain to app design and their screenshots in particular. Here are a few possible examples:

I think you get the point. The objective is to do something better than someone else, and find a way to describe this advantage in a visual demonstration.

About the Technical Ins and Outs

App stores are adamant about the framework they provide. Find some general guidelines for your app screenshots here: sizes, dimensions, number of screenshots, DPI, file formats.

Google Play8 iTunes9 Windows Phone Marketplace10
Sizes According to supported device According to supported device According to supported device
Dimensions Minimum 320px
Maximum 3840px
According to supported device According to supported device
Number of screenshots Minimum of 2
Up to 8 total
Minimum of 1
Up to 5 total
Minimum of 1
Up to 8 total
DPI 72dpi
File formats JPG or PNG JPG or PNG JPG

About Order

One rule applies: put your most important screenshot first. There is no point in following a logical order – if you think your users need to understand the app’s steps, you’re wrong. You only have a few seconds: it’s in your best interest to put your best foot forward and get them hooked on your app as quickly as possible.

Things You Can Point Out With Your Screenshots

Without any further diversions, let’s take a look at some of the best use cases for app screenshots.

The Main Screen and What Your App Does

The most commonly used screenshot is the “what your app does” capture. Typically, it illustrates the main screen of the app, with an understandable amount of content so that the user can evaluate whether it is a good fit.

Spring11 provides a nice screenshot of the directory screen, perfect to display the clean design of the app. The Homework12 app lays out its most important screen and gives you an overview of what you get. Threes13 keeps it simple. A real screenshot of what the app really looks like. No added text, no distractions. It so happens to be that their app is really well designed, and won an award for that reason, too!

Spring, Homework and Threes show their main screens and what their apps do. (View large version15)
Important Notes

Feature Overviews and What Your App Includes

Other interesting captures are how your app is set up and how it works. Including a screenshot of your menu overview or additional features can help someone decide to choose your app. You must ensure, however, that your screenshot remains easily understandable.

The menu overview of Apple’s Healthbook16 emphasizes options and design at the same time.

Apple’s Healthbook emphasizes options and design at the same time.

PressViewer17 approaches the overview question differently. Instead of packing all its features into one screenshot, it uses all five slots to showcase the app’s functions in an easy step-by-step overview (no longer available on the app store).

PressViewer approaches the overview question differently. (View large version19)
Important Notes

Behavior of Your App and How Your App Is Used

If your app deviates from the traditional functionalities like tapping and scrolling, don’t be afraid to show it. There are some very interesting ways to showcase your app’s behavior.

Inbox by Google20 is a very agile app. By swiping left or right, you can mark messages as read or snoozed. Currency21 uses dragging functionality to spice up the app. Slide to the left to erase the number you previously inserted.

Inbox by Google and Currency demonstrate their behavior. (View large version23)

Swype24 tells the user how to compose words by swiping across the keyboard instead of tapping.

Swype also demonstrates its functionality. (View large version26)
Important Notes

Additional Text to Describe the App Screenshot

Over time, a clear trend has developed in the app screenshot niche: instead of using the available space to illustrate just the app screen, now developers shrink their screenshots to make space for some additional descriptive text.

Asana27 briefly describes what the app screenshot demonstrates. TeamStuff28 uses the extra text strategy, and gets creative with the placement of the text. Instead of the traditional overhead two-liner, the info is placed in the bottom right corner.

Asana and TeamStuff use additional text to describe their apps. (View large version30)
Important Notes

Including Media Mentions and Awards

If you have received recognition for your awesome mobile app, don’t be shy to brag about it! Adding award icons to your screenshot can add that extra bit of credibility to the decision-making process.

Good.co31 emphasizes its app’s four main features, along with some important media mentions to create credibility and interest. SkyView Free32 includes its awards in the app screenshot.

08-skyview-goodco-opt-small33 and SkyView Free show media mentions and awards. (View large version34)
Important Notes

Understand How Design Works

The design of your app screenshots will greatly depend on the design of your app. While you should follow the same fonts, colors and style you used to create your mobile app, you do have some room to improve the looks of your app in your app screenshots.

Font, Color and Style

Should you decide to add a line or two of descriptive text in your app screenshots (as suggested above), pick a font that corresponds with those you used in your app. It creates a uniform impression. For your app screenshot outline, choose a color scheme that fits your app’s design. You are not restricted to the same colors across all your available screenshots, so feel free to pick custom colors for every screenshot. Stick to your theme and style. If your app is playful, make your app screenshots playful. If your app is minimalistic, apply the same approach to your app screenshots.

Pocket35 uses the same font throughout the app and the additional description. Aconex36 uses extra text (in a creative setting!) to share further details on what the app does and offers. It gives the developer extra room to communicate the app’s purpose. The font is not the same as in the app, but it looks like handwriting and fits the app theme.

Pocket and Aconex use fonts creatively to enhance their app screenshots. (View large version37)

Trim & Tone38 stands out because the developers opted to tilt the phone instead of making it stand straight. The color scheme and style of the app is seamlessly integrated into the screenshots as well. SnipSnap39 sticks to the green color scheme in the screenshots.

Trim & Tone and SnipSnap show effective use of color.

DiscoFingers40 is available in different countries, and therefore shows the user the app as it is available in that specific country store. All app stores allow you to create app pages for specific languages and countries – a very effective method to personalize a user’s experience.

Two different screenshots for DiscoFingers’ international markets. (View large version42)
Important Notes
  • Whether you use a solid color or blurred lines, ensure that they don’t interfere with your app screenshot and the message the screenshot sends.
  • Consult color palettes to discover interesting color matches you wouldn’t have otherwise considered.
  • Less is more. Remember, you are trying to show the viewer what your app really looks like in use.
  • Don’t forget to consider customization: create screenshots that appeal to your user’s nationality, culture, language, and so on.

Show Motion

Another up and coming approach is to present an app in use. Applying this practice makes the appearance even more real.

Paper43 surprised the world with some great new motion features: when tilting the app, the image seems to move along, offering the viewer a wider angle; the app also works with the cards concept, where you can drag and drop topics in and out of your newsfeed. Peek Calendar44 emphasizes the motion options within the app, showing how conveniently each day can be expanded to display all appointments of the day, or collapsed to get an overview of the workload distributed across the week. Cycloramic45 shows how it enables the iPhone to rotate around its y-axis to capture a panoramic picture.

Important Notes
  • Keep it simple and easily understandable.
  • Make it fun! Use your creativity and good design skills to show the user what is so great about your app.

A successful app page depends on many factors – and always on the app itself. Technology is a highly dynamic field, and requires constant updates in order to keep up with the ever evolving environment. Redesigning your app is a necessary step along the way. Most developers choose to time their redesign ideas based on software update requirements given by Google and Apple.

When creating your app screenshots you should pick one or two of the guidelines mentioned in this article and stick with them throughout all your screenshots; you wouldn’t want to overcrowd your designs.

A List Of Tools To Create Screenshots

Now that you’ve been through all the possible tips, tricks and inspiration boards possible, it’s time to get going! Whether you’re a professional or beginner, one of the following tools can come in handy in designing your screenshots:

  • Adobe Photoshop46 and Illustrator47 are great tools for those who know how to use them! Photoshop Online is available for $19.99 a month as part of Adobe’s Creative Cloud package offering. A 30-day free trial is also available.
  • Visme48 is the best option for those with limited software skills and high ambitions. Visme allows you dive in and create your screenshots with all your desired additions and details. Visme is free for up to three projects, then plans start at $6 a month.
  • Screenshot App49 is probably the fastest option to create screenshots that look good. Pick your format, add the screenshot and put some extra text in it. Done! Screenshot App is free to use.
  • Placeit50 is especially useful if you are looking to use screenshots that represent real-life use. Placeit provides a catalogue of situational scenarios you can choose from to represent your app’s use. Low-res images can be downloaded free. Placeit also offers subscription packages and one-time downloads for as little as $8.

Test-Drive Your Designs

In order to check that your app screenshots really hit the spot, it is necessary to test and monitor their performance. Frequently visit your developer dashboard on iTunes, Google Play or Windows Phone Marketplace and closely monitor user feedback. If you have followers and fans who you can draw feedback from, do so by creating surveys to collect answers. You can create beautiful surveys and questionnaires using Typeform51 and find out what users think of your app design (don’t forget to reward them for their input!).


As mentioned above, two main elements account for most app downloads; app screenshots and app ratings. This article covered the importance of app screenshots in full.

You have learned why they matter; you have come to understand how to determine what screenshots matter the most. You’ve also gotten examples of apps that do it right, and have immense success because of their visual appeal – which they communicated very well in their app screenshots!

To summarize, the most important takeaway lessons of this article are:

  • Use all your available screenshot slots and put your most important screenshot first.
  • Follow clear design guidelines and help your user understand your app from the first second.

The success of your app definitely does not depend solely on its looks: it has to be functional and solve someone’s problem (for example, a mobile scanner app), or enhance a current experience (for example, a nice camera app). But, given the human attraction to looks and visual cues, giving app screenshots a good amount of focus cannot be wrong.

In the next article, we’ll examine app ratings, and how you can influence what your users will say about your app.

Do you want to discuss any points that were mentioned here? Please feel free to share your thoughts in the comments below.

(ml, og)


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13!/id779157948?mt=8
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51

The post How To Create Effective App Screenshots For Your App Page appeared first on Smashing Magazine.

Source link

Omaha’s Local Web Design Agency

Getting Started with Adobe After Effects

After Effects’ extensive and professional-level array of tools and features has made it the first choice for professional and amateur filmmakers and animators for a number of years now.

But for anyone that is just starting out with the application, it can have an intimidating learning curve. So, to help you create video backgrounds for your website and to also help get you on the path to visual storytelling genius, we have a 10 part video course that has been specifically designed to help anyone that is stepping into the world of After Effects for the very first time.

Logo_x2_retinaThis tutorial series has been published as part of our Master Video in Web Design event. For more articles, tutorials and free files click here.

Before you dive into the tutorials, perhaps you should download this After Effects cheat sheet, it will help, especially when it comes to learning After Effects terminology.

Course Overview & Introduction to After Effects