👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
About Snippet
Categories
0
Comment
Since you’ve already mastered the basic languages of web development (HTML, CSS, JS), you are now basically skilled as a Front-end Designer.
Now, how to be a skilled UI Designer?
- Learn how to interpret the Product Requirement Document
- Learn how to translate the Task Flow Diagram into individual Wireframes and eventually into an Interaction Diagram
- Learn how to transition the designs to the Visual Designer and Front-end Designer/Developer
Categories
Dive deep into front-end web development (HTML, CSS, and JS) and take it from there.
Start by taking on personal projects wherein you will be the one to implement the front-end development aspect.
Practice via personal projects.
Categories
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.
Categories
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 web development
Categories
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 principle
- To establish a set of guidelines in handing off designs to front-end developers
Topics
- Theoretical
- History of Internet
- HTML Markup
- CSS Syntax
- Design Process Overview
- Practical
- Converting a Mockup
Categories
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 HTML and CSS.
See the Pen RE:Creation: Instagram by Brian Dys Sahagun (@briandys) on CodePen.
We, as Visual Designers, have experienced how time-consuming it was to build the Front-End of a design mockup basing only on a simple image.
The Design Handoff warrants to have more than the Brand Guidelines, Style Guide. It must also have some form of Information Architecture and Interaction Diagram that could greatly make Front-End Development faster.