GOLF BURNABY
WEBSITE
TYPE
web design
(3) group project
ROLE
web designer,
coder
SKILLS
coding, sketching, ideation, wireframing, researching
TOOLS
photoshop, jquery,
HTML/CSS, axure
TIME
fall 2014
3 weeks
final website in a PDF format for presentation
pdf of initial wireframes for website layout
desktop version of booking a tee time via axure
first iteration (homepage + booking)
Although the first iteration had all the information, I was not happy with the results, which is why we ended up making a drastic change to our final version of the website. One thing that bugged me was the color which, although looked like the sand and grass of the golf course, it was not a nice palette to look at. We were trying to cater it towards a more mature crowd but we also needed to make sure it was more modern and up to date in our final version.
initial website design
We also had input from other people about the usablility of our site and how we could improve it. The top 3 notes about it was the color choice, the lack of icons and the fact it was very text heavy.
usability testing and records
final iteration (homepage + booking)
FINAL THOUGHTS
The final version had a more modern look that did not sacrifice usability. Ultimately, we decided to keep a bit of an older-model twist with this website to suit the demographic it was catered towards. I feel like i've learned quite a bit about CSS and HTML in this project and about what makes a good layout in terms of its' usability, graphics and keeping someone engaged. I wish I had more time to work on this project because there is a lot of things I would still like to fix and change such as the amount of information in the pages (still very text heavy) and the overall styling of the site.
See it at work @ http://www.sfu.ca/~asmalhi/iat235/home.html
back to
top
ROLE
PROCESS
This school group project involved 3 people redesigning an existing website of Golf Burnaby. This included rearranging content, creating a more visually appealing user interface and making it responsive for different screen resolutions and for mobile use.
In this project, I did most of the HTML and CSS, and worked with my partners in the initial wireframes, and rearranging the content. My main role in the site design was the use case (booking a tee time) and the navigation/headers. This project challenged my HTML coding skills and taught me a lot about how to make grids to create a neater and more collasable interface. I also learned a lot by researching and looking at the trend of websites and what would work for this kind of site--something sleek and easier to use, but nothing too modern as it is catered to people at a more mature age.
The first thing I did was a lot of background research. Prior to this project, I did not have any web design experience so I believe it is crucial to look at other works and see what worked and what doesn't so I can apply it to my website.
Next thing we learned to do was basic wireframes, either done in sketches or through photoshop. I decided to photoshop it to allow me to work faster in coming up with a layout. Here, I found out how useful it was to have a gameplan for the design as it makes the future process much easier.
wireframes
research first!
axure wireframing
Next step up was more wireframing, but with a program specifically for that purpose; Axure. Using this was a simple learning curve and helped us identify what we wanted and what we didn't really need in the final site. Since I worked most heavily in the use case, below is the example of it.
mobile version of booking a tee time via axure