This was written to speed up the time it takes to convert a design into a website. I was getting non-standardized files that are then to be converted into a web site. Which greatly slowed down the design process.
To handle this I devised a design system.
To start one will be using InDesign and Photoshop to do the site design and one needs to set up InDesign to be a web design tool.Installing a Hex Swatch plug-in in InDesign, as you will need to use Hex numbers when designing a web site.
1. Go to this web page Create Hex Swatch.
2. Download the plug-in and unzip it on that web page.
3. Follow the direction in the read me file the comes with the plug-in to install it.
4. To use it create a new Hex Swatch as shown below.
Setting up your system to run Google Fonts
As many of the fonts on your computer can’t be using on the web, you will need to install google fonts and turn off all the fonts that are not system fonts or google fonts.
1. To start with you will need to disable all your non-system fonts. Open Font Book on a Mac., Then right click on the top font on the list and select disable font. This will create a folder Library/Fonts Disabled, as you can see in the below picture. This folder is on the root, makes sure it is the right folder as you don’t want to mess with the system fonts. However your system fonts folder should be hidden.
2. Drag all the fonts in the Library/Fonts folder into the Library/Fonts Disabled folder. This will copy all the fonts into that folder. Feel free to leave actual web fonts like Arial in place.
Then move all the fonts in the Library/Fonts to the trash. Ensure that they are in the Library/Fonts Disabled before you actually delete anything.
3. Now you only have system fonts on your computer. Go to this site and github.com and download github for your computer. And install it. After you install it follow the directions, create an account and do all steps.
4. After you have created an account you will go the: github google fonts repository. Sign into github on that page. Then click Clone to Desktop. What this will do is copy google fonts to your computer and keep them up to date with github, as google fonts are constantly changing.
5. You will be prompted to select where you are to download the files to. They need to go in Library/Fonts.
6. Once the download is complete you will be done You will have over 600 Google Fonts loaded in your system . You do not need to do anything else to activate them. Github will check for updates every time you open it, keeping your fonts up to date and downloading new ones as they become available.
Now you can actually design a site
As you will be laying out a web site design, you will be using layout software—InDesign. Additionally InDesign exports images and fonts which means you will not have to open a PSD and then take it apart one pice at a time. InDesign makes it very easy to export a all images as seperate files and as you will be using hex numbers and google fonts, everything will be there.
1. Open InDesign.
2. Click on File/New/Document. In the document pane under intent choose web. Then set the width to a standard web page width such as 960px.
3. Now you can design the site, using Photoshop to edit your images and then linking them to InDesign. Ensure there is a home page and back page design.
4. Once approved, package the web page. This will put all the images in one folder and all the fonts in another folder.
5. When the site is approved and packaged, create a spec sheet page. Create this as a tabloid size page. Link the site 960px page into the new page. Add in any background colors or images that go around the web page. Then put all the specs about the site on the page.
6. PDF the spec sheet.
7. Turn the spec sheet and all files over to the front end developer.