블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 올라온 글

최근에 달린 댓글

출처 : http://boxesandarrows.com/view/ux-design-planning

번역을 할 시간이... .. 나중에 해야겠군요..ㅡ.,ㅡ;

A lot of confusion and misunderstanding surrounds the term "user experience." The multitude of acitivities that can be labeled with these two words span a vast spectrum of people, skills and situations. If you ask for UX design (UXD), what exactly are you asking for? Similary, if someone tells you they are going to provide you with UXD for an application, website or intranet or extranet, what exactly are you going to get?

Is it just one person who is responsible or is it a team of people who are in charge of UXD? In this story I´ll sketch my ideas ofUXD based on my experiences and at the end of this story I will give you my answer.

Let us start at the beginning – UXD starts with experience – experience of the users. And so I will talk about the users first.

 

 

UXD-P – every person is an individual

Every person is an individual. Every person is in possession of different roles. For each individual there will be many roles and each person adopts a different role depending on the circumstances.

roles of experiences

User Roles

Sometimes the individual person holds one role, but mainly he will hold quite a few roles like consumer, customer, user, client, investor, producer, creator, participant, partner, part of a community, member, and so on.

 

 

UXD-P – network of expectations, experiences and knowledge

Every user is multi-faceted – and is considerably more complex than they themselves can imagine – so it´s not very helpful just to talk to the user or ask him what he needs. We have to watch what people do; we have to listen to what people say and to recognize what decisions people make – and by observing we have to evaluate and understand why they do this and that. Why and what kind of visual elements will the user like, prefer and or understand? Why and what kind of mental model, navigation or function do they respond to?



Jakob Nielsen said “To design an easy-to-use interface, pay attention to what users do, not only what they say. Self-reported claims are unreliable, as are user speculations about future behaviour.” (Jakob Nielsen – Alertbox) and I agree – I think no statement can be objective. Perhaps the circumstances are not realistic or not reasonable for the person. Or maybe the person himself is not really in the “situation,” or he is being influenced by other factors (trying to please the tester for example). Or maybe he is trying to succeed with the test rather than trying and failing, which tells us so much more.

When all three perspectives (do, say, make) are explored together, we are able to realize the experience spectrum of the “normal” user/customer we are working for.

Jesse James Garrett said: “User experience is not about how a product works on the inside. User experience is about how it works on the outside, where a person comes into contact with it and has to work with it” (J.J.Garrett – The Elements of User Experience) .

areas of experiences

Experiences

Areas of experiences: different areas which effect the quality of communication

 

 

UXD-P – personal and individual

When we talk about experiences, we take the individual into consideration, including the subjective occurrences felt by the person who has the “confrontation” with what we want them to use. Experiences are momentary and brief – sometimes they are part of a multi-layered process or they are on their own.



Normally such know-how has been learned as a part of something or by itself and will be remembered in the same way – but that’s not always the case – and the person deals with the situation in a different way. If we look at their exeperience as a continuum, the user brings their experiences of the past to the interaction in the present and adds their hopes for the future. That future could be: to interact with their banking in a safe and secure way.

flow of experiences

Flow of Experience

Flow of experience: the individual user/customer is always in the present – they act in the present. They are influenced by former experiences and current expectations.

UXD-P is taking the users’ views, behavior, and interactions, to figure out the emotional relationship between them and the thing we have built. For the most part these "people" and their experiences are unknown. It requires an appreciation of the customer: their journey, their personal history and their experiences.

