INTERACTION-DESIGN & DEVELOPMENT
STUDY TIMELINE
YEAR 1 YEAR 2 YEAR 3 YEAR 4 GRADUATIONAFTER - Media design - Web design - Web development - Game design - 3D - Focus on design - Fonts - Spacing - Color schemes - Front end development using HTML5 & CSS - Introduction JavaScript - Back-end development with PHP and WordPress - First internship - Second internship - Start content writing - Graduation project - Web design & development - Content writing - Edit pictures, logos, corporate designs etc.
CREATING A WEBSITE IN 4 STEPS
And a lot of smaller steps in between ;)
1. STARTING A CONCEPT
- Customer wishes
- Askifthereis a corporate design
- Set up a concept or wireframe
2. DESIGN PHASE
BASIC DESIGN RULES
- Workfroma grid
- Pick a colorscheme
- Pick a font
TOOLS
- Photoshop
- Figma
- Sketch
- Axure
CONCEPT & DESIGN TIPS
- Ifyoudon’thave time youcanbuya template(https://themeforest.net/)
- Get inspired by the work of others(https://dribbble.com/)
3. FRONT-END DEVELOPMENT
- HTML as the skeleton
- CSS as the looks
- Use Sass or Less
- Use bootstrap for responsive design
CSS TIPS
- Follow a course: https://www.codecademy.com/catalog/language/html-css
- CSS tricks, like w3schools, but complete guides: https://css-tricks.com/guides/
- Codepen: https://codepen.io/
4. BACK-END DEVELOPMENT
- CMS = content management system
- Wordpress(https://wordpress.com/)
- Businesses usually have a custom CMS
- Web hosting
BACK-END TIPS
- Always check if your website supports most browsers(https://caniuse.com/).
- Use an open source CMS
- Easy to use
- Easily access to help online
Links
- Flatuicolorpicker→https://www.flatuicolorpicker.com/
- Flaticon →https://www.flaticon.com/
- Figma→https://www.figma.com/
- Sketch →https://www.sketch.com/
- Axure→https://www.axure.com/
- Photoshop →https://www.adobe.com/nl/products/photoshop/free-trial- download.html
- Sass →https://sass-lang.com/
- Bootstrap →https://getbootstrap.com/
- Less→https://lesscss.org/