reading notes for code fellows
wireframing allows UX designers to plan the information hierarchy design for their website, app, or product based on how they want users to process information. This lets you figure out where all the information is going before building your code and helps you to plan the layout without concerning yourself with colors, fonts, and content.
different people approach wireframing in different ways, often in relation to the best approach for whatever the current project is. With a less complex task, you can go straight from a sketch to coding, while a full site may require more steps inbetween to make better sense.
there are many free tools on the internet and just using a pencil and paper is acceptable, but three good tools with free trials are:
wireframing is not the first step in the build process, make sure you’ve first learned what your audience requires and reviewed your internal design guidelines. Research outside of your domain as well if you’re designing a new feature and need info you may not already have available.
make yourself a cheat sheet with your requirements, personas, use cases, interesting features, and anything else that you want to be able to quickly recall while building your wireframe.
wireframing can get very messy very fast if you don’t know how many screens you’ll need/what flow the user is expected to follow. You need to know where your users will be comping from and ending up, and the best way to get them through that without them requiring assistance.
You’re outlining features and formats, not detailing, so just get down ideas and don’t worry about aesthetics. Focus on supporting the user’s goals, defining which information is most prominent, knowing what the user is expecting to see, and understanding button placement. Make variations on your ideas and collaborate with others to create something usable.
add detail generally from top to bottom in a way that gives usability, simplicity, trust, and add indications for possible future functionality. Then, have users test what you’ve produced and get feedback to better your design.
once you’ve done user testing, you can import your wireframes to something like invision for more high fidelity user testing.
your wireframe needs to say what the site is and what the user can accomplish. It is a visualization aid to ensure the most important parts of your project are apparent and easily accessible.
you want the site to be easy to navigate. If things are confusing or unexpected, the user’s confidence in the site diminishes.
too much info can be distracting and will be detrimental to the user and, as a result, the success of your project. Ideally, your site has as little ‘fluff’ as possible.
semantics refers to the meaning of a piece of code.
in theory, you could style most things in HTML to look like other tag, such as between an h1 and an h4, but they don’t have the same semantic value. HTML should be coded based on data type rather than presentation to assist with