14

Designers - How Do You Start Developing a Site?

over 5 years ago from , Design @ Nested.com

I am looking to develop my website again and I was wondering what other designers or even developers start building a website. In summary: What tools etc do you use? Any frameworks? Any recommendations?

I'm a windows user but feel free to list Mac programs here in case it helps anyone else out :)

24 comments

  • Marc EdwardsMarc Edwards, over 5 years ago (edited over 5 years ago )

    I always like to know what is needed before touching any code.

    That means I’ll rough out ideas on paper, in Adobe Illustrator or Adobe Photoshop first. I realise those approaches aren’t always popular with responsive web design, but I think static tools have a lot of value, especially early on in the process.

    For websites, I’ll typically only work out components in Illustrator/Photoshop (header, footer etc), and jump into HTML/CSS pretty early.

    I do use SASS (SCSS). I don’t use any frameworks or grid systems any more (percents and box-sizing: border-box make life pretty easy).

    I’ve been using CodeKit to remove white space and compile SASS to CSS. https://incident57.com/codekit/

    I currently use Hammer for static site compiling, and to convert Markdown to HTML (handy if you have tons of text pages, articles or help docs). http://hammerformac.com

    And, I’m using Coda for pretty much all the editing and FTP. http://panic.com/coda/

    All three of those tools have different ways to preview your pages in realtime, but I usually use Coda for that task.

    It’s another Mac app (I think everything I’ve listed is Mac only), but Espresso is also worth checking out. http://macrabbit.com/espresso/

    8 points
    • Nick Wittwer, over 5 years ago

      +1 for Espresso and CodeKit. The workflow is so fluid when they're used in tandem.

      2 points
    • James Young, over 5 years ago

      I tried Hammer and it was mildly useful but as soon as I had to pass a project (unexpectedly) across to another agency the client bought in to do other bits on, it became a bit of a nightmare as they were Windows devs so Hammer became a bit of a burden as they couldn't compile the files or work in the same way and the project that was neat and tidy fell apart a bit.

      Something to consider as not everyone is on a mac.

      1 point
    • Updula LeeUpdula Lee, over 5 years ago

      OH DEAR GOD!, YOU DON'T USE SUBLIME TEXT! WHY WOULD YOU DO THAT TO YOURSELF?

      2 points
      • Tyler Fowler, over 5 years ago

        My votes up for Atom in this case, never could get into Sublime.

        Also I use Brackets for certain things, it's slightly more project oriented structure can be better for certain things. Unfortunately I place way too much value on good syntax highlighting and the CoffeeScript highlighting in Brackets is.. how do you say.. garbage?

        0 points
  • Nick HileyNick Hiley, over 5 years ago

    I usually draw up a quick wireframe in my sketch pad then design it in Photoshop.

    I recently switched to Brackets (http://brackets.io) for my text editor and really like it so far as I was using Notepad++ in the past (don't judge).

    I've stripped down Bootstraps grid system as it's the only thing I like about the framework and also use SASS.

    For static sites I like to use GitHub Pages and maybe Jekyll depending on the needs. If it's a blog I'm building, I try to persuade the client to go with Ghost (http://ghost.org) and learn some markdown instead of Wordpress because you know, PHP sucks.

    GitHub pages has some restrictions when building a site such as the capability to add a contact form but I found Brace forms - http://forms.brace.io which is a nice little alternative.

    Oh and I use Gulp now and then :)

    3 points
    • Ed AdamsEd Adams, over 5 years ago

      Thank you so much for mentioning Brace Forms! I've wanted a contact form on an otherwise static site as long as I've been using Jekyll. This is a godsend.

      1 point
      • Nick HileyNick Hiley, over 5 years ago

        I haven't really looked into how it works but it's a great free service and is really easy to integrate into your forms.

        The only downside is that for a confirmation message, it sends you to an external page.

        I've been trying to create a modal window or even a new browser window to display a confirmation message but no luck yet

        1 point
  • Simon EvansSimon Evans, over 5 years ago

    In addition to the other points made already, have a look at gulp/grunt.

    2 points
    • Patrick SmithPatrick Smith, over 5 years ago (edited over 5 years ago )

      I have a set up of gulp tasks for SCSS, Compass, Browserify, Coffeescript if needed, and SVG optimisation at https://github.com/BurntCaramel/guilty-gulp

      It lets you customise the tasks and automatically sets up watch tasks for the paths you have specified.

      I do recommend getting to know gulp by itself as it’s purposely been made simple to use. These tasks I’ve created make it a bit easier and more flexible once you’ve got your head around how it works.

      0 points
  • Aaron WhiteAaron White, over 5 years ago

    SublimeText is a must... it's Mac & Windows http://www.sublimetext.com/3

    2 points
  • Aaron WhiteAaron White, over 5 years ago

    Depends on the type of site you are building...

    Bootstrap - http://getbootstrap.com Foundation - http://foundation.zurb.com

    Jekyll - http://jekyllrb.com Hugo - http://gohugo.io Rails - http://bit.ly/1C1LF6m

    Here is a nice comparison of front-end frameworks: http://www.monolinea.com/css-frameworks-comparison

    I just pushed a repo from where I start with Bootstrap & Jekyll: https://github.com/aaronkwhite/bootstrap-jekyll

    1 point
  • Sean GeraghtySean Geraghty, over 5 years ago

    Thanks so much for all the tips guys, I think I've got a few new tools now to work with. Now to tackle learning Ruby.

    0 points
  • Susan DiazSusan Diaz, over 5 years ago

    Can you give me a little more information about the concept about your website and what all features basically you're looking to upgrade in the new design - can suggest you better.

    Let me know Agile Infoways

    0 points
  • Daniel FoscoDaniel Fosco, over 5 years ago (edited over 5 years ago )

    I investigate the problem and talk to the client a lot before doing anything else. Also, include users into the conversation as soon as you can — through surveys, interviews and whatever other tactics you have available.

    Edit: Here I'm considering develop in the broader sense of the word (i.e. making). For actual dev there are already a bunch of killer suggestions in the thread.

    0 points
  • Raghav KukretiRaghav Kukreti, over 5 years ago

    Okay. So, first of all I use Sublime Text 3 with Predawn as my theme. I have Emmet and HTML-CSS-JS Prettify as my extensions. They really help speed up my workflow and keep my code spick and span. I use Git Bash as an alternative to Command Prompt. I use yeoman, Grunt and Bower to start my site. yo, scaffolds the site and creates my directory structure, files and code. bower installs my dependencies and grunt serves and compiles my files on a local server. I use the angular-webapp generator for most projects but the humble webapp generator can do all jobs quite efficiently. I also use SCSS and jQuery. So what about the design? I simple sketch out the whole webpage and some of the important components like the topbar or some special buttons. Hope it helps :) Cheers!

    0 points
  • Duncan BeatonDuncan Beaton, over 5 years ago (edited over 5 years ago )

    If you are wanting to build a webapp I can't recommend yeoman enough.

    It allows you to scaffold out your project really quickly, easily and following best practises.

    If you are familiar with Rails you will know how powerful that can be not having to worry about configuring boilerplate stuff.

    You get loads for free: + Separate tasks for watching files with live reload developing and compressed build version + Compressing your images and minification + SASS plus bootstrap if you fancy + Tests + etc

    0 points
  • Alejandro CamaraAlejandro Camara, over 5 years ago

    The software I use for website development is

    Skech for wireframe, prototype and final design.

    iTerm2 writing in VIM mode and Gulp with Livereload for dev in local with the Chrome plugin.

    Lately, I've been using INUITCSS as a starting framework.

    0 points
  • James McNabJames McNab, over 5 years ago

    Meteor.js is simple to use and if you already know a bit of jquery won't be too hard to pick up. It's so simple even I learned to use it in a few weeks.

    It's a fullstack framework but Meteor does most of the backend work for you.

    You can check it out at http://meteor.com to install it.

    To start learning it check out http://meteor.academy/

    0 points
  • Diana Lopez, over 5 years ago (edited over 5 years ago )

    I use http://mixture.io with Foundation/Sass

    also http://brackets.io

    0 points