Exploration of UI in Web Graphic Design

The Jekyll Icon

The Iconic Logo

I like how the logo isnt just a picture. I dont entirley understand how they made it blend so well with the background. I would like to learn how to possibly make a better icon that blends with my site.

The code is a HTML markup that includes img element, which is used to display an image on a web page. This code is instructing the web browser to display an image with the source file "logo-2x.png" located in the "img" directory. The image will be rendered with a width of 140 pixels and a height of 65 pixels, and it is described as the "Jekyll Logo."

Jekyll Open Source Dropdown Tab

Open Source Dropdown Tab

I really like how you click the open source and it has a drop down tab that you have access to clicking other links to bring you to other places. I would like to learn how to make a drop down tab.

This HTML code defines a menu item labeled "Open Source" with an associated dropdown menu. When the user clicks the "Open Source" button, it toggles the visibility of the dropdown menu, which contains several submenu options related to open-source projects and GitHub features. Each submenu option is represented as a clickable link. The code also includes various CSS classes for styling and JavaScript attributes for handling interactions and accessibility.

Jekyll Gemfile Indent

Gemfile Indent

I like how it stands out with the indent in the word. It almost looks like something that would happen when you hover over a word or like a bold. It makes it stand out and look important. I would like to learn how to make certain words stand out like that.

The code is telling the web browser to display the text "Gemfile" within a code block and apply certain styles to it using the "highlighter-rouge" class.

Jekyll Search Bar

Search Bar

I've always been a fan of webpages having search bars. Search bars make everything so easy to find and gets you straight to the point. I would love to learn how to incorpate these in my sites for fast user experiences.

HTML input element that is used to create a search input field on a web page. This HTML input element is designed for search functionality. It has various attributes and properties that affect its behavior, styling, and accessibility. The "autocomplete" and "aria" attributes, in particular, indicate that it's designed to work with a list-based autocomplete feature, and its styling can be customized using CSS classes and inline styles.