It is the collective set of experiences, in the online-world, the offline-world, or even tiny little things (i.e. My coffee was cold this morning) that affects their experience of the products and the companies that represent them. It is about appreciating the individual user’s unmet needs, wants, capabilities and desires in a contextual way. It´s a box of experiences including the things the user saw, acted and felt. (BBC Two [12th February 2008, 9pm, BBC Two] had a program on rational thought. Highlights of the program include: Loss complex, Post-decision rationalization, Priming, Precognition. Watch highlights from the programme : http://www.bbc.co.uk/sn/tvradio/programmes/horizon/broadband/tx/decisions/highlights/ )

Experiences and expectations meet in the present. Both are inseperably combined, and every action we take takes both parts into consideration. When a person uses an application, he tries to understand what happens. He will always try to reference this to his past experiences. The moment is also tightly coupled to his expectations of his personal outlook.



At this point of “present” I think of the UX honeycomb of Peter Morville [1] …

honeycromb – Peter Morville

Morville’s "honeycomb"

honeycomb – Peter Morville (P.Morville – Facets of the User Experience)

In the present we have to deliver to the individual user and his specific task the best answers to following questions.


  • Is the application useful for the individual user and his specific task?
  • Is the application usable for the individual user and his specific task?
  • Is the application desirable for the individual user and his specific task?
  • Is the application valuable for the individual user and his specific task?
  • Is the application accessible? Available to every individual user, regardless of disability?
  • Is the target findable for the individual user and his specific task?
  • Is the application credible for the individual user and his specific task?

In the UXD-P the whole team has to take the users’ views of the GUI and the interactions to figure out the emotional relationship between the brand and potential customers. It requires a common appreciation of the customer journey and their personal history: not only with the product and similar products, but also with similar experiences.

 

 

UXD-P – teamwork and cooperation

The first stage in discovering – to invent or design for the experience – is to take a new viewpoint about the people who buy and use the products and services we are designing. This is a birdseye view and from step to step we have to use the "mouseview," which is to say a detailed view from the user’s perspective, as we develop the application we have to switch between these views. Our main desire is to to respect, value, and understand the continuum of experience and expectations our users have .

UXD-P can sometimes be a slippery term. With all the other often used terms that float around: interaction design, information architecture, human computer interaction, human factors engineering, usefulness, utility, usability and user interface design. People often end up asking, “What is the difference between all these fields and which one do I need?” If the UXD is aimed to describe the user’s satisfaction, joy or success with an application, product or website, however we specify it, there are a few key essentials which need to be tackled and I have to point out the UX honeycomb of Peter Morville [1] a second time. Each of these points, as enlightened above, makes up a considerable component of the user experience. Each is made effective due to the design offerings from each of the following elements:

Usefulness is based upon utility and usability. This means the product is able to give exactly the right kind of service and what the user is expecting from it. And it´s the joy of reaching my aims and the joy of doing so easily. The information architecture is in charge of clarity of the information and features, lack of confusion, a short learning curve and the joy of finding. The designing of the interaction is essential for a successful and overall satisfying experience. So the interaction design has to answer the questions of workflow, logic, clarity, and simplicity of the information. Visual design is responsible for the clarity of the information and elements, simplicity of tools and features, pleasant or interesting appearance of the interface, the visual hierarchy, and the joy of look and feel. Accessibility is a common term used to describe how easy it is for people to use applications or other objects. It is not to be mixed up with usability which is used to describe how easily an application, tool or object can be used by any type of user. One meaning of accessibility specifically focuses on people with disabilities: physical, psychological, learning, among others. Even though accessibility is not an element of its own, it is important to notice that accessibility also plays a role on the whole user experience to increase the likelihood of a wide-ranging user experience. People tend to gravitate to something that is easier to use regardless of who it might have been designed for.



The UXD innovation process is a nonlinear spiral of divergent and convergent activities that may repeat over time. Any design process begins with a vision. This applies particularly to the UX process. A vision, however, is not enough to start design. As I mentioned before, we always have different circumstances, users and roles. Therefore, it is critical to accurately understand the end user’s needs and requirements – his whole experience and expectations. The UX process relies on iterative user research to understand users and their needs. The most common failure point in UX processes is transferring the perspective of users to UI design. The key is to define interaction first, without designing it. First, all the research (the user, product and environment) have to be organized and summarized in a user research composition. These lead to user profiles, work activities, and requirements for the users. The user research composition feeds directly into use cases. The use cases show steps to accomplish task goals and the content needed to perform interactions. Completed use cases are validated with the intended user population. This is a checkpoint to see if the vision is being achieved and the value is clear to users and the project team. The next step is to design the user interface, generating directly from the interaction definition. A primary concern with design is to not get locked into a single solution too early. To keep the project on time, this step should be split into two parts: rough layout and exact and detailed design. The rough layout allows experimentation and rapid evaluation. Detailed design provides exacting design and behavior previews of the final application that specify what is to be coded. Iterative user evaluations at both stages are connected to be fast and effective in improving GUI, design feedback, rapid iterative evaluations, and usability evaluations.

UX workflow cycle

Image_7

design workflow – workcycle – workspiral

 



 

 

UXD-P – Gathering the elements

The diagram below presents the relationship of the elements above:

elements of UXD-P

Elements of UXD-P



Lewin’s equation

Lewin’s Equation, B = f (P,E) ( B – Behaviour; f – Function; P – Person; E – Environment ), ...

... is a psychological equation of behaviour developed by Kurt Lewin. It states that behaviour is a function of the person and his or her environment [2].

There is a desired behaviour that we need to encourage, but we have no control over the person, so via interaction design, information architecture and interface design we control the environment and therefore generate the desired behavior. (see reference: books.google.com ).

 

 

UXD-P – many steps to go but every step is worth it

How do we involve our team, customer and our user/consumer? We can start at different points, but I like to think about the circumstances first. Where do we come from? Where are we? Where will we go? And who is “we”? “We” means each person who is involved in the project. Iin the centre of each effort stands the user. To get the user with his personal experiences and expectations into the project, the design team and the customer needs a combining glue / tool / instrument. I believe these are the personas of the “target users/consumers” in the process of UXD-P. If there are no personas the second or third choice are scenarios or the workflows (based on a certain user/person).

The management point of view for the most cases is also the view of our customer. It includes the user’s/consumer’s age, income, gender and other demographics. The perspective of UXD-P is to look at behaviour, goals and attitude.

To get a realistic persona we have to identify first of all the target users. Out of my experiences this is not only the task of our client to define the users and consumers – we have to support him. During the identification and characterization we have to go beyond demographics and try to understand what drives individual users and consumers to do what they do and these as detailed in quantity and quality as necessary and possible – like I mentioned above. The approach and the complexity of the characterization depend on the tasks, project and functionalities. Parallel to the very personal description we need a “picture” of the environment. For each persona we must define their business and/or their private concerns and aims. Do they want to research a product for purchase later? Are they concerned about not wasting time primarily? Do they just want to purchase something online as easy and quick as possible?

Depending on these personas we can formulate, discuss and prove scenarios – from the very beginning of the project, during the project and as check or analysis at the end of the project.

 

 

 

 

 

UXD-P – my blueprint of schedule – "todos" and deliverables

We are always asking and being asked: what are the deliverables. Throughout my career as an IA, UX-planner and designer, as well as during my study of architecture and town planning, I have constantly asked myself following the questions:


  • What kind of project is it? What are the key points?
  • What should our steps and milestones be in the project?
  • What should our/my deliverables be?
  • How can we/I explain the main idea?

I have realized that if I do not answer these questions previous to creating a deliverable, I waste more time and deadlines slip.

The deliverables are not for us. The deliverables are a means of communication with several people: manager, decision maker, client, designer, front-end developers, back-end developers, etc. Sometimes I have the feeling we overlook this from time to time. After I think about the project I have to ask myself, where will my deliverables and other efforts fit within the process of design? The following diagram describes different lines of work that will lead us to some questions each line must accomplish. Depending on these questions and topics I will outline the basis, basics and deliverables for which each skill and ability which is necessary.

Image_6___schedule of UXD-P_small version

Image_6

schedule of UXD-P ___ better view – schedule 1238px x 1030px

 

UXD-P – my conclusion

I studied architecture and town planning. And just like town planning and architecture isn’t just for architects and art lovers, the internet isn’t just for computer users and developers. Similarly, just as the towns and the cities are for the inhabitants and architecture is for the users of a building, so products and applications are for the user, the customer, the member and not for the people who build them.

In every kind of process we should act in a team but in the process of UXD-P it is absolutely essential that we have to think parallel, with the same focus . We have to act in a team, although every team member is a kind of lawyer: lawyer of budget, of the client, of utility, of usability, of look and feel, of brand and finally of the user himself. Because at the end of the project, our user/customer is the final judge.

Good design is not only interface, or look and feel, or technology, or hardware, or how it works. It is every detail, like the structure, the labelling, the border of a button or a little icon. Finally, it is the sum of every element. I believe that a shared vision of a group of creators will have more potential than individual creativity. And that is the point where creativity meets expectation. The point of view on IA and design and the process to get to a well-designed product will be changed by UXD-P.

The persons who use the application or other object that we invent are the real “architects” of the “architecture” – the real “inventor” of the design. The more we know about our users, the more likely we are to meet their needs.

As the capabilities of interactive applications and the internet go forward and grow, more and more consumers use the applications and the various possibilities in new and different ways. We must think about all aspects of user experience.

And I will ask you once again: Is it just one who is responsible or is it the team which is in charge of UXD-P?

Personally, I believe it is the process of planning and designing for User Experiences (and so I think it’s the team which is in charge), but the overview has to have an experienced planner as a kind of captain.

 

The most common cause of an ineffective website (one that doesn’t deliver value to both the business and its intended constituents) is poor design. The products have to follow, to cover the functions and the experiences. The lack of clear organization, navigation and values of brand and mood mean that people will have an unintentional and maybe bad experience, rather than one that will meet the business’s relationship objectives for each individual. User experience design and planning is a fundamental component to the creation of successful digital products, applications and services.

UXD-P is UXdesign and planning- - In my estimation there are distinctions between Design and Planning.

Design is usually considered in the context of arts and other creative efforts. When I think of design in the UX process it focuses on the needs, wants, and limitations of the end user of the designed goods, but mainly on the visual parts and the mood. A designer has to consider the aesthetic-functional parts and many other aspects of an application or a process.

The planning part provides the framework. The term "planning" describes the formal procedures used in such an endeavors, such as the creation of documents, diagrams etc. to discuss the important issues to be addressed, the objectives to be met, and the strategy to be followed. The planning part is responsible for organizing and structuring to support utility, findability and usability.

I strongly believe that both parts – design and planning – have to work closely together. Every team member should have the ability to think cross-functionally and to anticipate consequences of activities in the whole context.

I’ve often seen timelines like this …

Image_8___

and this doesn´t work for UXdesign and planning …

I give a timeline the preference which looks like this:

Image_9___

... to develop a UXdesign and UXplanning.

And in the center of this team and of this process should stand the leading person – the user!

Image_9___basis points of UXD-P

Post by 넥스트리소프트 데꾸벅(techbug)
, |

칼라에 대한 고찰

Designer/UX / 2008. 2. 21. 19:14
항상 디자인을 할때 칼라매치에 고민하다가 괜찮은 사이트하나(칼라러버) 발견

사용자 삽입 이미지



'Designer > UX' 카테고리의 다른 글

IE8을 미리 대비하기  (0) 2008.06.13
PhotoshopExpress : 포토샵이 웹으로?  (2) 2008.03.28
IE6 PNG background없애기  (0) 2008.02.21
favicon 생성기  (0) 2008.02.21
저작권 없는 무료 이미지 사이트 100선  (1) 2008.02.21
Post by 넥스트리소프트 데꾸벅(techbug)
, |

favicon 생성기

Designer/UX / 2008. 2. 21. 19:09
매일 포토샵으로 아이콘 만들기 귀찮았는데 png이미지를 알아서 아이콘으로 만들어주는 사이트가 있어 포스팅한다.

사용자 삽입 이미지

Post by 넥스트리소프트 데꾸벅(techbug)
, |

출처 : http://www.virtualhosting.com/blog/2007/100-legal-sources-for-free-stock-images/


Most Popular

These resources are some of the most popular free stock image sites on the Web and with good reason. If you’re looking for some mainstream images, these are the first place to try.

  1. FreeFoto: FreeFoto.com claims to be “the largest collection of free photographs on the Internet.” They’re available for offline projects as well, as long as you’re not using them to make a profit.
  2. KAVEWALL: Look for images and textures in unique categories like tattoo, smoke, and food.
  3. Digital Dreamer: Free, royalty-free stock images can be found here.
  4. Free Photos Bank: This features a handful of the newest photos in their directory, so check back often.
  5. Free Digital Photos: Find gorgeous, easy-to-download photographs in categories like animals, celebrations, home & garden, and lots more.
  6. PD Photo: Browse through the categories and subcategories in this site’s database, most of which depict the urban and rural landscapes of the United States.
  7. Visipix: Search over a million photographs and fine art pieces.
  8. Cepolina: On cepolina, you can choose to save photos in up to five different formats.
  9. DexHaus: A wide array of beautiful images are found on this well-organized site.
  10. FreeStockImages.net: Chances are you’ll find whatever it is you’re looking for on this terrific site.
  11. TurboPhoto: TurboPhoto has 10 categories keep the high res photos easy to find.
  12. Yotophoto: An immensely popular site, Yotophoto is worth checking out.
  13. Stockvault: Search by photo subject or by the newest and most popular photos on Stockvault.
  14. Dreamstime: While most of the photos on this site cost a fee (some as low as $0.26/image), Dreamstime provides a few free stock photos.
  15. Open Stock Photography: This site offers over one million images for you to download and use however you want.

Community-Powered Content

In addition to being a great source of images, these sites host forums, file sharing and other features designed to nurture community spirit.

  1. Image After: Search tons of free photos on this site while meeting other photography lovers on the forum.
  2. Unprofound.com: Use the images however you want, just make sure you let them know where you’ve published it!
  3. Font Play: This site has nearly 10,000 free photos for you to use any way you want. Look under the “Guests” heading to search by your favorite contributor.
  4. Studio 25: This attractive site lets you upload and search images.
  5. Vintage Pixels: Share your archived photos with other users. Download images that work for your Web site or blog.
  6. Abstract Influence: Search for the stock images you want while talking about photography with other visitors on the site’s forum.
  7. amygdela’s atmosphere: This site hosts a forum and a blog, as well as tons of stock images.
  8. Every Stock Photo: A forum and blog keep this stock image site fun and informative.
  9. Photocase: The good people at Photocase are “prettying up the world.” Check out their great library of stock images.
  10. deviantART: Provocative photos spawn great debates on the site’s forum.

Artists Welcome

It’s probably pretty safe to say that every stock image site on the Web needs the help of photographers to keep it running. The following sites, however, really cater to the needs of photographers, designers, and other artists even though they’re donating their photos for free.

  1. Stock.xchng: Check out the gorgeous shots organized into lots of different categories, making your search as easy as possible.
  2. Morguefile: Browse thousands of beautiful photos in this site’s archives, but don’t miss their job board either!
  3. Woophy: This site organizes photographs by geographical location. Enter into their contest for a chance to win great prizes.
  4. The NOAA Library: Breathtaking science and nature shots are available at this site. Don’t forget to check out the “Meet the Photographers” page which includes short bios and descriptions of the featured photogs.
  5. Pixel Perfect Digital: Get tons of free stock images and read the latest in photography news.
  6. Free Range Stock: Photographers are rewarded for giving away their pictures by getting a percentage of the site’s total ad revenue.
  7. AMG Media: As long as you give credit to the photographer somewhere on your site, these images are yours for the taking.
  8. Free Photographs Network: Submit photographs for others to see, or download some for your own use.
  9. FreePhotos.com: If you’re a photographer, submit your best pictures for a chance to win cool prizes.
  10. PhotoRogue.com: If you can’t find a picture of anything you want, go to PhotoRogue.com and make a request for whatever it is you’re thinking of. Photographers will take pictures for you — and it’s still free!
  11. Graphicsarena.com: Submit your photos for consideration.
  12. Fotogenika: Send in your photos for other visitors to use on their personal sites.
  13. Image Temple: Send in your own photos to be included in this site’s gallery.
  14. Flickr: Most of the photos on this site are not free, but a clever search will turn up some real goodies.
  15. FreeLargePhotos.com: Downloaders must link their chosen photo back to the site, which gives the photographer credit.

Less is Sometimes More

Just because the sites listed in this section aren’t as expansive as some of the others on our list doesn’t mean they’re not worth checking out. Sometimes less can really means more, especially when it comes to narrowing down your search or coming across hard-to-find treasures.

  1. Mayang’s Free Texture Library: Download high-res textures from this site, which has categories like architecture, buildings, plants, wood, and stone.
  2. Liam’s Pictures from Old Books: Discover hard-to-find illustrations from old books, “most with multiple high-resolution versions.”
  3. Texture Warehouse: Find interesting textures at this great site.
  4. Free Stock Photos: Nature shots and religious themes are abundant at this free stock photography site.
  5. BurningWell: Totally free images are organized into categories like animals, bugs, cityscapes, people, plants, and textures.
  6. Design Packs: New images and themes are added monthly, so this site may not be a well kept secret too much longer!
  7. Amazing Textures: This site is a web designer’s dream. Browse hundreds of high res textures and backgrounds.
  8. Aarin Free Photo and Digital Images: These site boasts nearly 1,000 fantastic images for you to choose from.
  9. Image Base: On Image Base, breathtaking photographs are organized in categories like nature, concept, people, and city.
  10. Majestic Imagery: All the photos on this site were taken by the host.
  11. diwiesign studio: All the images are free, but if you’re a frequent user, you might want to consider making a donation to this photo entrepreneur.
  12. Zurb Photos: Photographer Bryan Zmijewski uploads his own images onto this site.
  13. tOfz.org: Find urban images for free, but consider making a contribution to this artist’s cause.
  14. LIGHTmatter: These gorgeous photos were all taken by the same artist, who also hosts the Web site.
  15. Insect Images: Find all kinds of photos of creepy crawlers here.

Stock Images Plus

There is a lot more to legal stock images than just a bank of free photos. The sites in this section all go beyond being a basic stock photography resource by offering more services that will help improve your search for and use of stock images.

  1. Creative Commons: This nonprofit site shows you how to license your images once they’ve been uploaded onto your site.
  2. Free Images: This British site offers free images as well as wallpapers, desktops, and a section of ideas and tips that will help you customize your image experience, whether you’re a photographer or not.
  3. Creating Online: This stock images site is an excellent resource for any new blogger or Web site developer. Learn about editing your images, hosting, domains, and more.
  4. ArtFavor: Find stock images, fonts, sounds, flash clipart, and more, are all on this terrific site.
  5. Geek Philosopher: Find hilarious and beautiful stock images side by side. Also check out the site’s blog and web hosting capabilities.
  6. Gimp Savvy: In addition to finding great images, Gimp Savvy also gives tips on photo touchups, making a collage, and more.
  7. Creativity 103: Find free abstract images and videos on Creativity 103.
  8. Afflict.net: Search photos and textures while learning about images in the tutorials section.
  9. One Odd Dude: Download photographs, wallpapers, textures, and more on One Odd Dude.
  10. Discover: Search for your favorite subjects or web sites, and hundreds of free icons, stock images, and other designs will appear.
  11. Photoshop Support: On Photoshop Support, browse photos, read the tutorials, and check out the great imaging tools.
  12. AncestryImages.com: Search antique portraits and use the geneaology resources link to connect you to even more tools.
  13. Free Media Goo: Download free stock images, audio, and video on Free Media Goo.
  14. National Park Service Digital Image Archive: Check out beautiful pictures taken for the NPS. This site also provides a link to the NPS official site.
  15. <New York Public Library Digital Gallery: Browse through thousands of prints, illustrations, and photos. Read the photographic services and permissions page for more information on downloading high-res files.

Miscellaneous

These image sites don’t necessarily fit into one particular category, but they’ve still got a lot to offer.

  1. Backgrounds Archive: Find beautiful backgrounds for your desktop or MySpace page.
  2. USDA Agricultural Research Service: The government’s Agricultural Research Service sponsors this “complimentary source of high quality digital photographs.”
  3. Holy Land Photos: Poignant photos of the Holy Land are available here.
  4. Stockcache.com: This site makes organizing your downloads easy.
  5. Four Bees: Browse through the stock images directory, or download royalty free music and video on Four Bees.
  6. Clipmarks: Search for free stock images with this handy tool.
  7. Yellowstone Digital Slide File: These beautiful shots of Yellowstone National Park are available for use by the media and public.
  8. Plants of Hawaii: Perfect for any botanist, this site has over 45,000 images of Hawaiian plants.
  9. Microshots: This site specializes in microscopic images.
  10. IN TEXTURE: Free stock textures are plentiful on this site.
  11. Trip Album: This site is all in French, but the photos are divided into categories based on country, making it easy to figure out.
  12. Orange Trash: Find pictures about Hungary on this Web site.
  13. Public domain stock photos: Browse categories like backgrounds, food, nature, objects, and seasonal on this site.
  14. BAJstock: Written in both French and English, this stock image site has tons of photos for you to use for free.
  15. NWYK Stock Image Library: This hilarious site provides free images that capture the drudgery and playfulness of office life.

General

These stock image sites offer a wide range of photo subjects, perfect for casual browsing or a way to get ideas before you plan out your site.

  1. Public Domain Photos: Check out these gorgeous pictures of animals, cities, landscapes, and more.
  2. Bigfoto.com: Find photos of beautiful places all around the world, as well as fun shots in the Christmas, grafitti, or food categories
  3. Photogen: Look through the Top 10 gallery to find the most popular downloads in a preview-friendly thumbnail format.
  4. Free Pixels: Find free photos, logos, or other images on this site.
  5. DHD Multimedia Gallery: Search through thousands of basic photos.
  6. PIX: This site is so easy, you don’t even have to register to download.
  7. Photo Rack: New photos are featured at the bottom of the page, so check back often to make sure you don’t miss anything great.
  8. Free Stock Photos: On Free Stock Photos, each image comes with a description detailing its size.
  9. Barry’s Free Photos: This is a great site for finding all different kinds of images for your Web site.
  10. Cromavista: This site is all in Spanish but still easy to navigate if you’re not a native speaker.
  11. IronOrchid: Several different categories allow for an efficient search on IronOrchid.
  12. Image Blowout: Have fun looking through these unique photos.
  13. FreeImages.com: Tons of categories and subcategories make searching for photos on this site simple.
  14. ilovefreePhoto: This fun, attractive site makes searching for that perfect photo a little less frustrating.
  15. Free Photo Station: Loads of great photos are all free on this site.

'Designer > UX' 카테고리의 다른 글

IE6 PNG background없애기  (0) 2008.02.21
favicon 생성기  (0) 2008.02.21
한국의 색상  (3) 2008.02.21
매킨토시의 휴먼인터페이스 - 인터페이스 디자인 원칙  (0) 2008.02.21
영문폰트를 웹폰트로  (0) 2008.02.21
Post by 넥스트리소프트 데꾸벅(techbug)
, |

한국의 색상

Designer/UX / 2008. 2. 21. 19:05
원래 CMYK색인데 포토샵에서 RGB값으로 바꾸어서 웹상에서 사용할 수 있도록 하였습니다.
무채색계(無彩色界)
흑백 1D1E23 93,89,83,52
백색 FFFFFF 0,0,0,0
회색 A4AAA7 38,27,31,0
구색 959EA2 45,32,32,0
치색 616264 72,64,62,4
연지회색 6F606E 55,58,40,20
설백색 DDE7E7 12,4,7,0
유배색 E7E6D2 9,5,18,0
지배색 E3DDCB 6,6,17,4
소색 D8C8B2 10,15,26,5
적색계(赤色界)
적색 B82647 21,98,68,8
홍색 F15B5B 0,80,60,0
적토색 9F494C 29,80,64,17
휴색 683235 40,80,66,44
갈색 966147 31,61,73,21
호박색 BD7F41 21,51,84,8
추향색 C38866 19,48,61,6
육색 D77964 11,62,59,2
주색 CA5E59 15,75,62,4
주홍색 C23352 18,94,60,5
담주색 EA8474 4,59,50,0
진홍색 BF2F7B 20,94,17,4
선홍색 CE5A9E 16,79,2,0
연지색 BE577B 19,77,28,7
훈색 D97793 9,64,20,2
진분홍색 DB4E9C 9,84,0,0
분홍색 E2A6B4 7,39,14,1
연분홍색 E0709B 6,69,11,1
장단색 E16350 6,75,70,1
석간주색 8A4C44 30,71,65,30
흑홍색 8E6F80 40,54,31,15
황색계(黃色界)
황색 F9D537 3,13,89,0
유황색 EBBC6B 6,25,67,1
명황색 FEE134 2,7,89,0
담황색 F5F0C5 4,2,27,0
송화색 F8E77F 4,4,62,0
자황색 F7B938 2,29,89,0
행황색 F1A55A 3,40,73,0
두록색 E5B98F 8,27,45,1
적황색 ED9149 4,51,80,0
토황색 C8852C 18,50,97,5
지황색 D6B038 14,26,91,3
토색 9A6B31 30,54,91,20
치자색 F6CF7A 3,18,61,0
홍황색 DDA28F 9,39,38,2
자황색 BB9E8B 22,33,40,7
금색
별색
청록색계(靑綠色界)
청색 0B6DB7 89,56,0,0
벽색 00B5E3 73,5,4,0
천청색 5AC6D0 59,0,20,0
담청색 00A6A9 96,4,40,0
취람색 5DC19B 62,0,51,0
양람색 6C71B5 64,58,0,0
벽청색 448CCB 72,36,0,0
청현색 006494 99,59,22,3
감색 026892 93,57,26,2
남색 6A5BA8 68,73,0,0
연람색 7963AB 60,69,0,0
벽람색 6979BB 64,52,0,0
숙람색 45436C 86,84,40,9
군청색 4F599F 80,73,6,0
녹색 417141 82,44,95,9
명록색 16AA52 81,5,94,0
유록색 6AB048 64,8,97,0
유청색 569A49 72,20,96,1
연두색 C0D84D 29,0,87,0
춘유록색 CBDD61 24,0,78,0
청록색 009770 97,15,74,0
진초록색 0A8D5E 87,26,82,1
초록색 1C9249 85,20,98,2
흑록색 2E674E 89,52,83,9
비색 72C6A5 55,0,45,0
옥색 9ED6C0 38,0,30,0
삼청색 5C6EB4 71,59,0,0
뇌록색 397664 74,27,59,6
양록색 31B675 74,0,74,0
하염색 245441 83,43,75,39
흑청색 1583AF 84,39,17,0
청벽색 18B4E9 69,8,0,0
자색계(紫色界)
자색 6D1B43 41,95,45,40
자주색 89236A 40,96,18,20
보라색 9C4998 42,85,1,1
홍람색 733E7F 58,85,10,15
포도색 5D3462 70,90,35,20
청자색 403F95 90,90,1,1
벽자색 84A7D3 47,25,1,1
회보라색 B3A7CD 28,32,1,1
담자색 BEA3C9 23,36,1,1
다자색 47302E 75,86,85,35
적자색 BA4160 15,86,42,13
Post by 넥스트리소프트 데꾸벅(techbug)
, |
1) 은유-Metaphor

  사람들의 지식을 이용해 Application의 개념과 특징을 전달하고 이해시킨다

