The Basic of Front End Development Process
If you are just entering the rewarding world of front-end development, you are in luck. You have made your choice to learn at this time. Like anything worth doing, front-end development is not easy, If you are up for the challenge, however, let us get you started!
Work Processes of Front-End Development
In order to make websites and apps accessible to users, the front-end must complete three tasks:
1) Get information the user requires from the back-end and translate it from the “back-end language” to the specific OS (operating system) language in which it will be shown to the user
2) Organize the information on the screen
3) Give it an aesthetic shape
These tasks all occur within the front-end but in two different “layers.” In order to make these concepts more accessible, let’s call them the Logical Layer and Aesthetic Layer.
We refer to it as “logical” because it is involved in gathering, interpreting, and processing the data that will later be shown within the aesthetic layer.
For the first task to be accomplished, the front-end must communicate with the back-end through an API (Application Programming Interface) and ask it for specific information.
After the requested information has been properly delivered, the second task begins. During this step, developers must write additional code in order to specify the way the requested information will be shown to the user.
The aesthetic layer is exclusively related to the design of a website or app.
As mentioned before, everything (including design) can be coded. However, nowadays there is a wide range of graphic design programs, such as Illustrator, Photoshop, and Sketch, that can expedite the development process.
The people responsible for all of the images and other elements users see on the screen are UI Designers or graphic designers who specialize in user interfaces.
To be clear, however, the images they create are static. They will only “come to life” after the developers implement the necessary code to animate the graphic elements (a.k.a. assets) created by designers.
Factors to Consider for Front-End Development
For the logical layer, it’s important to take into account the language of the code you or your team are going to use. The code is essential for the front-end to work properly.
There are two main options:
1) Developing natively, which means to code in the specific language of a particular OS;
2) Developing cross-platform, which means writing a non-specific code that will work across different OS’s.
When it comes to the aesthetic layer, we share the following tips:
1) Bear in mind the specific navigability of each OS Design for iOS is not the same as design for Android since each OS has its own proportions, way of distributing elements, and ultimately its own navigability.
This reality is of extreme importance when it comes to front-end design. If you develop without taking this into account, your users will probably find the interface “uncomfortable” or “weird,” which would likely lead to the app’s disuse or even deletion.
2) Ease the user’s workflow through the conscious design of each screen, you can simplify the navigability and flow of your website or app, which is essential to its usability.
Basic things, such as not forgetting the “back” button on each screen, can make the difference between an “easy-to-use” app and an “I-don’t-get-it” app.
3) Respect branding when designing a new website or app (or new webpage or feature), be sure to keep the company’s overall brand identity top of mind.
You should strive for originality while also maintaining a consistent aesthetic line and respecting the OS’s UI recommendations, such as Google’s Material Design.