Why is finding inspiration an essential process of design?

Finding inspiration is the process of being mentally stimulated to do or feel something, especially to do something creative.

In UI/UX design, it helps the designers build a moodboard, a group of design inspirations that the designers will use as a reference for colours, UI components and sometimes even interactions.

These inspirations are essential so that it helps the designer to come up with something special and unique for a problem they are trying to solve

What are the limitations of finding inspiration on the Internet?

Finding inspiration for UI design seems very easy these days as information is readily available on the Internet. However, inspiration on the Internet can sometimes be limiting.

Based on my observations and experience, searching for inspirations you don’t know is hard. It’s almost always the things you already know or are interested in. This bias can limit the designers from finding something out of the box.

Inspiration platforms such as Dribbble and Behance, accessible to the public, are too aesthetically focused and not functional if applied to UI/UX design.

Moreover, some problems can’t be found easily online, especially issues from large corporations with specific users and goals that might not be available online compared to B2C applications.

So, what other ways can the designers gather more interesting inspirations?

Most of the time, designers will gather inspiration during a project which is quite reactive. Inspiration is all around us in our daily lives, and we need to train our senses to detect them proactively and, most importantly, record them for future reference.

Experience kiosk interface design

Places like public transport stations and your country’s city centres can help designers to be inspired with a lot of applicable inspirations. The reason is that you experience how people use and interact with services, tools and apps.

I like to explore the usability of kiosk UI in public transport stations, fast food chains, and tourist spots whenever I use them in my country and other places. I like to observe how locals and tourists use it, such as:

1. How they interact with it, whether they need clarification or some help from others to use the interface
2. Who are the users? Are they locals or tourists?
3. How do they pay for the fare? Is it through e-wallets, credit cards or physical banknotes

These user interfaces and interactions can serve as good inspirations for design later on, especially for service design.

These user interfaces and interactions can serve as good inspirations for design later on, especially for service design.

It might help designers build user journey maps and determine a better interaction for specific users, as many people of different ages and life experiences use these public systems.

Skincare shops

I also like seeing the packaging designs from skincare shops like Innisfree, body shop, and loccitane.

The package design contains a lot of lovely illustrations created by talented illustrators in Malaysia and from other countries.

They act as colour inspiration that you can touch and feel compared to Dribbble, Behance’s digital version. You can learn how colours are paired to achieve harmony, which UI designers can use in the digital world. Though, of course, you should follow only some things.

Books

Before, user interface designs were a thing now. One of the best inspirations for designers to gather are from books, especially for designers that don’t design for digital screens.

I love flipping through design books as not only do they look nice physically, but they also have some excellent documentation on how things are designed.

I’m always very into grid, typography and signage design in train stations, so I bought some design books that talk about them, such as how and why they were implemented in such a way.

Based on the image above. You might think these books are for graphic and type designers, which is true. It is also usable for UI designers on the digital screen; the theory is still the same. They are just applied on a different medium with particular requirements that UI designers need to consider.

Some books are written in other languages but I mainly needed the visual inspiration and if I needed to read it, I’ll use Google Lens to translate it through my phone’s camera.

Interfaces from movies and games

Interfaces from movies and video games, especially futuristic ones, usually have UIs that WOW audiences and gamers. That WOW factor is one of the best things designers can capture and apply to their designs.

However, these inspirations also have their limitations. It might not be suitable for normal public users, but it might be possible for heavy engineering applications or high-tech projects if you are working on one.

There is one way to overcome this limitation (it doesn’t apply to all of the sci-fi movies) is that choose sci-fi that is more realistic such as The Martian which isn’t too far away into the future and it is more realistic.

You can find these inspirations here:

• Territory Studio
• Gmunk

Journaling your inspiration

Finally, make it a habit to observe the interactions between this UI and interactions and take note of it. You don’t have to write it down in a pocket notebook. Using your phone’s camera is a great way to capture and save the information to your computer.

These are the ways that I found helpful as a UI/UX designer to train myself to capture inspiration even when I’m not actively designing something so that I can use them whenever I need them. It saves time and teaches the designer to be sensitive to potential solutions that are already available but need to be more straightforward.

The post Finding Inspiration for UI/UX Design appeared first on Stampede: the strategic design & technology company.

