Web design for science dummies
I'm currently working on a project to bring an old publication to new life on the web. We want it to be a dynamic, structured and integrated version of the paper copy publication. To have maximum value for researchers, it should be modern and user friendly.
Jeremy Thomas took me on a 4 minute journey into the world of design. Thanks Jeremy!
The look and feel of a modern webpage can be distilled into the following set of [paraphrased] rules:
Of course, the world of web design seems to be as fickle as fashion. Trends come and go, things become outdated and need refreshing. I believe the above principles, however, should stand the test of time. They are centered on utility.
Jeremy Thomas has also built a beautiful and lightweight CSS framework based on Flexbox. It is called Bulma.
What are those mumbo jumbo words you ask? CSS is a stylesheet language that allows website creators to give their pages colours, fonts, and other style elements. It has existed for almost as long as I have.
The use of CSS is evolving. Users are not locked to their desktop computers when they want to view content. Smartphones, tablets, e-readers, and other handheld devices are allowing humans to browse the web from a seemingly infinite number of screen sizes and OS configurations.
Enter, responsive web design. The practice has evolved out of the growing and pressing need to present websites to a plethora of machines, by resizing, hiding, and restructuring the interactive environment of the webpage.
Flexbox is a module introduced in CSS3 to implement the need for responsive design. Bulma simply builds upon this framework, to give web developers the most bang for their buck (time).
There is so much to learn about how to implement the best search. So here I will only present a few tidbits that I've been thinking about over the past few days.
There are two paradigms of search. Firstly, we have navigational search, using a hierarchy or taxonomy, which used to be prevalent in the early days of the web. Second to enter the scene, is direct search. Think, Google or other search engines. The user types in a blob of text, this is parsed and results are presented in a list.
Faceted search is a hybrid. It provides the user with a free-form text box to enter their query. When the results are returned, not only is a list of results presented, but also a side bar providing the user with options to narrow the search. Faceted search is used by Amazon and big retailers, but also by institutions like libraries. In fact, my local library has implemented faceted search in their beautiful new site.
Other helpful features should be implemented to assist the user in finding good results, like text links and breadcrumbs.
Scientists are humans and they behave [mostly] like typical web users. Let's use these principles to make the tools they need top notch.
Web Design
So, I've been diving into modern web design. The beautiful, easy-to-read and clean looking sites you see these days can be distilled into a surprisingly few number of principles. |
| Fonts, centering, spacing, and images all have huge impact. |
The look and feel of a modern webpage can be distilled into the following set of [paraphrased] rules:
Focus on content
Use clear readable text
Utilize text colour for emphasis
Add bold images
Of course, the world of web design seems to be as fickle as fashion. Trends come and go, things become outdated and need refreshing. I believe the above principles, however, should stand the test of time. They are centered on utility.
Jeremy Thomas has also built a beautiful and lightweight CSS framework based on Flexbox. It is called Bulma.
What are those mumbo jumbo words you ask? CSS is a stylesheet language that allows website creators to give their pages colours, fonts, and other style elements. It has existed for almost as long as I have.
The use of CSS is evolving. Users are not locked to their desktop computers when they want to view content. Smartphones, tablets, e-readers, and other handheld devices are allowing humans to browse the web from a seemingly infinite number of screen sizes and OS configurations.
Enter, responsive web design. The practice has evolved out of the growing and pressing need to present websites to a plethora of machines, by resizing, hiding, and restructuring the interactive environment of the webpage.
Flexbox is a module introduced in CSS3 to implement the need for responsive design. Bulma simply builds upon this framework, to give web developers the most bang for their buck (time).
Search Design
While I believe the site should feel modern and clean, the usability of the site is of the highest importance. When a user comes to our site, the search bar will be the most used element.There is so much to learn about how to implement the best search. So here I will only present a few tidbits that I've been thinking about over the past few days.
There are two paradigms of search. Firstly, we have navigational search, using a hierarchy or taxonomy, which used to be prevalent in the early days of the web. Second to enter the scene, is direct search. Think, Google or other search engines. The user types in a blob of text, this is parsed and results are presented in a list.
 |
| The beautiful new Ottawa Public Library navigation. Bravo OPL! |
Faceted search is a hybrid. It provides the user with a free-form text box to enter their query. When the results are returned, not only is a list of results presented, but also a side bar providing the user with options to narrow the search. Faceted search is used by Amazon and big retailers, but also by institutions like libraries. In fact, my local library has implemented faceted search in their beautiful new site.
Other helpful features should be implemented to assist the user in finding good results, like text links and breadcrumbs.
TLDR
The world of web design is vast. Many people have spent many hours thinking about how to make sites beautiful and usable.Scientists are humans and they behave [mostly] like typical web users. Let's use these principles to make the tools they need top notch.
Comments
Post a Comment