Background Check: Automatically change element colors
Background Check will automatically change the colors of various elements based on the color of the background. It’s an invaluable tool for responsive designs where text must float over images, or for things like sliders where images may alternate between light and dark backgrounds.
If an element overlaps any of the images, either .background--dark or .background--light is added to it. BackgroundCheck does not change an element's style — you must do so using CSS.
For example, if <p> has the following default style:
p{color:white;}
you can then add the following:
p.background--light{color:black;}
Classes are only added if the element overlaps an image. An element is considered to overlap an image if at least 50% (configurable) of it's area is covering that image.
Complex backgrounds
The light and dark classes work well with simple backgrounds, but you might require an additional level of control for elaborate backgrounds. BackgroundCheck adds .background--complex to an element if its background exceeds a certain level of complexity.
// Check all elements with a .target class against all images on a pageBackgroundCheck.init({targets:'.target'});// Specific imagesBackgroundCheck.init({targets:'.target',images:'.thumbnails'});
Reprocess
// All targetsBackgroundCheck.refresh();// Specific targetBackgroundCheck.refresh(target);
Setters and getters
// Get current targetsBackgroundCheck.get('targets');// Change targetsBackgroundCheck.set('targets','.header');
Stop
BackgroundCheck.destroy();
Attributes
Used with .init(), .set() or .get()
targets: Elements to be processed. Type: String, Element or Nodelist. Required.
images: Images to be used. Type: String, Element or NodeList. Default: All images on page.
changeParent: Determines if classes are added to a target or to its parent. Default: false.
threshold: Midpoint between dark and light. Default: 50 (%).
minComplexity: Minimum image complexity required before the complex class is added to a target. Default: 30 (%).
minOverlap: Minimum overlap required between an element and any of the images for that element to be processed. Default: 50 (%).
Video itself has been around for a long time; in films, on the television and now readily available to play on our phones, tablets and other devices. Video on the web has also been around for a long time. We started out with heavy-weight flash files of videos and animations, whereas now we have HTML5 video and so many more options for including video in our web pages. Heck, half the time it’s even just as easy as dropping some embed code into a website. In short, we’ve never had it as easy when it comes to using video on the web.
The Evolution of Video
Designing with video was much harder in the past than it is now. Taking good quality video footage often involved heavy and expensive equipment and software, whereas now we can use our normal digital cameras (or even our phones!) to take great quality footage. And if you wanted animated sequences on your website, you had to either be very good at illustrating digitally, know a lot of Actionscript, or your way around Flash, or hire someone else to do it. Now, there are tools and pieces of software out there that help you to create animations all by themselves.
Also, think about the creation of YouTube. Founded in 2005, YouTube is the most popular service that people use to upload and share their own videos. Even massive corporations and businesses use it to share popular clips or news from their TV shows.
In my opinion, YouTube brought around a bit of an evolution of video on the web. They made it easy for viral campaigns to spread quickly and video quickly exploded onto the scene. YouTube offered something that few had been able to do before: anybody and everybody could create video and share it to whomever they liked, regardless of their experience or technical ability.
Video on the Web Today
Nowadays, we have so many technologies at our disposal that Flash has mostly fallen by the wayside. HTML5 makes it much easier for us to develop ways to display our videos and other animated, visual footage in our websites. Having this technology is great, as it means that we have much better opportunities to use video in our designs and actually use it to make our users’ experiences better.
But I’m not here to talk about YouTube and Vimeo all day, or even to tell you about all the technical advances and techniques you can use to include video in your websites. Instead, I’ll walk you through why it’s good to include videos in your design and what makes video great.
How We Can Use Video
Video can be used in so many ways to enhance our designs and make the user journey and experience better. Just like you would with various imagery (whether it’s photography, icons or animations) you should be aiming to use video in your designs to improve your designs. Keep in mind you want your message to be clear with or without the videos.
With any video it’s important that you think clearly about the message you want to project. While this can depend totally on the brand, product or service, use video as carefully as you would any other elements in your design.
That said, we can use videos…
..To Introduce
Videos are great for introducing your users to a product or service without overpowering them with a list of features a mile long. Think of many SaaS websites; how many can you see with an intro video that explains the product or service a little more?
The key with this video is to make it the focus of your design. While you will want to mention the features in text and imagery below, having a video that shows the main features in a creative way is a sure-fire way of getting your users to notice the product and want to try it more.
A couple of great examples of this are on the Clear app and Paper app websites.
Clear
Clear is a to-do and list-tackling app. Clear’s website is a great example of using video as a focus, but also ensuring that the message about the app comes through loud-and-clear without the video.
The video is placed in the header of the website, right next to the app download links, and when clicked it loads the video in a little overlay.
This video is just an introduction to the product and app itself, but what works well is the consistency in the brand and visuals from the website design to the video. As you’ll have learned in previous articles, consistency is key to creating a strong brand message and in matching those together so well, it will make users more likely to trust the brand and therefore go on to buy the app.
Paper
Paper is an app that allows you to sketch and draw beautifully on your iPad.
The focus on the video on the Paper website is even bigger than on the Clear website, with a larger, really visually-striking header image in place, with a video play icon over the top of the image. On clicking to play the video, though, it also opened in an overlay on top of the rest of the website design.
Again, as with Clear, the brand message, style and tone of voice is kept very similar to the rest of the website design. Creating consistency like this can only help you to gain more users trust in the long run – so be sure to not create a mismatch in styles if you do decide to include a video in your website designs.
..To Delight
One great thing about video (if used cleverly) is that you can use it to delight your users, by introducing hidden features that they might not have thought about. Almost like a little easter egg, but a little more visible, and much more visual!
This use of video in designs is purely subjective and would again depend on how the brand needs to be represented. This might not be suitable in website designs that are for professional companies, but would be perfect in something a little more casual in style.
A couple of websites using this to great effect are Handheld Conf and Playground Inc.
Handheld Conf
Handheld Conf is a conference that describes itself as “big ideas for small devices”. On the homepage of the Handheld Conf website, there’s a line up of amazing speakers and their topics, along with a photo. Now, when you hover over the speaker photos, they come to life!
This is an amazing little treat for users; almost uncannily like photographs in the world of Harry Potter, that move. As soon as your cursor hovers away from the photos, they pause at the point where your cursor left the photo. And if you go back on to them, they resume.
Using video like this is a great way to add a little more interactivity into your websites, but also creating small ways for your user to enjoy browsing the website more.
Playground Inc
Playground Inc are a creative digital agency based in Toronto. On their homepage, they use animation brilliantly to help illustrate their ideas and beliefs. These animations only activate once you’ve scrolled to that part of the page and before that, they look like static illustrations.
This is a great way to add interest to your website that will delight users, as it is something that is totally unexpected but that enhances the way they can interact with your site.
..To Add Interest
Hand in hand with using video to delight your users, you can also use video to add extra visual interest and weight to your design elements. This is a great way to use video as it ensures that you can keep the interest level in your website higher than if you had much fewer visual elements to catch the user’s eye.
A great example of this is seen on the Symbolset website.
Symbolset
Symbolset create icon web fonts for all of us lovely web people to use. Personally I think the way that Symbolset works is pretty inventive and the way they use video on their website is no different.
If you’re using the Symbolset fonts on the Desktop (in Photoshop, for example) then you can type out the keyword for the icon you require and it will appear for you. In the same manner, they have used this in their video.
Symbolset also really cleverly make use of colour alongside each of the messages they type out to you in their video, keeping visual interest at a massive high. This sort of video is also really inclusive, as it makes it feel like the website is talking to you and connecting personally with you; which again will help to build the trust between the user and the company itself.
..To Replace Large Background Images
A trend that has long been around is the large, often (though not restricted to) full-screen-sized background image. Some companies are now instead using this as an opportunity as a space to place their full-screen-size video.
While this is nothing new, you have to think carefully about how you use this style of video in your designs. Instead of just a large full-scale background image – which is relatively easy to work around with your design elements – a video is something that is always moving and may cause havoc with your design elements (think typography, colour, buttons, other elements like that) when mixed with the moving video. It’s a new challenge, but can be used cleverly with careful thought.
A couple of great examples of large background videos are by Spotify and Slow Mo.
Spotify
Spotify are a popular music-streaming service. Their website homepage utilises the large-scale background video to great effect, with a looping video with a minimal amount of other design elements laid over the top.
Spotify have also decided to include audio on this video (which you can turn off very easily, a must have when including audio on any website), which enhances the video even further.
The video, audio and design of the homepage overall helps to set the tone for the service and helps the users understand a little more about the service and their tagline of “music for every moment”, all without directly saying what Spotify actually does.
Slow Mo
Slow Mo are high speed camera specialists. They use video in place of an image for the hero area at the top of the homepage. What’s clever about Slow Mo is that at their essence they are a company that sells high speed cameras, and they use video to help sell that.
The videos they use on their homepage are all played automatically in a slow-motion style and tie in perfectly with the brand’s name. It also creates a lot of visual interest, while the contrast between the video and the text that overlays it is always kept strong.
..To Improve Your Storytelling
One final thing that you can do by using video in your designs is to use it to improve your storytelling skills. Storytelling isn’t anything new, but you can use video to enhance it even more. Storytelling should be at the heart of your designs and video is one step to take that can help improve the experience that your users will have on your website.
A great example of this in action is on Dan Eden’s personal website.
Daneden.me
Dan is a designer, who has recently been hired by Dropbox as the first Dropbox Design Intern. In the portfolio section of Dan’s website, alongside the project title and descriptions he also has (beautiful looking) videos that walk the user through the project.
This is brilliant. Instead of showing simple screenshots or linking to the website, Dan is improving the experience of his users by allowing them to see the project in action without going anywhere else. This is great as it adds interest to the page, but it will also encourage users to visit a website if they like the look of it.
It can sometimes be very hard to get an inkling for how a website works without browsing it yourself, but Dan has managed to cross that bridge without adding any extra steps for his users.
Getting started in the world of design can be both thrilling and intimidating. Sometimes, you feel like you just don’t have the tools or skills you need to complete even the most basic projects. At other times, your mind is just buzzing with a multitude of ideas, but you may not have the best way to organize them. Yet, throughout the process of becoming a designer you will grow and expand both as a person, artist and designer.
Design is the method of putting form and content together. Design, just as art, has multiple definitions; there is no single definition. Design can be art. Design can be aesthetics. Design is so simple, that’s why it is so complicated. – Paul Rand
The key to starting out a successful career in design, is creating your own toolkit. This toolkit should be an array of design resources that help you transform a blank canvas into something incredible. Today, we’ve compiled 20 of the best design resources out there for anyone starting out in the world of design. Here you’ll find design tools, as well as useful websites to help you complete design projects, gain inspiration, and become an awesome designer.
1. Lorem Ipsum Generators: For many of your design projects you’re going to want to know how text is going to look. You’ll normally see lorem ipsum text on website designs available for use and purchase so you can see how text would look on the site. Will the color scheme work well? Can you see the text? Is the text big enough? A lorem ipsum generator gives you a large amount of text to incorporate in your designs so you don’t have to come up with it yourself.
Here are some useful and funny lorem ipsum generators you can use for testing out the look and feel of your designs:
2. Icon Sets: As a designer, you’re going to need to be both versatile and quick when it comes to designing for clients. Sometimes you might not have the time to craft something entirely yourself, or may find that you’re missing a certain element. Having icon sets can help you create ads, banners, blog headers, campaign images, and web design in a snap. Use the icons to highlight important information, as part of background images, and for CTAs.
You should start out by playing around with icon sets from a single bundle and try coming up with all the ways you can use them. From there, try using icon sets of different styles and figuring out ways of incorporating them into different designs.
3. Color Scheme and Color Palette Resources: When you’re just starting out with design you’re going to want to understand how colors work together, and which colors are right for certain projects.
Here are some sites to help you better understand how to use color in your designs:
COLOURlovers: Browse palettes and create your own, discover new colors, and cool color combinations all in one site.
HEX to RBG Converter: Know how to convert your colors for different purposes and color schemas.
0 to 255: This tool lets you select a color, or find a random color and then find variations of that color.
Colorrrs: Discover random colors with the click of a button.
Interested in learning more about color? Check out these articles:
4. Smashing Magazine: If you’re interested in coding, mobile design, web design, and UX/UI Smashing Magazine is a great place for beginners and veteran designers. You’ll find new articles every day related to design and development, along with books, workshops and a job board.
Here, are some articles you may enjoy from Smashing Magazine:
5. Bounce: This tool lets you look at different elements of any webpage and make comments, highlight a specific area, and share with others. It’s a great way to look at what other people are doing on the web and state what you like, what you don’t like, and what you would change. Bounce let’s you better understand other people’s websites so you can make your sites optimized for whatever you need.
6. Useful Design Checklists: It’s hard to put these items into one section, but I think one very important tool for beginning designers is having a checklist. A checklist can help you make sure that you’ve done everything you’ve needed for a project, that your design is user friends, that your design looks good, and more. Here are some of my favorites:
7. Moqups: Need help with wireframing? Moqups is an HTML 5 app that can be used for wireframing, mockups, and laying out user interface elements. Moqups also features collaboration tools that allow others to look at what you’ve created, offer advice and crticism and help your project become even better.
8. Take Courses: If you’re just starting out in the world of design and development, sometimes taking a course can help you fill in any gaps in your knowledge and help get you started to being able to create and design the things you’ve only ever dreamed of.
There are numerous places to take courses, and you can look at your nearest college or university, or you can check out these resources to learn online:
Treehouse: Take courses in web design and development, learn to build websites and smartphone apps, and even start your own freelance business with Treehouse.
HOW Design University: Online courses and workshops for budding designers and freelancers.
Udemy Design Courses: Select graphic design courses based on what you want to learn and be able to create.
9. Objects and Illustrations: Every designer, especially those just starting out needs resources to help create designs faster that look incredible. You can incorporate ready-made design resources like arrows, flourishes, banners, and borders to decrease the amount of work you have to do.
10. Pattern Tap: Ever just want to look at what other people are doing when it comes to different areas of their website. Pattern Tap showcases everything from buttons to UI to headers and footers. It’s a great way to browse what other people are doing around the web to get inspiration for your own designs.
11. Firebug: At some point during your process of growing and developing as a designer you’re going to want to check out what other people are doing when it comes to web design and development. Firebug is a free tool that integrates with Firefox, and lets you inspect and edit the HTML of websites. For example, you may wonder what’s making a website look a certain way. Firebug lets you inspect the code that creates the look and feel of a web page. It’s a handy tool every beginning designer should become familiar with.
12. Superhero.js: Both the creation and maintenance of expansive Javascript code can be difficult. Superhero.js has curated a number of resources to help you get on your way when it comes to Javascript. It’s a great resource for beginners and helpful to get you started.
13. Harvest: It’s extremely important to manage your time, keep track of hours, and be accurate with expense reporting when you’re just starting out. If you start out by using a software or program to monitor the work you’ve done, you’re more likely to stay organized and manage your work for clients well in the future. Harvest helps you manage your projects, track the time spent doing certain parts of your project, and helps you with invoicing clients.
14. Primer: This is a great tool for beginning designers looking to get into development. Primer allows you to copy and paste HTML into a doc, and then click the button and you get a basic CSS sheet based on the styles and classes you used in your HTML. It’s a great way to learn CSS and understand HTML vs CSS.
15. Tools for Responsive Design: You’re going to need to understand and be able to create responsive friendly designs if you’re going to world in the world of the internet. Having tools to help you create responsive design is important. Check out 12 Helpful Tools for Responsive Web Design and Top 10 Responsive Web Design Tools to get your designs responsive-ready.
16. Google Fonts: If you’re looking to use fonts on your website, or just understand how fonts work on the internet, Google Fonts is a great tool to see trending fonts, understand how fonts look on the web check out what text looks like with different typefaces.
17. Background, Texture, and Pattern Sets: When it comes to design you’re going to need a wide variety of backgrounds and textures to incorporate into your designs. It’s good to have hundreds of items that you can use and change for different design projects. You can combine backgrounds and textures to create new looks, and incorporate patterns into different areas of print and web design. Here are some of our favorite sets for your design use:
18. Gridwax: This easy to use bookmarklet allows you to add a grid overlay to your website to help you make sure everything is aligned and looks just how you want it to.
19. Launchlist: It’s important to make sure you have everything finished, complete, and ready to go when you’re about to publish a new design or submit something to a client. Launchlist is a tool that helps people in the area of web design and development to check their work before publishing. When you’re just starting out, it’s important to make sure you have all your bases covered and that you know your designs are complete. This tool will help you make sure you complete your projects with ease, and that you didn’t forget anything.
20. Font Resources for Designers: Every designer, no matter what skill level, should have a number of fonts in their design toolkit. When you’re just starting out, you’ll want to spend a lot of time playing with fonts, seeing fonts look combined together, and what fonts look best for print and web.
You’re going to want your toolkit to contain fonts of different styles including: display fonts, script fonts, serif fonts, san-serif fonts, and unique fonts to play with and get used to using together in your designs.
페르소나(persona, 복수형 personas)는 어떤 제품 혹은 서비스를 사용할 만한 목표 인구 집단 안에 있는 다양한 사용자 유형들을 대표하는 가상의 인물이다. 페르소나는 어떤 제품이나 혹은 서비스를 개발하기 위하여 시장과 환경 그리고 사용자들을 이해하기 위해 사용되는데 어떤 특정한 상황과 환경속에서 어떤 전형적인 인물이 어떻게 행동할 것인가에 대한 예측을 위해 실제 사용자 자료를 바탕으로 개인의 개성을 부여하여 만들어진다. 페르소나는 가상의 인물을 묘사하고 그 인물의 배경과 환경 등을 설명하는 문서로 꾸며지는데 가상의 이름, 목표, 평소에 느끼는 불편함, 그 인물이 가지는 필요 니즈등으로 구성된다. 소프트웨어 개발, 가전제품 개발, 인터렉션 디자인 개발 등의 분야에서 사용자 연구의 한 방법과 마케팅 전략 수립을 위한 자료로 많이 이용되고 있다.
1988년 앨런 쿠퍼의 저서 "《정신병원에서 뛰쳐나온 디자인》"(Inmates Are Running the Asylum)에서 페르소나의 개념이 처음 소개되었다. 페르소나는 연구의 목적으로 개발된 방법론이 아니라 실무 중심의 방법론이다. 그 독특한 효과 덕분에 90년대부터 소프트웨어 개발과 인터렉션 디자인 분야에서 점점 인기를 끌게 되었다.[1]
앨런 쿠퍼는 1983년경에 시작한 프로젝트 개발 지원 프로그램 개발 프로젝트에서 당시 프로젝트 관리 업무를 맡고 있던 캐시라는 여성과 프로젝트 개발을 위해 일하게 되었다. 이때 그는 캐시의 역할과 행동을 흉내내어 기능성과 인터렉션 디자인 개발 과정에서 의사결정을 하는 데 이용하게 되었다. 이는 좋은 반응을 낳았고 이후 "루비"라는 비주얼 프로그래밍 언어를 개발할 때에도 "루비"라는 실제 IT업무를 담당하는 관리자를 모델로 한 가상인물을 만들어 이용하였다. 1995년에 세이전트의 고객들을 위한 인터렉션 디자인을 하면서 "척","신시아" 그리고 "랍"이라는 특정 목적을 위한 페르소나를 만들어 다양한 사용자들을 패턴화하고 이를 설명하는 데 사용하였다.[1]
페르소나의 방법론의 선구자인 프루이트와 아드린에 따르면 페르소나의 사용은 제품 개발에 있어서 몇가지 중요한 잇점을 가지는 연구 방법이다. 이 방법을 사용하면 복잡한 데이터나 통계자료에 의존하여 시장과 사용자를 이해하는 대신 인간의 얼굴을 가진 한 개인적 인격체로서 보다 인지적으로 가깝게 느낄 수 있게 된다. 어떤 가상적 인물이 가질 필요에 대해 생각하게 되면 디자이너는 실제 사용자들이 필요하고 느낄만한 것에 대해 보다 쉽게 이해하고 접근할 수 있게 된다. 페르소나는 브레인 스토밍이나 유스케이스 분석 혹은 기능 정의등의 개발과정에 다양하게 쓰일 수 있다. 또한 페르소나는 마케팅, 디자인, 판매등 다양한 조직간에 사용자 이해를 위한 상호소통의 도구로서 유용하게 이용할 수 있다.
개발 팀 내부에서 어떤 특정하고 지속적으로 다양한 대상 사용자 그룹들의 이해를 돕는 데 쓰인다. 다양한 조사 데이터는 적절한 맥락안에서 조합되며 탄탄히 연결된 이야기 구조에서 이해되고 기억되어 개발 과정에 이용된다.
어떤 특정한 사용자 페르소나에게 해결안이 얼마나 적합할지를 평가하고 또한 그렇게 만족 시키도록 유도하는 가이드의 역할을 한다. 기능들은 하나 혹은 여러 페르소나가 가지는 필요를 얼마나 만족사키는지에 따라 우선순위가 매겨질 수 있다.
목표 대상의 인구학적 연구에서 만들어진 데이터에 사람의 개성을 부여함으로써 보다 인간적인 접근을 하고 동감을 느끼는 것이 가능하도록 하여 목표 대상에 보다 집중하는 데 도움이 된다.
Web Designer