These are amongst my favourites:

Stack Overflow

Deemed as the Quora for programmers, Stack Overflow is a site based on the concept of crowdsourcing where a user posts a question and will be answered by other users who have the knowledge. Free with no registration, this is the site where I first consult because most of the time, I would find the solutions here.

Smashing Magazine

With several categories such as Design, Mobile, UI/UX and loads more, Smashing Magazine is packed with interesting articles based around web design and development – which is not only useful for experienced designers and developers, but also for newbies and basically anyone who is interested in web development in general.

CSS Tricks

Owned by Chris Coyier, a designer at CodePen, CSS Tricks offer a lot of cutting edge techniques for use throughout the development process.

JS Fiddle

JS Fiddle is an open source javascript editor which offers you a canvas to try new stuff and share with people without the need to upload to your own server. It is good for experimenting, which I highly recommend.

A List Apart

A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices. Like Smashing Magazine, the site provides a lot of good articles regarding web development. I could spend hours and hours here going through every article.

CSS Community

CSS Community is a special community for CSS Designing Discussion on Google+. Among the topics discussed are CSS techniques, tips, tricks and many more. Functioning as a community, the members would also help you if you have any issues regarding CSS.

CSS3 Generator

Instead of writing all CSS3 stuff manually one line after another, which can be time consuming after a while – why not give it a try at CSS3 Generator?

Colorzilla

ColorZilla is a Mozilla extension that assists web developers and graphic designers with color related and other tasks. Pretty handy to speed up the development process.

Have you got your own list and would like to share with us? Feel free to add them in the comments section!

The post 8 Useful Resources for Front-End Developers appeared first on Stampede: the strategic design & technology company.

Are You the Boss You Need To Be?

For the very first time I hear my thoughts echoed in another person’s article – that man is a living resource that will continue to grow. I find this very true – my own work environment is full of creative people who would never stop learning and growing. I’ve been thinking all this time that, if only one or two people agree with my opinion, it’s probably not strong enough idea to be thought further and shared. The validation by this article makes me really happy.

I managed to take sometime this month to stop thinking about work for a while and instead, settle a few little (but aggravating) personal affairs of mine. I don’t think it’s not possible for someone whose life is unorganized, unplanned and without sold direction to be able to manage so many tasks and care for so many people. All should start from our own selves.

Continue reading “Are You the Boss You Need To Be?”

10 Ways to Boost Creativity

Prior to managing and motivating others, you need to manage and motivate yourself. Being creative at work begins with you feeling comfortable with yourself and your work space. Make effort to understand the problem and be careful when passing judgment. When making decision, involve people who understand the issues and exchange ideas with them. We should all treat each other the way we want to be treated, because in a team, the role of every person is equally important.

Continue reading “10 Ways to Boost Creativity”

Don’t Let “Post-Holiday” Letdown Threaten Your Remote Team

There are moments during a long vacation when I feel uncomfortable not thinking about work. Vacations are actually good opportunities to reflect and formulate new plans, as there aren’t scheduled activities to keep you occupied. Staying connected and keeping everyone on the team aware of what’s going on is primary. Upon returning from holidays, team members should be able to ease back into their work environment and teamwork atmosphere. A back-from-holiday welcome would also show them that they are greatly appreciated, anticipated and a joy to have back.

Continue reading “Don’t Let “Post-Holiday” Letdown Threaten Your Remote Team”

Keeping Your Team Productive and Happy During the Holidays Ain’t Easy – But It’s Important

Prior to any holidays, it’s crucial to note everyone’s days off, organize their tasks according to priority and complete the most important tasks first. It pays to know people’s habits and arrange for help or back-up plan around their unavailability. Not all surprises are good.

Continue reading “Keeping Your Team Productive and Happy During the Holidays Ain’t Easy – But It’s Important”

Effective Ways to Use Anger in the Office

There were times when I felt like losing control of the anger that resulted from personal or job-related issues. But now the good news .. It is completely normal when it happens occasionally. Not every negative energy must be channeled in negative manners. Instead of turning it into disaster, use the anger as energy solver. Be in control and focus on issues that are within your reach to resolve.

NOTE: Do not engage too long with people who make you angry. Either resolve it or walk away.

