20 Resources for Beginner Designers & Developers

http://webdesignledger.com/resources/20-resources-for-beginner-designers-developers

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:

Hipster Ipsum

Cupcake Ipsum

One-Click Lorem Ipsum Generator

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.

Cosmos Set (1471 Icons) by IcoJam

600 Stroke Vector Icons by Zlate

Flatties

The Ultimate Pack

UI Icons

Hand-Drawn Icons

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:

• Inspiring Examples of Color in Web Design: Greens and Blues
• Making Color Considerations for Mobile Design

Recommended books to help you better understand color and design:

• Color Design Workbook: A Real World Guide to Using Color in Graphic Design
• Design Elements, Color Fundamentals: A Graphic Style Manual for Understanding How Color Affects Design

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:

• Introducing Responsive Web Typography With FlowType.JS
• Designing For Emotion With Hover Effects
• 50 New Useful CSS Techniques, Tools and Tutorials

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:

• Questions to ask clients before designing a website
• 22 Questions to Ask Before Developing a Website
• 42 Questions Every Freelancer Should Ask Their Clients
• How to Create an Effective Web Design Questionnaire
• Web Design Best Practices Checklist
• Quick Usability Checklist
• 25-point Website Usability Checklist
• A Website Design & Development Project Checklist / Template
• 15 Essential Checks Before Launching Your Website
• 50 Questions to Evaluate the Quality of Your Website

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:

• CodeAcademy: Learn to code, interactively 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.
• Teach Yourself Graphic Design: An online self-study course to help you learn the basics of graphic design.
• 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.

Here are some of our favorite resources:

225+ Vector Arrows

120 Decorative Shapes for PS and AI

Chalkboard Signs & Ribbons

Ornamental Flourishes

44 Decorative Vectors

67 Classic Frames

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:

Textured Watercolor Backgrounds

Soft Colored Textures

200 Blurred & Noisy Backgrounds

Chalkboard Textures

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.

Here are some fonts to get your toolkit started:

Stay Gold Script & Web Font by Decade Type Foundry

Lunchbox by Kimmy Design

Nueva York by Ed J Brown

Mocha Mattari

Church in the Wildwood

Black Velvet

Dirty Flamingo

페르소나(persona, 복수형 personas)는 어떤 제품 혹은 서비스를 사용할 만한 목표 인구 집단 안에 있는 다양한 사용자 유형들을 대표하는 가상의 인물이다. 페르소나는 어떤 제품이나 혹은 서비스를 개발하기 위하여 시장과 환경 그리고 사용자들을 이해하기 위해 사용되는데 어떤 특정한 상황과 환경속에서 어떤 전형적인 인물이 어떻게 행동할 것인가에 대한 예측을 위해 실제 사용자 자료를 바탕으로 개인의 개성을 부여하여 만들어진다. 페르소나는 가상의 인물을 묘사하고 그 인물의 배경과 환경 등을 설명하는 문서로 꾸며지는데 가상의 이름, 목표, 평소에 느끼는 불편함, 그 인물이 가지는 필요 니즈등으로 구성된다. 소프트웨어 개발, 가전제품 개발, 인터렉션 디자인 개발 등의 분야에서 사용자 연구의 한 방법과 마케팅 전략 수립을 위한 자료로 많이 이용되고 있다.

역사[편집]

1988년 앨런 쿠퍼의 저서 "《정신병원에서 뛰쳐나온 디자인》"(Inmates Are Running the Asylum)에서 페르소나의 개념이 처음 소개되었다. 페르소나는 연구의 목적으로 개발된 방법론이 아니라 실무 중심의 방법론이다. 그 독특한 효과 덕분에 90년대부터 소프트웨어 개발과 인터렉션 디자인 분야에서 점점 인기를 끌게 되었다.^[1]

앨런 쿠퍼는 1983년경에 시작한 프로젝트 개발 지원 프로그램 개발 프로젝트에서 당시 프로젝트 관리 업무를 맡고 있던 캐시라는 여성과 프로젝트 개발을 위해 일하게 되었다. 이때 그는 캐시의 역할과 행동을 흉내내어 기능성과 인터렉션 디자인 개발 과정에서 의사결정을 하는 데 이용하게 되었다. 이는 좋은 반응을 낳았고 이후 "루비"라는 비주얼 프로그래밍 언어를 개발할 때에도 "루비"라는 실제 IT업무를 담당하는 관리자를 모델로 한 가상인물을 만들어 이용하였다. 1995년에 세이전트의 고객들을 위한 인터렉션 디자인을 하면서 "척","신시아" 그리고 "랍"이라는 특정 목적을 위한 페르소나를 만들어 다양한 사용자들을 패턴화하고 이를 설명하는 데 사용하였다.^[1]

