This week I began a site redesign and merge. I wanted to find a way combine my photo portfolio with my code blog. The entire project is split in two. This week I focused on design and planning and next week I will code the site.
Objective:
- Come up with a design that accommodates my blog, code, and photography
- create digital wireframe
- gather content and assets
- plan for the second portion of the project
Here is a screenshot of the digital wireframe:
Project 2 checklist:
- [X] gather and edit content
- [x] complete digital wire frame
- [x] chose prototype tools
- [ ] choose css structure
- [ ] choose fonts, color, and write copy
Assets and content
Code
- [x] js calculator
- [x] wikipedia viewer
- [x] Random Quote Generator
- [ ] Proxy Server
- [ ] tic-tac-toe
Writing
- [x] post about project 52
- [ ] travel post
Open source resources:
- [ ] jekyll pretty urls
- [ ] jekyll custom domain
- [ ] jekyll categories and tags
Lessons learned:
Using Adobe XD to digital wire frame
This was my first experience with Adobe XD and I thought it was pleasant. I have some experience with other Adobe products but I am a novice. Adobe XD is very user-friendly with little learning curve. It made putting my sketch into life very easy and fun.
Refactoring code
I revisited the some of the code of that I’ve done in the past so that I’d be happy with what I am displaying on my new site. Here is what I learned from refactoring code:
Content management (on Jekyll):
My current photography is maintained on WordPress so the several gigs of photos I have are stored in a database.
Managing large files on Jekyll is different. Right now, while I don’t have many files, I can easily store photos at normal size in an assets folder in the project. I am still researching how to handle several large files in the future.