Continue reading “Effective Ways to Use Anger in the Office”

How to Manage Criticism Effectively

Responding to criticism with a negative attitude will only hinder your opportunity to grow. Criticism is a chance to correct mistakes and challenge yourself to attain more. People will not waste their time to think about you, let you know your mistakes and give suggestions to improve if you are not very important to them or believe that you are able to do better. Analyze the criticism by understanding yourself. If it is proven true and you acknowledge it, take action to fix it immediately. When it is false, do not sweat it.

Continue reading “How to Manage Criticism Effectively”

10 Ways to Stop Communication Overload

Keep communication simple, centralized and effective.

Continue reading “10 Ways to Stop Communication Overload”

Reasons to Work

Last but not least, if you are the right man in the right place, and all of your needs are met, you feel very important and special by your presence in this world, then you’ll be happy to work for the rest of your life.

Continue reading “Reasons to Work”

(picture via ffffound)

The post Managing Web Projects and People appeared first on Stampede: the strategic design & technology company.

Handcrafted CSS

Dan wrote everything inside this book based on CSS3 though it can easily merge with CSS5 in the future. He also covers ways to enriching web design using uncommon CSS3 properties and most importantly, how to render high-degree of style-consistency on every browser including IE6. In other words, Handcrafted CSS provides several ways to write CSS towards the same end result. There are 7 chapters in total, all covering CSS3 markups commonly used during web development with accompanying images for better details.

Chapter 1 covers a variety of styling the list element, particularly the <ul> element. Really simple modifications like font size adjustment, longer menu, floating, hovering treatment and positioning can lead to better, more usable listing style. This chapter also includes notes on how to change links into table and vice-versa.

Chapter 2 is all about “Rounded Corners”, deservedly so. It explains the handy property of border-radius on WebKit family browser (e.g Firefox and Safari). This method solves the problem of using of four extra <div> through the use of only one flexible rounded-corner box. With border-radius property, we can easily style flexible rounded input box – a frequent nightmare for many web developers. For me, I’m juts happy this method won’t screw other element and doesn’t require anything else besides CSS. The only downside is that it doesn’t work on IE7 and IE6, where all those sexy rounded corners and only shown as square, uninteresting boxes. I’ve also learned that twitter uses border-radius method.

RGBA is the main focus in Chapter 3. RGB stands for Red Green Blue – the color model that you can combine to create multitude hues – while RGBA stands for Red Green Blue and Alpha. This chapter will explain why there is an “alpha” value in RGB. In this chapter, Dan also show us how how to optimize color usage using CSS.

Chapter 4 covers text-shadow and box-shadow properties, again stuffs that are widely use by developers around the globe. Similar to “border-radius”, it eliminates the need to use any background image for the drop shadow effect. This means user can now easily change text and elements with drop-shadow on the fly.

Chapter 5 combines floating, stylesheet grouping, css framework and css reset. There are ways to tackle float, or known as “problem trigger”. The book suggests two solutions – clearing the float container and using single declaration for each element (will need long list css). It also shows the ways to to quarantine IE hacks and patches into developer’s own stylesheet. This chapter also discusses the two most popular frameworks at present: Blueprint and 960 Grid System. They are different but aims for the same objective – to make developers’ lives easier. The part about CSS reset covers essential things that you need to do to neutralize default css property values.

Chapter 6, The Fluid Grid is contributed by Ethan Marcotte and it elaborates more on the Grid System Framework. How to implement? What’s the problem expected to occur? Which browser doesn’t work? What is the solution? You’ll find pretty much everything about grid here.

Chapter 7 is dedicated to the details in web design craftsmanship. It discusses how typography can influence your design and gives valuable examples on how to make things more exciting for flash-like sliding animation using jQuery. Shifting backgrounds, collapsing/hiding image and the use of sliding bars are all new ways to sizzle up your web presence.

All in all, I have thoroughly enjoyed Handcrafted CSS. If you’re a front-end web developer or designer looking to harness CSS3 in your work, this book is a great start for you.

Handcrafted CSS: More Bulletproof Web Design
By Dan Cederholm and Ethan Marcotte.

The post Book Review: Handcrafted CSS appeared first on Stampede: the strategic design & technology company.