페르소나 방법의 이점[편집]

페르소나의 방법론의 선구자인 프루이트와 아드린에 따르면 페르소나의 사용은 제품 개발에 있어서 몇가지 중요한 잇점을 가지는 연구 방법이다. 이 방법을 사용하면 복잡한 데이터나 통계자료에 의존하여 시장과 사용자를 이해하는 대신 인간의 얼굴을 가진 한 개인적 인격체로서 보다 인지적으로 가깝게 느낄 수 있게 된다. 어떤 가상적 인물이 가질 필요에 대해 생각하게 되면 디자이너는 실제 사용자들이 필요하고 느낄만한 것에 대해 보다 쉽게 이해하고 접근할 수 있게 된다. 페르소나는 브레인 스토밍이나 유스케이스 분석 혹은 기능 정의등의 개발과정에 다양하게 쓰일 수 있다. 또한 페르소나는 마케팅, 디자인, 판매등 다양한 조직간에 사용자 이해를 위한 상호소통의 도구로서 유용하게 이용할 수 있다.

1. 개발 팀 내부에서 어떤 특정하고 지속적으로 다양한 대상 사용자 그룹들의 이해를 돕는 데 쓰인다. 다양한 조사 데이터는 적절한 맥락안에서 조합되며 탄탄히 연결된 이야기 구조에서 이해되고 기억되어 개발 과정에 이용된다.
2. 어떤 특정한 사용자 페르소나에게 해결안이 얼마나 적합할지를 평가하고 또한 그렇게 만족 시키도록 유도하는 가이드의 역할을 한다. 기능들은 하나 혹은 여러 페르소나가 가지는 필요를 얼마나 만족사키는지에 따라 우선순위가 매겨질 수 있다.
3. 목표 대상의 인구학적 연구에서 만들어진 데이터에 사람의 개성을 부여함으로써 보다 인간적인 접근을 하고 동감을 느끼는 것이 가능하도록 하여 목표 대상에 보다 집중하는 데 도움이 된다.

인텔이 만든 HTML5hub.com

http://html5hub.com

WSJ : http://online.wsj.com/article/SB10001424052970203537304577030033160849296.html

http://realtime.wsj.com/korea/2011/11/14/html5-%EC%9B%B9%EC%9D%84-%EB%B3%80%ED%99%94%EC%8B%9C%ED%82%A4%EA%B3%A0-%EC%9E%88%EB%8A%94-%EA%B8%B0%EC%88%A0/

HTML5: A Look Behind the Technology Changing the Web

HTML5: 웹을 변화시키고 있는 기술

일련의 프로그래밍 기술인 HTML5는 스티브 잡스가 이례적 에세이에서 홍보를 한 지 1년 반이 지난 지금 웹 분야의 새로운 표준으로 빠르게 떠오르고 있다.

HTML5 기술을 통해 인터넷 브라우저에서 이용자들의 행동에 대한 다채로운 이미지와 효과를 보여줌으로써, 추가 소프트웨어 설치 없이도 마치 게임을 하는 듯한 쌍방향적 소통이 가능해진다. 개발자들은 HTML5를 사용해서, 특정 하드웨어나 온라인 스토어에 대한 맞춤형 앱 없이도 자신들이 개발한 컨텐츠를 다양한 스마트폰과 타블렛PC, 컴퓨터에서 구현할 수 있다.

.

8 Tips for Print Designers Switching to Web & Digital Design

More designers are working across platforms these days, switching back and forth between print and digital projects. Although much of the theory is the same, in practice there are a lot of technical differences when it comes to working on something that will be printed versus a website. It takes a specific set of knowledge and skills to work effectively and efficiently in both environments.

But it is possible. Here we share eight tips for print designers making the switch to digital projects. (And I can vouch for every single tip as a designer who has made the switch.)

Design is Fluid

One of the things that does not change in print design is size. Every document is designed and printed at a certain size. (And frequently on a single medium as well.)

This just is not how the web works. Every user could look at a website using a different browser width and height, or look at the site on a mobile phone or tablet. So every design must account for a variety of sizes and devices.

Familiarize yourself with responsive design, what it is and how it works. Responsive design (sometimes called RWD) is an approach to website design where sites are created to view optimally regardless of device – desktop, tablet or mobile. Designers create the design using fluid, proportion-based grid concepts and flexible typography and images.