- 친숙한 아이디어 포함한 메타포사용
- 명확한 메타포 사용
  *사용자가 쉽게 컴퓨터 환경에 적응할 수 있도록 한다.
     .사무실의 folder - 문서보관
     .Computer folder - 전자문서보관, 여러형식의 데이타보관
     .사무실의 desk - 문서작성등의 작업
     .Computer desktop - 각종 작업의 기본 구역
     .사무실의 휴지통 - 각종 쓰레기 버림
     .Computer 휴지통 - data 버림
     .식당의 메뉴와 Computer상의 행동선택을 메뉴로 하는 것 등.

  *메타포의 용도는 비슷하지만 실행에 대한 제한은 컴퓨터마다 상이
  *메타포가 제시하는 용도와 컴퓨터 능력간의 균형을 맞추어야 한다.


2) 직접조작-Direct Manipulation

  컴퓨터에 의해 묘사된 object를 직접 제어하고 있다는 느낌을 갖도록 하기위한 조작방식을 말한다.

 - 물리적 행동이 곧 컴퓨터의 object를 제어한다.
 - 사용자는 물리적 결과를 기대하고 feedback도 기대한다.
 - 사용자는 명령어 실행여부를 알고 싶어한다.
 - 명령어 실행 불가시 이유와 대체방안을 알고싶어한다.
  *실행에 대한 feedback은 적절한 에니메이션이 필요
     .drag
     .click
     .cursor의 위치 조작
     .drawing 도구의 움직임 - 라인 형성


