The document provides tips for designing webpages in the browser by focusing on structured content and a mobile-first approach. It recommends starting with plain HTML, focusing on content, color and type before layout. Designers should use developer tools and sketch before coding, adding complexity at breakpoint thresholds until the design breaks, then adding another breakpoint. This additive, content-focused process prepares the design for smallest screens in a progressive manner.
Progressive Enhancement & Mobile [Funka 2012]Aaron Gustafson
The concept of progressive enhancement is the way forward for web design, especially on mobile devices. Aaron Gustafson shows you how the latest techniques - mobile first, responsive design, and adaptive UI - fit in to the process.
Startup Technology: Cheatsheet for Non-TechiesFreedactics
Everybody and his mom wants to create an app today. But not everybody is a hacker. That shouldn't be a problem! Still it might be helpful to know some basics about the technology, which is used to build your startup. This Infographic will give you a brief overview.
Slides from 2nd meeting of UI/UX User Group in Dominican Republic. These slides contain:
- UX in Layouts in the last 5 years
- Long Scrolling Site Basics
- Layout trends for 2014
- Wireframing 101
Progressive Enhancement & Mobile [Funka 2012]Aaron Gustafson
The concept of progressive enhancement is the way forward for web design, especially on mobile devices. Aaron Gustafson shows you how the latest techniques - mobile first, responsive design, and adaptive UI - fit in to the process.
Startup Technology: Cheatsheet for Non-TechiesFreedactics
Everybody and his mom wants to create an app today. But not everybody is a hacker. That shouldn't be a problem! Still it might be helpful to know some basics about the technology, which is used to build your startup. This Infographic will give you a brief overview.
Slides from 2nd meeting of UI/UX User Group in Dominican Republic. These slides contain:
- UX in Layouts in the last 5 years
- Long Scrolling Site Basics
- Layout trends for 2014
- Wireframing 101
Prototyping is a skill that every entrepreneur should have. As a UX designer who turns to startup founder myself, I crafted this course and hope it can help a non-technical people can get started doing something toward from their idea to the next step.
Building Organic Web Traffic, Webinar with iZootoAnnkur Agarwal
Annkur's Webinar for SMBs on building organic web traffic for long term gains. Webinar recording here: https://my.demio.com/recording/A6ouY9Mu (start from 19 mins mark).
The webinar included examples from various industries (SaaS, Ecommerce etc) and strategies to build organic traffic. Plenty of SEO and good user experience tips discussed.
Early on as a Designer I had the privilege to work with some big brands, like: Verizon, Mission Foods, Nokia, and Sabre. Most of my projects were rooted in web applications. Which I loved, and was more than happy to work on as a UX Designer. But some designers took other paths, working on e-commerce sites, or perhaps lead generation. What has been hard to find recently is someone who's done both. I know I didn't know e-commerce to the degree I needed to when starting at GameStop - but learned quickly - luckily I've had some good teachers over the last couple of years.
Now talking about channels, bounce rate, A/B testing, conversion, SEM/SEO in the norm. And as I loved designing applications, I find equal interest in what makes people shop and (hopefully) eventually buy.
I recently gave this short presentation to a group of designers - a 101 on getting your interface to sell
This is an internship presentation that I created as part of the internship curriculum, you can use this presentation for a web developer internship presentation that you might need to give in your college.
It has nice animations on demo pages compared to Internship Presentation 1.
It has more advanced web developer tools explained like AWS, Lamba, Angular etc.
GFAR webinar "The future of online media" - webdesign trendsGCARD Conferences
This presentation was used during our GFAR webinar on "The future of online media", announced here: https://blog.gfar.net/2016/10/09/upcoming-webinar-predicting-future-online-media/
Check out the live webinar recording here: https://youtu.be/N8UkwOoI9hQ
Creating an Interactive Book with iBooks Author #mLearnCon15Nick Floro
There’s a growing interest in creating interactive digital books for learning. The challenge is that there are several publication formats and many different vendor applications to use to build an interactive book. Knowing which format and/or tool to use, when to use it, and what’s involved in creating your content.
Presented #mLearnCon15
http://www.elearningguild.com/mLearnCon/sessions/session-details.cfm?event=333&q=floro&searchfield=speakers&fromselection=doc.3876&from=sessionslist&session=6650
Prototyping is a skill that every entrepreneur should have. As a UX designer who turns to startup founder myself, I crafted this course and hope it can help a non-technical people can get started doing something toward from their idea to the next step.
Building Organic Web Traffic, Webinar with iZootoAnnkur Agarwal
Annkur's Webinar for SMBs on building organic web traffic for long term gains. Webinar recording here: https://my.demio.com/recording/A6ouY9Mu (start from 19 mins mark).
The webinar included examples from various industries (SaaS, Ecommerce etc) and strategies to build organic traffic. Plenty of SEO and good user experience tips discussed.
Early on as a Designer I had the privilege to work with some big brands, like: Verizon, Mission Foods, Nokia, and Sabre. Most of my projects were rooted in web applications. Which I loved, and was more than happy to work on as a UX Designer. But some designers took other paths, working on e-commerce sites, or perhaps lead generation. What has been hard to find recently is someone who's done both. I know I didn't know e-commerce to the degree I needed to when starting at GameStop - but learned quickly - luckily I've had some good teachers over the last couple of years.
Now talking about channels, bounce rate, A/B testing, conversion, SEM/SEO in the norm. And as I loved designing applications, I find equal interest in what makes people shop and (hopefully) eventually buy.
I recently gave this short presentation to a group of designers - a 101 on getting your interface to sell
This is an internship presentation that I created as part of the internship curriculum, you can use this presentation for a web developer internship presentation that you might need to give in your college.
It has nice animations on demo pages compared to Internship Presentation 1.
It has more advanced web developer tools explained like AWS, Lamba, Angular etc.
GFAR webinar "The future of online media" - webdesign trendsGCARD Conferences
This presentation was used during our GFAR webinar on "The future of online media", announced here: https://blog.gfar.net/2016/10/09/upcoming-webinar-predicting-future-online-media/
Check out the live webinar recording here: https://youtu.be/N8UkwOoI9hQ
Creating an Interactive Book with iBooks Author #mLearnCon15Nick Floro
There’s a growing interest in creating interactive digital books for learning. The challenge is that there are several publication formats and many different vendor applications to use to build an interactive book. Knowing which format and/or tool to use, when to use it, and what’s involved in creating your content.
Presented #mLearnCon15
http://www.elearningguild.com/mLearnCon/sessions/session-details.cfm?event=333&q=floro&searchfield=speakers&fromselection=doc.3876&from=sessionslist&session=6650
The Forrester Wave™: Enterprise Mobile Management Q3 2014Symantec
We’re happy to share that Symantec was named a Leader in the Forrester Wave™: Enterprise Mobile Management, Q3 2014! The research conducted by Forrester Research, Inc. evaluated Symantec and 14 other vendors against 27 criteria for current offering, strategy, and market presence.
Symantec was identified as one of ten vendors that “lead the pack.” The leaders were noted for separating ourselves from other vendors by introducing a strong security background without disruption for the employee. Forrester defines Leaders as balancing OS, application, and data management functionality while providing flexible container options and productivity applications, and have demonstrated a strong vision and roadmap to help customers as they bring their PC and mobile management strategies together.
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap Creative
Bootstrap 4 Tutorial PDF for Beginners with step by step examples, resources, videos, and cheat sheets. Learn how to use Bootstrap CSS in your web project now. https://bootstrapcreative.com/shop/bootstrap-quick-start/
Learn Bootstrap 4 Step by Step for Beginners
This Bootstrap tutorial pdf and training material will teach you how to quickly prototype and build responsive websites using Bootstrap 4. You will become familiar with common components, setting up a grid, and how to customize the look and feel. Get your copy at https://bootstrapcreative.com/shop/bootstrap-quick-start/
Learn Bootstrap 4 and responsive design basics step by step. For beginners and for experienced developers who want to migrate existing Bootstrap 3 sites to Bootstrap 4. Includes a tutorial, cheat sheets, templates, and quick reference guides.
How to Learn Web Designing Step by Step From Basics in 2018Noor Muhammad Khan
How to Learn Web Designing Step by Step From Basics in 2018
How to learn web design is the most commonly asked question around. The web design industry has collapsed from a small niche to a powerful, constantly growing force.
Designing better user interfaces sets out to teach interface design by talking through concrete examples: what works, what doesn’t work. A good interface consists of a thousand details done right. This presentation is all about those details.
Form Function Class 6, Manila, Philippines 14/11/2015Holger Bartel
Sweating Details - Slides from my talk at Form Function Class 6 in Manila Philippines on Nov 14th, 2015.
This talk is about sweating details and how small tweaks and changes can make a big difference in any of the web design stages. From optimising the process, via UX and design all the way to performance, this talk covers possible tweaks and recommendations with some practical examples to improve the overall experience of our products.
Similar to Sculpting Text: Easing the Pain of Designing in the Browser (20)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)Stephen Hay
My presentation for CSS Day 2013. Browser compatibility slide has been omitted; please check caniuse.com for Flexbox compatibility.
Please note that these slides are actually screenshots of a web page I made for the presentation, combined into a PDF to post here; thus, no plain text transcript.
Style Guides Are The New Photoshop (Smashing Conference 2012)Stephen Hay
This talk was first presented at Smashing Conference (http://smashingconf.com/).
Use of image editors for creating web design mockups has worked until now, but responsive design is forcing us to find alternatives, as we can't simply create more mockups as we design for more screens. Have no fear, there is at least one method of replacing Photoshop for web design. Let's take a look at one of the most important aspects of this method: the creation of clear, semi-automated, self-updating style guides.
Style Guides Are The New Photoshop (Fronteers 2012)Stephen Hay
A slightly modified version of the talk I first presented at Smashing Conference, now presented at Fronteers 2012. (http://fronteers.nl/congres/2012)
Use of image editors for creating web design mockups has worked until now, but responsive design is forcing us to find alternatives, as we can't simply create more mockups as we design for more screens. Have no fear, there is at least one method of replacing Photoshop for web design. Let's take a look at one of the most important aspects of this method: the creation of clear, semi-automated, self-updating style guides.
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Stephen Hay
Slides from my presentation at Breaking Development 2012 in Orlando. This deck is not intended to be standalone, and probably made more sense in combination with my talk. At least, I hope so. I understand that video of the talk will be available in the near future on the Breaking Development website.
These are my slides for my presentation at Fronteers 2011. Ironic that I had to make images of my HTML slides and convert them to a PDF in order to upload them here. I will, however, post the HTML slides on my site shortly.
Real-world Responsive Design @ Breaking Development 2011Stephen Hay
A presentation I gave at Breaking Development 2011 (which was an updated and modified version of the presentation I gave at Fronteers 2010). In this talk I touched on the new Flexbox draft and CSS3 Grid Layout. Interestingly enough, while I was presenting, Microsoft announced IE10, which includes support for both specs (as well as multicolumn layout).
Book Formatting: Quality Control Checks for DesignersConfidence Ago
This presentation was made to help designers who work in publishing houses or format books for printing ensure quality.
Quality control is vital to every industry. This is why every department in a company need create a method they use in ensuring quality. This, perhaps, will not only improve the quality of products and bring errors to the barest minimum, but take it to a near perfect finish.
It is beyond a moot point that a good book will somewhat be judged by its cover, but the content of the book remains king. No matter how beautiful the cover, if the quality of writing or presentation is off, that will be a reason for readers not to come back to the book or recommend it.
So, this presentation points designers to some important things that may be missed by an editor that they could eventually discover and call the attention of the editor.
Transforming Brand Perception and Boosting Profitabilityaaryangarg12
In today's digital era, the dynamics of brand perception, consumer behavior, and profitability have been profoundly reshaped by the synergy of branding, social media, and website design. This research paper investigates the transformative power of these elements in influencing how individuals perceive brands and products and how this transformation can be harnessed to drive sales and profitability for businesses.
Through an exploration of brand psychology and consumer behavior, this study sheds light on the intricate ways in which effective branding strategies, strategic social media engagement, and user-centric website design contribute to altering consumers' perceptions. We delve into the principles that underlie successful brand transformations, examining how visual identity, messaging, and storytelling can captivate and resonate with target audiences.
Methodologically, this research employs a comprehensive approach, combining qualitative and quantitative analyses. Real-world case studies illustrate the impact of branding, social media campaigns, and website redesigns on consumer perception, sales figures, and profitability. We assess the various metrics, including brand awareness, customer engagement, conversion rates, and revenue growth, to measure the effectiveness of these strategies.
The results underscore the pivotal role of cohesive branding, social media influence, and website usability in shaping positive brand perceptions, influencing consumer decisions, and ultimately bolstering sales and profitability. This paper provides actionable insights and strategic recommendations for businesses seeking to leverage branding, social media, and website design as potent tools to enhance their market position and financial success.
Dive into the innovative world of smart garages with our insightful presentation, "Exploring the Future of Smart Garages." This comprehensive guide covers the latest advancements in garage technology, including automated systems, smart security features, energy efficiency solutions, and seamless integration with smart home ecosystems. Learn how these technologies are transforming traditional garages into high-tech, efficient spaces that enhance convenience, safety, and sustainability.
Ideal for homeowners, tech enthusiasts, and industry professionals, this presentation provides valuable insights into the trends, benefits, and future developments in smart garage technology. Stay ahead of the curve with our expert analysis and practical tips on implementing smart garage solutions.
Can AI do good? at 'offtheCanvas' India HCI preludeAlan Dix
Invited talk at 'offtheCanvas' IndiaHCI prelude, 29th June 2024.
https://www.alandix.com/academic/talks/offtheCanvas-IndiaHCI2024/
The world is being changed fundamentally by AI and we are constantly faced with newspaper headlines about its harmful effects. However, there is also the potential to both ameliorate theses harms and use the new abilities of AI to transform society for the good. Can you make the difference?
18. One of the biggest problems
we have with designing in
the browser is that many
designers think about
layout first.
WE NEED TO STOP DOING THAT.
19. We need to think about
structured content first.
PSSST! HTML IS STRUCTURED CONTENT.
(WHEN DONE RIGHT, OF COURSE)
20.
21. Take actual content, structured
with HTML, and start building
upon it, incrementally,
cumulatively. That is the way of
progressive enhancement, and
it’s the nature of the Web.
22. “ One technique I've used for years is to “design in text”... not
necessarily describing everything in textual form […]
essentially what is the message that needs to be
” communicated if I was only able to provide the user with
unstyled HTML?
– Bryan Rieger
30. TIP #2
Focus on color & type first.
MAYBE IMAGES AS WELL. BUT NOT LAYOUT (YET).
31. TIP #3
Use a tool that makes it easy
to sketch in code.
JSBIN, CODEPEN, ETC.
32.
33.
34. TIP #4
Use your browser’s
developer design tools.
35.
36. TIP #5
Sketch before coding.
DO THIS BEFORE EVERY BREAKPOINT.
37.
38. TIP #6
Expand your browser window
until your design looks like
$#!%. Time for a breakpoint.
CONTENT & DESIGN, NOT DEVICES, SHOULD DETERMINE BREAKPOINTS.
45. THANK YOU! @stephenhay
Linus by Charles Schulz. Image: https://www.etsy.com/listing/84806498/oversized-vintage-linus-peanuts-postcard
Crocobear image: http://www.reddit.com/r/HybridAnimals/comments/2ldzqq/the_requested_crocobear/
Phil Hawksworth by Luke Wroblewski: https://www.flickr.com/photos/lukew/10453062745/in/set-72157636814608894
Baby images: http://www.morguefile.com/archive/display/910824 and http://www.morguefile.com/archive/display/907077
Full Casey Reas interview: https://www.youtube.com/watch?v=_8DMEHxOLQE