On 24th August, Dr. Shawn and I had our weekly meeting. I showed him my current progress working on the homepage of the Sayembara website, which was 50% finished. He told me that my progress was okay, but reminded that I should also ensure that it also looks good on tablets and phones, as most people access websites using those devices nowadays. Therefore, I made that as my primary task this week. Thankfully, WordPress has some built-in features that allows editing the website if it is viewed on different devices.
A Silly Mistake
One quirk about this feature is that you need to make sure to checkmark it before editing, or else your changes in the mobile layout will also apply to the desktop layout. I wasn’t aware of this at first, so when I edited parts of the mobile layout—like changing the font size, it also applied to the desktop layout, making it look strange. Thankfully, with WordPress’ undo feature, I easily reverted the website’s desktop look to its original state. From this experience, I always made sure to checkmark that specific feature while making changes to the three layouts.
A Look-Over
On Tuesday, before he would have other commitments to attend to from Wednesday to next Monday, I decided double-check with Dr. Shawn whether the six images I planned to use for the website were appropriate or not. He told me to remove any QR codes and logos, and to also make sure that an image has their purpose as to why they are shown on the website. From his advice, I decided to take the most important images that showcase the application’s primary use—which were to ensure smooth registrations and make judging easier.
Changes from the Blueprint
Since I decided to choose two images to showcase the application’s most important uses, the original idea I had for that section wouldn’t work well, since using two images just for a slideshow would be redundant. Not only that, there’s not really a feature in WordPress that allows putting an image over a certain element without adding additional CSS, which I wanted to avoid in case it messes with the other layouts. Therefore, I decided to change it from the mockup I made, making the design much simpler, but more effective in displaying important information.
Overcoming a Creative Block
One of the biggest and unexpected challenges I faced this week was to make the contact section of the page look good. At first, I followed the mockup that I made, but it looked quite empty, the images looked off, and the font was a bit too big—especially on mobile. Then, I decided to use simple icons, and while it looked better, the layout simply felt iffy.
I decided to take a step back, and looked at how other websites made their contact pages. None of them had the vibe that the Sayembara was looking for, but it did make me think of other ideas that could suit the contact section better, though. It didn’t help that whenever I made changes while editing that specific section, it would look different on the real, actual page. It could just be my experience with WordPress, however.
Reflections
Sometimes, the ideas you originally had will deviate, and that is okay! It is a normal occurrence that happens when building an effective website. Inserting unnecessary elements will often confuse visitors of a website in what we are trying to promote—so its better to simplify, or to change some aspects.
Next Week’s Plans
I hope that I can start working on other sections of the website after I have finally finalized the contact section, as well as ensuring every layout looks pleasing.
0 Comments