3) 보고 지정하기-See and Point

  Pointing device인 mouse등으로 사용자와 computer와의 상호작용하도록 하는 것을 말한다.

Macintosh desktop에서의 기본 패러다임

 -사용자가 하고 있는 일을 screen 상에서 볼 수 있다.
  i.사용자가 관심있는 object 선택
   ii.object가 실행할 행동지정(메뉴등으로 지정)
   iii.실행(메뉴실행, 직접실행)
     .document icon click > file menu > print

  -사용자가 자신이 보고있는 것을 지정할 수 있다.
   i.사용자가 object를 연관된 행동을 위해 drag해서 실행
     .document icon drag > 휴지통에 (삭제)
     .document icon drag > 폴더에 (복사 및 이동)


4) 일관성-Consistency

  일관성은 어떤 표준요소에 의해 애플리케이션 내부나 애플리케이션 간의 학습전이 효과를 창출할 수 있도록 서로 공통성을 찾아주는 과정이다.

이런식의 제작은 다른 애플리케이션으로 기본적인 조작의 학습전이 효과를 창출할 수 있다. 목표 사용자 집단에 요구와 관련된 일관성 문제들을 보면서 문제를 다루어야 한다.

 -시각적 일관성
   i.그래픽 언어의 학습과 학습전이 용이
   ii.한번의 학습은 필요

 -제품의 일관성 고려시 자문할 사항
   i.제품자체내에서 일관성이 이루어지고 있는가?
   ii.이전버젼과 비교해서 일관성이 이루어지고 있는가?
   iii.인터페이스 표준과 관련해서 일관성이 이루어지고 있는가?
   iv.metaphor 사용에서 일관성이 이루어지고 있는가?
   v.사용자의 기대와 비교해서 일관성이 이루어지고 있는가?


