Category: Frontend Design
-
If we want to start a new line, which tag is used in HTML?
Do not use <br>. Repeat: do not use <br>. HTML is about content. <br> is an HTML element but it is about the presentation of a break (visually a line break – not sure about aurally). MDN sees the use of <br> in poems and addresses wherein the division of lines is important.
-
What is your advice for a web graphics designer: who is getting started as UX/UI designer, what software do I use and what codes should I learn?
It’s helpful to frame your inquiry in these descriptions: Web Designer – a designer focusing on visual design of websites UX/UI Designer – a designer focusing on user research and user interface of websites and apps Software – design software that helps in the design process Language – markup, stylesheet, scripting, programming language for front-end…
-
HTML & CSS Workshop
Audience Interaction, User Interface, and Visual Designers Purpose To enable designers in collaborating with front-end developers through discovery (of new methods and tools in design handoffs) and empathy (by experiencing front-end development). Goals To be familiar with Mobile First as a design principle To be familiar with Separation of Content and Presentation as a design…
-
Deconstructing Instagram
As an exercise on Front-End Development, The UI Team took a screenshot from instagram.com and treated it as if it were a design mockup. We then proceed to deconstruct its Structure and Skeleton (Elements of UX) thru Information Architecture, Interaction Design, Information Design. The knowledge that arose in this deconstruction was used in building the…
-
Revisiting CSS Levels
I am currently making a curriculum for the basics of HTML and CSS. Revisiting CSS Levels, I have written in the past about it: Building CSS in Levels Elements of CSS V2 CSS Principles #1 The important thing to remember is to pattern it after the Levels of HTML wherein we must begin with Accessibility…
-
Putting “Skip to Content” Into Context
Does the HTML markup of your website has an accessibility function in the form of “Skip to Content”? If yes, then you would notice that it is located at the topmost of the markup. This is as such in order to make it the first focus when using keyboard to navigate. Now you may ask,…
-
3 Layers of an Active Element
Imagine this ombre cake: It looks yummy and it has layers. It is similar with active elements – they must have three levels for the purpose of CSS. The first level is the textual element itself. The second level holds the function of the active element (e.g., <a> or <button>). The third level is for…
-
Building a Technical Vocabulary
As front-end designers, we are using patterns over and over again – we are employing specific techniques to answer specific needs. But what we lack is a term, a name tag for those methods. It’s simply like the Flying V of The Mighty Ducks! So far, I’ve added Padding and Framing to my vocabulary. Let’s…
-
Building CSS in Levels
After building the Content Structure (HTML) of your website, the next step in the process is building its Visuals (CSS). To be able to ease the process of writing the style sheets, we must segment it into levels: Level 1: Default (browser level) Level 2: Normalize (boilerplate level) Level 3: Modify (visibility and sizes level)…
-
HTML Semantics
I’m currently working on HopScotch 3 and it involves a lot of revising the HTML markup of content structure plus a lot of structural class names. In relation to this HTML refactoring, I’d like to share with you some notes on writing the HTML markup of web sites: Text. Begin by writing in plain text…