I redesigned the layout of the existing OneNews.ph website to keep it updated and to standardize certain aspects of it in relation to the OneNetwork Multisite project.
The plan
While the layout of OneNews.ph at the time worked well as is, given that we were planning to start on the OneNetwork Multisite project, we decided to update the look and overall layout of the site to set it as the main template to be replicated across different verticals. We had to make sure that we knew what each part of the website was for, and know which parts we can make personalized for the particular vertical, and which ones should be programmed to function the same way across all verticals.
Some notes
- While the chosen design elements for the website is okay and readable, there are times when the headline is too long and it ends up taking up majority of the space, and it ends up pushing all the other pieces of content below the fold.
- For the other published articles (blue boxes), since the title content length varies from time to time, there are cases where the length was not accounted for and the text ends up overflowing.
Mockups
- Considerations regarding the various title content lengths were accommodated for in the new design, and streamlined so that more articles are also shown above the fold, or in the first load, so readers would have more options to choose from.
- Given that the layout for OneNews.ph will be repurposed for other verticals, with the content of those possibly varying in tone or length (example: OneNews.ph is purposely for long-form articles, while the new verticals to be made in the future may not necessarily be set up in that way), we decided to make a compromise between making more space for other elements, like the featured image, lede or excerpt, and tags, to be visible to the user, while still keeping it fluid enough that it can accommodate those occasional moments when the headline is really long.