5) WYSIWYG-What You See Is What You Get

  "보이는 것을 그대로 얻는다."
스크린에서 보는 것과 print후 얻게되는 출력물간에는 거의 차이가 없어야 한다.

 -폰트, 폰트내용과 format을 모두 제공
 -폰트, 폰트내용과 format을 변형시 즉시 볼 수 있어야 한다.
  *사용자가 보여질 것에 대해 계산을 하도록 하면 안된다.


6) User Control-사용자 조절

  사용자가 실제 참여하는 것처럼 느끼도록 하여야 한다.
사용자는 실제 자기참여에 의한 학습의 능률이 뛰어나다.
 
 -사용자로 하여금 행동을 개시하고 조절하도록 한다.
  *작업수행에 필요한 능력을 사용자에게 제공하는 것과 사용자가 데이타를
   파괴하지 못하도록 방지하는 것간의 균형유지가 중요하다...


7) Feedback and Dialogue-피드백과 대화

  사용자가 제품의 상태에 대해 계속 알려준다.
작업수행시 가능한한 feedback 즉각 제공한다.

 -사용자의 입력행동시나 지정시 시각적,청각적 신호제공.
 -작동시간에 대한 display.
 -다른 작업처리로 인해 사용자 작업불가시 그 작업시간과 종류출력.
 -인터럽트 방법도 알려줄 수 있어야 한다.
 -유용한 메시지를 보여준다...


