3 ms·

Ask HN: Speeding up front-end layout development?

• graphememes 10y ago
  Process: Mockup > Design (> Design Mockup) > Implement > Iterate () = Optional Mockup Tools: - https://balsamiq.com/ - https://wireframe.cc/ Design Tools: - Photoshop - Sketch - AI Post-design Mockup / Implementation: - https://www.invisionapp.com Common Approaches to Implementation: - CSS Framework (Bootstrap / Foundation) - CSS Grid & Typography (Skeleton) - 100% Custom CSS (Expert / Experienced mode) When to Use? - Wireframe implementation? (Framework / Grid) - MVP (Framework / Baseless) - Mockup to be scrapped (Baseless) - Animations / Marketing (Framework / Custom) Implementation Tooling: - Build (Gulp / Webpack) - Hot Loading (browser-sync, webpack-hotreload-server) - Processors (Babel, Rollup) - CSS Minification (minify, uncss) - Image minification (imagemin) There is more but this will get you about 95% there
• onion2k 10y ago
  C#, WinForms and some XAML You make your desktop applications using a GUI framework. Do the same thing on your web app with [getbootstrap.com|Zurb Foundation|any one of many alternatives].
• dragonbonheur 10y ago
  1. Design your page in a good, WYSIWYG web editor 2. Preview in your browser 3. press F12 in your browser 4 Modify the CSS in the Browser 5. copy the CSS from browser to editor 6. CTRL+s
• ud0 10y ago
  Mockup - Simply use sheets of paper with a pencil, draw the mockups & pin on a board for the whole team to see, this makes it easier to change stuff. I find digital mockup tools slow. - If you need High fidelity design, get a designer to spin this up, if you attempt to use your poor photoshop skills, you are likely going to slow things down. Development/Implementation/tooling - Uses SASS + PostCSS + SMACSS, this cannot be overemphasised why? At first, it may take some time to set up but will save you tonnes of hours later. SASS enables you write modular CSS, nesting will save your life and PostCSS will help you with messy cross-browser stuff like vendor-prefixes. Modular css will help you iterate faster because it's clear where to find what. _header.scss, _sidebar.scss you get the point. - Use a CSS grid framework, don't waste time writing yours, even so, extract bootstrap's plug it in and use. - For form elements and typography use a CSS framework and if you need anything custom modify as you go along, note you should have a file e.g _modified_btn.scss where these customizations will live so you don't go crazy in the future trying to find it. - Set up hot-reload somehow, with React this is easy. It will save you stress hitting `ctrl + R` 1000 times. - Use IDE/Editor plugins that automatically prettify your code personally, I code with Sublime Text 3 so I use HTMLPrettifier and set `format_on_save: true` you don't want to waste time hitting tabs. Links: https://smacss.com/ https://smacss.com/ http://sass-lang.com/ http://sass-lang.com/ https://github.com/postcss/postcss https://github.com/postcss/postcss https://github.com/victorporof/Sublime-HTMLPrettify https://github.com/victorporof/Sublime-HTMLPrettify Lazy dev's guide :)
• jwdunne 10y ago
  I think the best thing is to spend more time up front thinking about the layout. Use Balsamiq mockups and prototypes before writing code. You will, I think, save a large amount of time this way. We have, at my works, gone through a similar process that was drawn out over several years. We have been spending more time in the planning and design phase and it has cut development times significantly. The reason for this is exactly what you have described. Errors, QC no-gos, negative feedback from the client - these things lengthen project times. Here's a great idea that I believe worked well for us: do a postmortem. You don't need to publish it but it will help you think about what went wrong in each project and, more importantly, how to.avois it in the future. By project 3 or 4, the process will be like night and day.