Web designing and presentation skills

Hi dear reader!

It's once again time to return to the past weeks happenings at school. As I attended to the LOB student cruise, on Monday I was happily having a good time and shopping in Stockholm. Because of that, I missed the class that day. But Thursday's one I didn't, and I think I have got something interesting to tell about it!

Breakfast in Stockholm.

Web designing

So on Thursday we had a lecture held by Kwame Afreh. He is Laurea's former student and nowadays works as a system specialist at Webropol. Afreh is an IT professional with many years' experience in software project management and product development. We had an excellent opportunity to hear his tips for website design. That's pretty good, because soon, just in couple of weeks we should give our finished digital marketing ideas for the client company SSM in the final presentations.

User research

At first Afreh reminded of the importance of user research. It helps to understand the users of the company's webpage and why and how they want to vist there. User research is necessary, as your website's main goal is to help existing and potential customers to find the information they need as quickly and efficiently as possible. 

Probably the most popular agile technique to capture product functionality are user stories. They are short, simple descriptions of a feature told from the perspective of the person who desires the new capability, usually a user or customer of the system. Cleverism webpages article gives really illustrative and comprehensive tips for writing good user stories.

User stories are agile technique to capture product functionality.

Afreh also recommended to create a sitemap and a wireframe. They aid your visitors in finding what they’re looking for within 3 seconds on their visit and avoid the tendency of your users having to click multiple times just to figrure out what your page offers. By creating a wireframe for your website, you can lay out the desired conversion paths for each persona. Sitemap and wireframe stimulate each customer’s journey throughout your home page by including resources and tools to help them learn about your company quickly.

Responsive design

These days a very important part of web designign is its responsiveness. Responsive website serves the same HTML with all static assets such as CSS, Java Script and images in the browser on any device. 

Jeff Cardello have listed in his blog some tricks & tips for responsive web design. I put his useful tips in brief:

• Pay attention to navigation. Try to simplify your navigational choices and use icons paired with text, in-page links, collapsible menus, and dropdowns to get people where they need to go.

• Your buttons should be easy to identify and understand. Generally, circular and rectangular elements are the most recognizable as buttons. Getting too creative with the shape of your buttons can confuse a user, so stick with familiar forms.

• Start your design with mobile in mind. If the organization of your content, navigation, and graphics all make sense on a smartphone, they’ll also be clear on a tablet or on a larger device like a desktop. This is one of the advantages of responsive design.

• Plan your content organization before you design. Content and design flourish when developed in tandem. Design around the content, and base your navigation on its organization. A linear path will keep someone engaged with your website and lead to better conversion rates.

• Use only the words you need. With mobile devices, you must work within the confines of smaller screens. That means writing more economically, ensuring that every word helps move your story forward. Consolidate copy, use bullet points and other structural devices, and trim the fat wherever you can.

• Typography matters even more on smaller screens. Use a highly legible font, especially for vital bits of text like navigation labels. Spacing is also a factor on smaller screens. Make sure that your line height is set to an appropriate amount.

• Embrace negative space. Make use of negative space (aka, whitespace) to create breaks in your design and highlight those areas of content that you don’t want anyone to miss.

• Create and test responsive prototypes. Make sure to test your prototype on the actual devices to ensure that the website will work without problems. This will save you time and hassle — and spare you snarky tweets reporting that your site’s “broken” on mobile.

• Stick to the fast lane with responsive images. Keep your website moving with images that load quickly, on every device. Responsive images offer a powerful and effective workaround, but are laborious and painful to hand code.

Responsive design allows your website to adapt to the device your users are viewing it on. 

Designing User Interface (UI) principles and usability guidelines

User Interface (UI) Design focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions. UI brings together concepts from interaction design, visual design, and information architecture. Consistency is one of the most well known principles of user interface design. Having more consistent UI or interaction is simply a great way to decrease the amount of learning users has to go through as they use your page. 

Afreh shared us Jakob Nielsen's 10 heuristics for user interface design:

• Visibility of system status (Application should always keep users informed)

•  Match between system and the real world (Speak the users' language)

• User control and freedom (Provide exit when users make mistake)

• Consistency and standards (Follow platform conventions)

•  Error prevention (Eliminate error-prone conditions)

• Recognition rather than recall (Minimize the user’s memory load by making objects, actions and options visible)

• Flexibility and efficiency of use (Allow users to tailor frequent actions)

• Aesthetic and minimalist design (Dialogues should not contain information which is irrelevant or rarely needed)

•  Help users recognize, diagnose and recover from errors (Error messages should be expressed in plain language, precisely indicate the problem and constructively suggest a solution.)

• Help and documentation.

As a conclusion Afreh noted that there are no wrong and right designs until it has been established that the design does not serve its purpose then we can qualify it as wrong.

Presentation exercises

After the morning's lecture and lunch, one of our digi coaches, Viliina held us very functional lesson to exercise our presentation skills. It was also a very useful lesson keeping in mind the exciting presentaions that waits us after a couple of weeks. 

Improvisation exercises improve essential story telling skills, develop trust, communication and confidence.

Viliina reminded us how important it is to be able to improvise and laugh to yourself. When presenting, anything is possible and everything should be taken as it comes. Therefore you also should accept yourself as you are. In Francine Stevens' blogpost can also be found good tips for learning improvisation skills and how to use them to unlock innovation creativity.

Viliina's note worth remembering to me and all of us: "Be yourself, so you can be anything!" ❤