8) Forgiveness-관대함

  computer상의 행위를 대개의 경우 철회할 수 있도록 제작한다.
시스템상의 손상없이 일을 시도해 볼 수 있다는 느낌을 사용자가 갖도록 한다.

 -사용자들이 편안히 제품을 살펴볼 수 있도록 해야한다.
 -사용자의 최악의 실수에 대해서는 경고상자를 사용한다.
 -가능한한 경고상자가 없도록 자연스러운 시스템이 되도록 디자인 되어야 한다.


9) Perceived Stability-인지된 안정감

  사용자에게 개념적인 안정감을 제공한다.
 
-Interface는 분명하고 제한적인 object set와 이를 object에서 실행할 수 있는
  분명하고 제한적인 동작세트를 제공한다.
   .Desktop 제공, 일관성을 유지한 그래픽요소의 제공이 확고해야한다.
   .특정동작 사용방지시에 icon을 흐리게 처리한다.


10) Aesthetic Integrity-미적 완전함

  정보가 잘 조직되어 시각디자인 원칙에 일치하는 것을 말한다.   
 
-모든 것이 screen 상에서 display 기술수준이 훌륭해야 한다.   
 -장시간 화면을 보아도 훌륭히 보이도록 만들어야 한다.   
 -button과 icon, window의 적정수를 유지해야 한다.   
 -인터페이스의 그래픽언어를 준수해 표준 아이템의 의미를 바꾸지 않도록
   유의해야 한다.   
 -개념을 나타내는 데 있어 임의적(독단적) 그래픽이미지를 사용하면 안된다.
 -가능한한 표준심볼을 사용한다.
 -사용자가 기대하는 행동에 그래픽요소를 맞춘다 /누르면 눌러진듯한
   버튼, 스피너
 -사용자에게 외관조정의 재량을 부여한다.