In addition to size changes, space is “unlimited.” As a designer you are not stuck in the constraints of a 4 by 6 inch postcard or 11 by 17 poster. The canvas goes on for as many pages as you like and can scroll almost infinitely.

Learn a Little HTML

If you want to design for the web, you have to know the basics. And you can start by training yourself. (Check out this previous Design Shack article for a list of great places to start.)

Start with a little HTML, the language of the web. With just a little understanding of HTML, you can learn to easily change colors, fonts and sizes on a website. HTML is the foundation that everything web-based is built on and without it, you will struggle in digital design.

Once you get comfortable with the basics of HTML, branch out to CSS and basic code. CSS, or Cascading Style Sheets, allow you to create and alter a set of styles for your website based on a style sheet. It creates a set of design rules and can be used to create website hierarchy and maintain visual consistency. Understanding basic coding concepts will help you understand why things work they way they do on the web. Although coding looks like gibberish at first, it makes sense once you really start to look at it.

You don’t have to be a master of HTML or CSS or code to create a great digital project, but it will help tremendously.

Create Dynamic Content

Print design is innately flat. Text and images are rest on top of some type of paper or other flat surface. Digital design is dynamic and active. Remember this and use it to your advantage.

Objects can move, include sound or links and even tools that make items pop up or hover when the user gets close to them. Web and digital projects should be designed for the user experience. This might be quite a change from some of the philosophies you are used to in the print world.

It is also important to use common visual cues and user interface actions so that your website works in a way that users expect and know how to use.

Color is Different

Print designers work in CMYK. Digital design is based in RGB or HEX color.

Just as CMYK color is explained using numbers to represent color values of basic hues to make every possible color, RGB works using the same concept. RGB – red, green, blue – are mixed in different amounts to create every color in the digital spectrum.

The difference is in how colors are created. CMYK – cyan, magenta, yellow, black – is created by combining colors in the printing process. RGB is a combination of colors displayed in light.

Colors are named with RGB values (from 0 to 255 or each color) to create 16 million different combinations.

HEX values are an extension of RGB color and every value corresponds to an RGB color. A HEX value is simply the HTML expression of an RGB color. Colors are named using # followed by a six-digit number, where each number pair refers to red, green and blue. (HEX values also contain letters to represent numbers greater than 99.)

Understanding Web Typography

Print designers may be used to the idea that they can use any font and have an unlimited number of typefaces available. (Depending on licensing, of course.)

Web typography can be somewhat trickier, although it is improving all the time. The biggest challenge is understanding type and browser compatibility. Not every typeface will render the same way on different devices.

Then there are basic web standards and readability concerns that come from reading on a screen. Like it or not, sans serif typefaces are pretty much the standard when it comes to body text on the web. And the often-shunned typeface Arial, is everywhere. Why? Because it always renders as Arial. No surprises there.

The rest of the things you know about type remain the same. Practice good kerning, leading and tracking. Scale text proportionately to other type and elements in the design for a neat, clean overall look.

For the last couple of months, flat web design has been really a huge topic on the web. Up to now, it is steadily dominating the web. From UI, to the latest portfolio update, icons and even the top web design blogs are now using flat web design, not to mention Microsoft, Android and just recently Apple is going flat too!

So why are so many designers using this style?

Flat design makes things free from distractions, eliminating heavy background images, swirls, grunge that makes everything cluttered. It’s very easy to navigate, since there are no more gradients, drop shadows, glows and bevels. It puts more focus on the text, making everything readable from big screens down to mobile.

Oh, and besides if you want something more than inspiration we have nice flat countdown timer video tutorial created specially for You!

Okay, enough talking. Time to check our collection of flat web design for your inspiration!

Agency

Blocklevel

Nitrografix

Conversionforge

Madebyfibb

Fhoke

PSD2HTML

Pexelplant

Playgroundinc

Northbounddesign

App

Sumall

Nextr

Geckoboard

Numbrs

Triplagent

Inky

Kippt

Publiq

Product

Winds Phone

Fitbit

Wistia

Mailchimp

Teamsort

Yourkarma

Fusionads

Kinhr

Portfolio

Adam Rudzki

Theissland

Sammrkiewi

Ivomynttinen

Evan Richards

Builtbybuffalo

Daniel Pertrarolo

Stedesign

Others

WDMTG

Mint Themes

BYNC

Redbull Studios

MTCDC

Tree House

Square Space

Chilicon Graphic

Dunked

Adayinbigdata