20מאת יוסי אמרם Steps To Better Wireframin מצגת

  • 494 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
494
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Be Clear About Your Objective  Many projects are rarely simple and anyone with  experience will know what a myriad of unforeseen issues and challenges await you if you go down this route. A wireframe will help you identify many of these  issues in a way that is time and cost effective. It is far easier to make changes to a collection of paper screens than after you have written a thousand lines of code. The process also helps to create a better understanding  of the application. Putting it down on paper raises questions and ideas and leads to changes. And as a final output it will help designers, developers, architects and project managers who evolves in the project makes sure everyone is in sync.
  • 2. Make it Functional, Not Pretty  There are variations in how wireframes are  presented. Fundamentally it is about the functional parts of an application, e.g. that a page will have 3 text boxes and 2 buttons. It’s about function not form.
  • 3. Draw on Your Experience  You do not need skills in design or  development. All anyone needs is experience in using web apps or websites.
  • 4. Decide Who’s in Charge?  Make sure someone owns the wireframe process. They are responsible for keeping it up to date and managing feedback, changes etc. In the case of a start-up this is often the founders, the ones with the idea and vision who understand the end goal.
  • 5. Involve Everyone  Maybe not at the first meeting that should focus on simply getting the idea on paper. Fewer, people involved makes this process quicker. As the wireframe develops involve other members of your team and your client’s team. Equally designers have a good understanding of user experience and can spot potential problems in the flow early on.
  • 6. Set a Deadline for Completing the Wireframe  It is important to set aside predefined periods of time and deadlines for deliverables to keep a project moving. Follow up review meetings can be much shorter or even done remotely.
  • 7. Keep it clean  If a particular page requires two text boxes and a button then it should have just that, no more, no less.
  • 8. Avoid Designing Your Wireframe Too Much  Wire framing is about the functional way in which something operates it’s nothing to do with presentation or design. A person should try to avoid anything that could be construed as design. This will almost always distract the audience.
  • 9. Remember that UI is not UX  It can be extremely tempting to start thinking about the use of presentation methods such as AJAX. Remember that a wireframe document is about the functional elements and not the way they are presented or users interact with them.
  • 10. Think About the User  It sounds obvious but it’s so easy to get caught up in creating a wireframe and forget about the user. The functional is what we’re focused on but it is still important to consider the user experience that is being created; for example, too long form.
  • 11. Don’t Get Lazy  It’s often easy to say “the login page is obvious let’s not include it in the wireframe”. Make sure you wireframe everything. At the end of this process you should have a document that can be stepped through just like the final website. Every step counts and none should be ignored.
  • 12. Organize Your Wireframe into Sections  A website or app is often divided into sections such as news, products and user account. Break up your wireframe document accordingly for much easier reference.
  • 13. Number Your Pages  A web application often consists of a number of processes; a checkout is a good example. Often these are linear but sometimes users can choose different paths such as skipping a step. Clearly number the pages in your document and then label which page a particular action (such as clicking a button) takes the user to.
  • 14. Look for Repetition  Consistency within an application is helpful to users, developers and designers. Repetition of groups of elements can therefore be a good thing. For example, wherever a user enters an address it should be the same fields in the same order. Look for these areas of repetition as you wireframe.
  • 15. Check it all Makes Sense  The final document should be easy for anyone to follow. If only a developer can understand your wireframe then something has gone wrong. Ask at least one person who has nothing to do with the project if they understand it.
  • 16. Ads are Functional  Many sites include advertising for monetization, this may be as simple as Google ads but it is functional and not design, so include it.
  • 17. It’s Not Just the Public Site  Many sites have an administration area for managing content. This may not be viewed by many people but it is still important. This is important information to developers when designing the database.
  • 18. Know When to Stop  Make sure all relevant stakeholders have the opportunity to give feedback but don’t turn this exercise into painting the Sistine Chapel. Three drafts should get the job done. The first gets the idea onto paper. The second reflects feedback from other parties such as developers, and designers. The third should be the final polish.
  • 19. Choose the Right Tools  Pen and paper is often the way to start. It is much easier and faster than using a computer and lets you get thoughts and ideas down as the concept evolves. Once you start creating the document our advice  would be to use the tool you’re most comfortable with. There are a number of specific tools for wire  framing, which provides an environment for quickly adding and customizing common interface elements. They have given it a hand drawn feel to provide a visual lift while not actually being design.
  • 20. Consider Dependencies  Everyone knows what a shopping cart process is, right? Therefore it’s easy to wireframe and put to one side. Not entirely. What if you’re using a third party payment provider such as PayPal? That may influence how parts of the site must work. Research the areas where there will be dependencies and make changes accordingly. It’s easier to do it now than later.