11) Modelessness-비정형화

  사용자가 주어진 application에서 하려는 일을 할 수 있도록 비정형화된 기능을 만들도록 시도한다.


12) Knowledge of Audience-사용자에 대한 이해

  제품제작을 하면서 사용자에 대한 이해는 필수이다.
 
-사용자의 일과를 시나리오로 작성하여 분석한다.
 -사용자들의 작업공간의 환경에 대해 분석한다.
 -사용하는 툴의 한계를 분석한다.
 -실제작업현장을 방문하여 관찰한다.
 -prototype 제작 및 테스트를 한다.
 -사용자의 feedback을 듣고 요구를 반영하여 재평가한다.


13) Accessibility-접근가능성

  평균사용자와 다른 사용대상자를 분석하여 보다 근접한 제품을 만들어야 한다.
 
-연령, 스타일, 능력 등을 조사한다.
 -언어적, 육체적, 인식적 차이에 유의한다.
 -개개인의 특별요구사항들을 확인한다.

'Designer > UX' 카테고리의 다른 글

IE6 PNG background없애기  (0) 2008.02.21
favicon 생성기  (0) 2008.02.21
저작권 없는 무료 이미지 사이트 100선  (1) 2008.02.21
한국의 색상  (3) 2008.02.21
영문폰트를 웹폰트로  (0) 2008.02.21
Post by 넥스트리소프트 데꾸벅(techbug)
, |

