Create user experiences that are well-organized, appealing and engaging.
UX Process
User Interference:
User Interference is the presentation of the product.How it looks Like and feels Like.
User Experience:
User experience is overall experience the user has with the product
1. Define your project
- Start off by defining the goal of your project. This can be showing your portfolio to the world, selling an e-book, building a blog, etc.
- Also define your audience. Ask yourself: which is the typical user that will visit my website?
- This is important, because you should always design with your goal and audience in mind.
2. Plan out everything
- Once your project is defined, plan your content carefully. This includes text, images, videos, icons, etc.
- Remember what I told you about visual hierarchy. It plays an important role when you start thinking about what you want on your website and what you don’t. Defining the content before actually starting the design is called the content-first approach. It means that you should design for the content, instead of designing a webpage and then filling it with some stuff.
- Define the navigation.
- Define the site structure. You can draw a sitemap in this step if we’re talking about a bigger project.
3. Sketch your ideas before you design
- Now it’s time to get inspired and think about your design.
- Then, get the ideas out of your head. And with that I mean that you should sketch your ideas before you start designing. It will help you explore ideas and create a concept of what you want to build. Using pencil and paper is a great way of quickly retaining your valuable ideas.
- Make as many sketches as you want, but don’t spend too much time perfecting anything. Once you have an initial idea, you can concentrate on the details when designing in HTML and CSS.
- I advise you to never, ever start designing without having an idea of what you want to build. Getting inspiration is very important in this phase, and I already told you how to do that!
4. Design and develop your website
- After sketching, start to design your website using all the guidelines and tips you’ve learned in the web design section.
- You’ll do that using HTML and CSS, which is called designing in the browser. Designing in the browser is basically designing and developing at the same time.
- There are more and more designers leaving traditional design programs such as Photoshop and start designing in the browser. The biggest reason for this is that you can’t design responsive websites in photoshop. It also saves you tons of time.
- In this phase, you’ll use your sketches, content and planning decisions you’ve made in steps 1, 2 and 3.
5. It’s not done yet: optimization
- Before you can actually launch your beautiful masterpiece for the world to see it, we have to optimize its performance in terms of site speed.
- You also need to do some basic search engine optimization (SEO) for search engines such as google.
6. Launch the masterpiece
- Your optimized website is now finally ready to launch.
- All you need for launching is a webserver that will host your website and deliver it to the world.
7. Site maintenance
- The launch of your website is not the end of the story.
- Now it’s time to monitor your users’ behavior and make some changes to your website if necessary.
- You should also update your content regularly in order to show your users that your website is alive! For instance, a blog can be a great way of doing that.
Conceptualization
Website should be designed in a way that ensures that both the user and the owner of the website achieve their goals. This is the user experience.
Visual hierarchy : Define where you want your audience to look first ,White space is also important to build a layout by defining the visual hierarchy of your content. Establish a flow that corresponds to your content’s message .Content: Most of your Content will be text, so beautiful typography is a key element to a good looking website.
Images :Images are getting more and more important in webdesign, so choosing great images and putting text on them is an essential part of your work.
Icons: are also a good way of setting a friendly tone for your website, but use them carefully. Use icons to list features/steps. Icons should be recognizable.
Label your icons . Use icon fonts whenever possible.
White space: The adequate use of white space makes a website look professionally designed, so use it a lot, but in the correct way. Incorporating white space between your groups of elements, between you website’s sections, to build that flow .Font Size: Use a font-size between 15 and 25 pixels for body text .
Use (really) big font sizes for headlinesLine Spacing: Use a line spacing between 120 and 150% of the font size .
45 to 90 characters per line . Chose a font which reflects the look and feel you want for your website.Colors: Use only one base color, to draw attention, choose colors wisely .
Tools For Optimization of the website design
Prototyping, Mockups and Wireframes
- Traffic Analysis Testing
- User Performance Testing
- Eye Tracking Evaluations
- Cross-Browser Evaluations
- Mouse Tracking Evaluations
- Website Load-speed evaluations
- Display (Screen) Design
- Accessibility
- Web Anywhere
- W3C Validator Suite
- Web Accessibility Evaluation Tool
sheetalatuxdesigner.com 