사용자 삽입 이미지

'Designer > UX' 카테고리의 다른 글

IE6 PNG background없애기  (0) 2008.02.21
favicon 생성기  (0) 2008.02.21
저작권 없는 무료 이미지 사이트 100선  (1) 2008.02.21
한국의 색상  (3) 2008.02.21
매킨토시의 휴먼인터페이스 - 인터페이스 디자인 원칙  (0) 2008.02.21
Post by 넥스트리소프트 데꾸벅(techbug)
, |

포토샵 팁

Designer/Photoshop / 2008. 2. 21. 18:59
각종 포토샵 설정 팁
1. 포토샵에서 갑자기 폰트들이 안 보일 때

컴퓨터를 안전모드에서 부팅해서
시작 >> 검색 >> 파일 또는 폴더  
ttfcache 라고 입력한 다음 나오는 파일을 삭제해주시면 됩니다.

2. 포토샵 처리속도 빠르게하기

+ 영문버젼  Edit> Preferences> Memory & Image Cache > Used by Photoshop
+ 한글버젼  편집 > 환경설정 > 메모리와 이미지 캐쉬 > 메모리사용
기본적으로 50% 로 되어있는 부분을 80% 정도로 높여주면 처리속도가  빨라진답니다.  

3. 다운받은 "브러쉬", "스타일" 삽입하는 방법

+ 브러쉬[Program Files]-[Adobe]-[Photoshop]-[Presets]-[Brushes] 폴더안에 넣으세요.
+ 스타일 [Program Files]-[Adobe]-[Photoshop]-[Presets]-[Style] 폴더안에 넣으세요.

4. 한글 포토샵→영문으로

한글 포토샵을 영문버전으로 바꾸시려면 [Program Files] - [Adobe Photoshop6.0]-[Required]에서 tw10428.dat를 지워주시면 됩니다.

5. 포토샵에서 한글 폰트 한글로 나오게 하기  

+ 포토샵 5.5 : 파일 (File)-환경설정(preferences)-일반(general)-show font names in english 체크 해제
+ 포토샵 6.0 : 편집 (Edit)- 환경설정(preferences)-일반(general)-show font names in english 체크 해제

6. 포토샵 필터 사용법

필터를 다운받은 담에 압축을 풀때 꼭 photoshop-->plug-ins 폴더안에 압축을 풀어주세요.
다른 디렉토리에 이미 압축을 풀었다면 꼭 plug-ins 폴더안으로 옮겨주세요.
포토샵을 종료한후 다시 실행하면 메뉴의 필터라는 메뉴안에 새로운 필터가 들어있는걸 보게 됩니다.

7. 웹폰트 포토샵에서 최적싸이즈..

웹폰트 뒤에 나오는 숫자를 보면 9,10,12 이러케 3종류입니다.
(예;웝정9,웹정10,웹정12,민9,네딱12,둥딱12)

숫자가 9인폰트들 - 글씨크기 12싸이즈로 작업합니다.
숫자가 10인폰트들 - 글씨크기 13싸이즈로 작업합니다.
숫자가 12인폰트들 - 글씨크기 16싸이즈로 작업합니다.

숫자가 없는 폰트일경우 포토샵에서의 기본싸이즈는
거의가 글씨크기12싸이즈입니다.
Post by 넥스트리소프트 데꾸벅(techbug)
, |